stone to gold

pro

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

A stone-to-gold hover interaction that plays by itself on an 11-second loop and hands over to the mouse. A carved emblem, a calm skull-mask in weathered purple-grey stone with round eye holes and a heart-shaped nose cut through, sits on a deep violet background under soft drifting light shafts, with motes rising through the light. A pointer drifts in and runs round the emblem's rim: wherever it passes, cracks draw on along the edges of Voronoi shards, each shard trembles and pops off, and the pieces tumble away with ballistic physics, spinning and flipping to show their dark undersides, casting soft shadows and shedding dust and a gold glint. Cast gold shows through every hole with a warm flash, the stone that's left throws a shadow onto it and catches light along its broken rims. A click on the brow sends cracks racing out, a gold ring spreads and the camera shakes as the rest of the stone bursts off in a wave. The gilded emblem glows and a sheen sweeps across it twice, then the shards fly back along their own paths, the last to go first, and the stone seals again. Move the mouse over the stage to chip the stone yourself, or click to shatter it all; it comes back a few seconds after it's all gold. Canvas 2D with React and no other libraries, three aligned images of an original AI-made emblem, a 1080 × 1080 stage that scales to fit any window, and frame-exact rendering (window.__render(t), ?rec, 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

  • hover reveal
  • voronoi shatter
  • physics particles
  • click burst
  • camera shake
  • light sweep
  • rewind
  • autoplay loop
  • cursor animation
  • frame-exact recorder

stack

  • react
  • vite
  • typescript
  • canvas

colors

  • #0D0814
  • #5F4075
  • #CF8947
  • #965ADC
  • #FFE7B0
  • #DEC4FF
  • #120A1A

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