Glass Orb Cursor: a Soap-Glass Orb That Follows the Pointer
Build a hero section with a wobbling soap-glass orb that follows the pointer on a spring, bends the lit floor behind it, carries a rainbow band round its rim, swells while the button is held and leaves rings on the floor. One WebGL fragment shader; pure code with no model calls and no media files. Page text and a frosted card sit above it. The hero is followed by a full landing page: chapter titles, an intro, a product console drawn in HTML, feature cards, specs, stats, a quote, a call to action and a footer, with a moving glow and a floating section pill.
Bring your brand, headline, a line of copy, a button, links, up to four card items, palette and language. The Skill returns a full landing page (index.html), a section to paste into an existing site and a React component, with the bundled open fonts.
How it works
The builder writes the page with real text and a frosted card above a full-screen canvas, plus a section to paste and a React wrapper.
In the browser one fragment shader draws the floor and the orb each frame: a soft wobbling outline, the floor sampled again through its curved surface, a rainbow band round the rim and a highlight.
The orb follows the pointer on a damped spring, stretches along its motion, swells while the button is held and adds a ring to the floor on a click or a fast move.
Frequently asked questions
Does the page call a model?
No. It is pure code: HTML, one script and two fonts. Making a page costs nothing.
Does the orb bend the page text?
No. It refracts the drawn floor and backdrop; the text and the card sit above the canvas.
What happens without WebGL?
A soft CSS bubble follows the pointer instead. With reduced motion turned on the orb rests in the middle.
Why do the links do nothing here?
The example runs in a sandboxed frame with its links disabled. In your own page they go wherever you set them in site.json.
Does it work on phones?
Yes. A dragged finger moves the orb. Checked in a 390 px phone viewport.
Why is there no online generation?
Building a new scene needs a model key inside the sandbox, which the backend doesn’t support yet. Run the Skill with your own agent for now.