Loading…
Live page · scroll inside
Premiumelectric motorcycle · dark · landing page · gsap · lenis · html
Torque
An electric-motorcycle launch site whose hero is a night road drawn on canvas with a headlight cone that follows your pointer and lights the fog, dashes and posts it sweeps across, plus counting spec tiles, a draggable torque-and-power chart that morphs between ride modes, a paint picker and a reservation band.
Placeholder photos by maks_d on Unsplash. Replace them with your own before launch.
What's inside
- 01Headlight preloaderThe disc flickers (three quick opacity steps) then holds with a bloom; the name tracks in from wide letter-spacing; the slab lifts and the hero intro begins.
- 02Fixed bar with reserve pillTurns translucent black after 80 px; underlines draw in the accent.
- 03Headlight-cone night roadThe road scrolls at 'speed' (40–120 km/h, eased by pointer height); the cone aims at the pointer with a 0.08 lerp and widens as the pointer rises; fog particles brighten by their angular distance from the cone's axis and their depth; lines rise from masks; the speed readout follows the road speed.
- 04Spec tilesTiles rise in with a stagger; figures count up on enter; hovering a tile lights its top edge and lifts the number 2 px.
- 05Torque curve chartCurves draw in from the left (stroke-dashoffset) on enter; dragging anywhere on the chart moves the cursor and the bubble follows with the interpolated values; switching modes morphs the curves over 0.8 s (path points tween) and the readout updates.
- 06Design galleryPhotos unroll with a stagger; on hover they zoom 1.04 and their caption slides up; the big one drifts 6 % as the gallery scrolls.
- 07Paint pickerPicking a chip crossfades the overlay colour over 0.6 s and nudges the chip's ring; the photo settles from 1.05 on enter.
- 08Reservation stripThe band rises in; the button's arrow slides on hover; submitting swaps the form for a 'Position #1,042' line that counts up.
- 09Minimal footerNone.
Utility pages in the same file: 404 · Style guide · Password · Changelog
How to use it
From prompt to a live page.
- 01Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
- 02Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
- 03Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
- 04Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
- 05Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.
