fluted goals

pro

Get the prompt, project and Figma file with monthly ($29 a month) or yearly ($249 a year). Plus tax where it applies.

Three savings goals on a warm light stage, on a 12-second loop: Rainy day, Kyoto in May and New studio, each card a window of fluted glass over its own light, a lime halo on near-black green, coral and violet orbs on warm paper, cyan streaks on ink blue. The cards rise in through a soft mask with their text lines trailing, then take turns: the active card lifts, its ribbed glass clears and the art behind it sharpens and pulses, a "+€" deposit chip rises in, the amount counts up, the progress bar and percentage grow and the + button turns into a check, while the other cards dim. The glass ribs again, the next goal takes over, and at the end the cards fall back through their masks so the loop closes seamlessly. The glass and the art are one WebGL 2 shader under HTML type; Geist and JetBrains Mono, a 1080 × 1080 stage that scales to fit any window, a 2D fallback without WebGL 2, a reduced-motion still, Space or R to restart, and frame-exact rendering (window.__render(t), window.__LOOP, window.__MANUAL).

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

  • card
  • progress bar
  • counters
  • webgl shader
  • fluted glass
  • autoplay loop
  • frame-exact recorder

stack

  • react
  • vite
  • typescript
  • webgl

fonts

Geist, JetBrains Mono

Free fonts, linked in the prompt.

colors

  • #F2F1EE
  • #101511
  • #E8F07A
  • #ECE6DD
  • #F26B4B
  • #7C6BF0
  • #0B0F1C
  • #7FE3FF

license

With monthly or yearly: personal and commercial work, client projects included. Don't resell or share the template, prompt or files.

read the license