Dandelion Light InteractiveFree
Built for Pappus, the sample brand inside the template
A writing-tool hero where a still photograph of a dandelion in one beam of light fills the screen while dust and modelled seeds drift up through the light.
How it moves
The still page paints first: a greyscale photograph of a dandelion seed head in a diagonal shaft of light fills the whole screen, its bottom 14% fading into black. The wordmark sits top left; under it, in the dark upper left of the photograph, the serif headline 'Notes people keep.' is set large in three short lines (100.8px at 1440, 44px on a phone) with one round button, 'Start writing'. On a phone the headline is at the top and the button at the foot, with the seed head between them. A WebGL layer then fades in over 1.6 s: the beam shimmers by up to 7%, warm air rises along it (curl noise with slow gusts) and up to 900 specks of dust drift in it, bright inside the beam and almost gone outside it. The signature is the seeds: each is a procedurally modelled seed (70 filaments with barbs, a beak and a body) pre-drawn at five viewing angles, sharp and blurred; one trembles on the head, lets go at about 3.5 s and then every 5 to 9 s, rights itself and rises through the light. Clicking 'Start writing' lifts the air, sends 12 seeds (7 on a phone) up together and shows 'Gathering your words…' for 8 s; a moving pointer parts the dust and seeds.
What you get
- A tested build prompt · 9.4k wordsPaste it into Claude Code, Cursor, Codex or Lovable and it builds the hero section by section.
- The working projectVite + React.
npm install && npm run devand it runs, no keys or accounts. - The assets and their promptsEvery image and loop, plus the exact prompts that made them, so you can make your own.
Inside the prompt
A single-screen hero for Pappus, a writing tool. A black-and-white photograph of a dandelion seed head standing in one diagonal shaft of light fills the whole screen; its bottom 14% dissolves into black. The headline "Notes people keep." is set large in three short lines in the dark upper left, with one button, "Start writing", under it. The photograph never moves; the air around it does: warm air rises slowly along the beam, about 900 specks of dust drift in it, and every 5 to 9 seconds one seed (modelled in 3D, drawn as a sprite) trembles, lets go of the head and rises through the light, glowing only inside the beam. A phone visitor sees the finished still photograph, the headline at the top and the button at the foot of the screen at first paint; the live layer fades in over 1.6 s, dust arrives between 0.6 s and 4.5 s, and the first seed lets go at about 3.5 s. Pressing "Start writing" lifts the air and sends a dozen seeds up together.
- What it is
- Style
- Build steps
- Assets
- Motion summary
- Make it yours
- Launch checklist
- Acceptance checks
