Sinkline

What's inside

1. 01
   Centred wordmark bar

   Turns translucent after 80 px; underlines draw on hover.
2. 02
   Headline over a scope bar

   H1 lines rise; the three bar parts grow from the left in sequence; the tonnes count up.
3. 03
   Emissions sankey with a year switch

   Links draw from left to right as the band enters (source links first, outcome links after); switching year or toggling a lever re-lays every node and link over 0.8 s and the summary counts to its new values; hovering a link or node isolates its flows and shows a tooltip.
4. 04
   Reduction lever list

   Rows rise with a stagger; ticking a lever animates its bar and re-lays the sankey above; the residual figure in the heading column counts.
5. 05
   Data sources and standards

   List rows rise with a stagger; the quote's lines rise from masks.
6. 06
   Two-plan price sheet

   Columns rise in turn.
7. 07
   Minimal 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.