Meridian

What's inside

1. 01
   Split gate

   Letters rise in, the rule grows, the mark fades, the halves part top and bottom.
2. 02
   Difference nav

   None; links are plain.
3. 03
   Headline + self-drawing elevation

   Lines rise from masks after the gate; the elevation strokes itself in; its windows fill with accent as the hero scrolls out.
4. 04
   Full-bleed figure + statement

   Clip opens and the image parallaxes as it enters; the statement inks word by word on scrub.
5. 05
   Project index

   Rows rise on enter; hovering a row floats its photograph under the cursor and tints the row accent.
6. 06
   Sticky numeral steps

   The numeral swaps as each step crosses the middle; images settle from 1.1.
7. 07
   Three-column wipe grid

   Each opens from its centre line; columns drift in opposite directions.
8. 08
   Four figures

   Count up on enter.
9. 09
   Start a conversation

   Lines rise from masks; the email underlines on hover.
10. 10
    Footer strip

    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.