ferrofluid button

free

The 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