ferrofluid button
freeThe prompt is free with an account: sign up with Google or email, and your copy starts right after. The project and Figma file come with monthly or yearly.
A WebGL call-to-action button on a light warm-grey page. At rest, a deep black pool stands in a capsule like a drop of ferrofluid, with crisp studio reflections along its rim, a soft shadow under it and a slow swell moving across its surface, and Get access floats on the liquid. Hover it and the liquid rises in a soft bulge under the pointer; moving leaves a wake of expanding, fading rings, like a finger drawn across water, and the label bends and refracts through them. Click and the surface surges at the click point and drops, sending three waves across the button: Get access dissolves under them and You're in surfaces, then the label comes back after about four seconds. It plays an 8-second scripted demo with its own pointer, and hands over to your real mouse the moment you move it. The whole page is one fragment shader that ray-marches the liquid's height field and reflects a procedural studio off it; both labels are one canvas texture, refracted by the surface's normal. The button is a real, keyboard-focusable button you can wire to any action. Change the labels, the size of the pill, the studio lights or how the ripples travel in a few lines. Every demo frame is a pure function of time, with window.__render(t) and a ?rec mode for frame-exact video export; reduced motion shows one still until you take over. The font is local, so it runs offline.
what you get
- prompt
- Paste it into Claude, Codex, Kimi or Cursor to rebuild this template. Tested: we rebuild every template from its prompt before it goes live.
- project
- The Vite + React source code as a .zip, ready to run.
- figma file
- The editable design as a .fig file to import into Figma.
what's inside
- button
- call to action
- hover effect
- click animation
- webgl shader
- liquid
- ripples
- refraction
- autoplay loop
- frame-exact recorder
stack
- react
- vite
- typescript
- webgl2
- canvas
fonts
Geist
Free fonts, linked in the prompt.
colors
- #F1F0EE
- #E8E7E5
- #DAD9D7
- #040405
- #151515
- #F7F7F7
license
Free account: personal use only. Monthly or yearly adds commercial and client work. Don't resell or share the template, prompt or files.
read the license

