Exploding Motor Scroll-Driven 3D
Built for Velm, the sample brand inside the template
A hardware hero where a giant split headline wraps a code-built three.js hub motor that turns and comes apart into its five parts as you scroll.
It builds, or it's free. If this prompt doesn't rebuild the site you saw in its live demo, email us within 14 days of buying for a full refund.
How it moves
The first screen is a warm grey page with 'Quiet power' top left and 'in the wheel' bottom right in very large Geist, the Velm H2 hub motor built in three.js between them (a still render stands in until WebGL draws), the wordmark, three links and a palette key, a one-line lede and two buttons. The words close in from their corners over 0.45 s and the motor turns slowly on its axle, leaning towards the pointer; 'in the' passes in front of it, the other words behind. The signature is the teardown: the wheel or a vertical touch drag turns the motor side-on and separates it along its axle into brake-side cover, stator, rotor, drive-side cover and freehub, each named on a hairline leader, then puts it back together, linear in the input; 'Take it apart' does the same in 600 ms. 'Choose your motor' carries the motor aside and opens a spec panel with sample specs, and Cmd or Ctrl and K opens a small palette of the same items.
What you get
- A tested build prompt · 11.1k 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 one-screen hero for Velm, a made-up maker of sealed direct-drive hub motors for e-bikes and cargo bikes. A very large two-part headline is split to the corners of a warm grey screen ("Quiet power" top left, "in the wheel" bottom right) and a three.js model of the hub motor, built in code from its real parts, sits between the words: "in the" passes in front of it, the other words behind. The signature is the teardown: the mouse wheel or a vertical touch drag turns the motor side-on and separates it along its axle into five parts, each named on a hairline leader, then puts it back together; "Take it apart" does the same in 600 ms. A phone visitor sees the whole composition at first paint (a still render of the motor stands in until WebGL draws), the motor turning slowly on its axle, and the one action, "Choose your motor", which opens the motor's spec panel.
- What it is
- Style collection
- Build steps
- Assets
- Motion
- Make it yours
- Launch checklist
- Acceptance checks
