Loading…
Live page · scroll inside
FreeMusic / Artist · dark · landing page · web audio · canvas · gsap · lenis · html
Cadence
An artist site in black and acid yellow: a seven-bar meter pulses on the loader, the band name fills the hero in Anton over a stage photograph with a round play button at its heart — press it and a Web Audio synth plays a slow four-chord tide while a canvas spectrum and waveform light up along the foot; a yellow marquee, a releases grid with difference-blend titles, a tour list, a press quote and a mailing-list box follow.
What's inside
- 01Meter loaderBars pulse like a level meter, settle, then the cover drops.
- 02Difference navLinks brighten on hover.
- 03Playable heroLetters rise in; press play and the synth plays while bars and a waveform move; the photo and title parallax on scroll.
- 04Yellow stripLoops left over 22 s; the hero Pause motion button stops it.
- 05Releases gridCovers rise in; hover zooms and shows the play disc.
- 06Tour listRows slide in from the left; hover nudges a row right.
- 07Press quoteLines rise from masks; the names fade in.
- 08Join the listThe box rises in.
- 09Footer stripNone.
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.
