gradient forms
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 looping study of five gradient forms on a near-black field. Each form is one soft, sculpted silhouette lit by a two-colour gradient with a pale rim, covered in animated film grain. It breathes slowly as its edge drifts, holds for 1.7 s, then morphs into the next form over one second while the whole palette crossfades: Dusk Signal (pink to violet), Ember Plume (amber to crimson), Tidewater (aqua to deep blue), Acid Fold (lime to forest green) and Cobalt Crest (periwinkle to indigo), 13.5 s for all five, looping for ever. Each form carries a label in its own corner: "Gradient · 01", its name in light Geist, and its three colours as hex codes with swatches; the label rises in out of a blur and lifts away as the morph begins. The forms, gradients and grain are one WebGL fragment shader with each shape as a single implicit curve, so palettes, shapes and timing are a few lines to change. The square stage scales to fit any screen and the field runs on to the window's edges.
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
- webgl shader
- film grain
- autoplay loop
stack
- react
- vite
- typescript
- webgl
fonts
Geist, Geist Mono
Free fonts, linked in the prompt.
colors
- #050608
- #FF4F7A
- #3A1BD0
- #FF8A1F
- #26DDBC
- #B9EE18
- #6C88FF
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

