Longwave

What's inside

1. 01
   Longwave preloader

   Bars scale up and down in a wave for 1.2 s; the name fades; the slab lifts.
2. 02
   Fixed bar with a live dot

   Turns translucent after 80 px; the dot pulses 1.6 s three times on load.
3. 03
   Waveform player hero

   Bars grow from the baseline with a left-to-right stagger on load; play advances the time in real time and the bars ahead of the playhead glow a step brighter; drag (pointer capture) and arrow keys seek; the tooltip follows the pointer; chapter labels light when current.
4. 04
   Scroll-synced transcript

   As each paragraph crosses the middle of the viewport it becomes current (bright, accent timestamp) and the player seeks to its timestamp; while playing, the current paragraph highlights on its own and the page scrolls to keep it in view; clicking a paragraph seeks.
5. 05
   Show grid

   Tiles rise with a stagger; hovering a typographic tile shifts its giant title and shows a play ring; photo tiles zoom.
6. 06
   Studios

   Cards rise; hovering removes the wash and the grayscale and scales the photo 1.03.
7. 07
   Platforms footer

   None.

Utility pages in the same file: 404 · Style guide · Password · Changelog

How to use it

From prompt to a live page.

1. 01
   Walk the page

   The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.

2. 02
   Pick a palette

   Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.

3. 03
   Pick your stack

   Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.

4. 04
   Copy the prompt

   It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.

5. 05
   Make it yours, then iterate

   Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.