Loading…
Live page · scroll inside
Premiummedia/newsletter · light · landing page · gsap · lenis · html
Margin
A science newsletter's page set like a broadsheet, in newsprint white, ink, oxide red and a paper preview: a double-ruled dateline over a large serif headline and inline subscribe form, a composer where six topic toggles and three frequencies rebuild a live preview issue (stories leave, slide and arrive, the subject line, next send date and reading time roll), a ruled archive of recent issues, one reader quote and a closing subscribe band.
What's inside
- 01Serif masthead barTurns translucent after 80 px.
- 02Masthead headline with inline subscribeH1 lines rise from masks; the double rule draws from the left; reader count counts up.
- 03Compose your issueEach change recomposes the issue: stories that leave fade and drop out, the rest slide to their new places (transform), new ones rise in; the subject line and reading time roll to new values; the date line follows the frequency (weekday, Tuesday, Sunday).
- 04Recent issues as a ruled listRows rise in turn.
- 05Reader pull quoteLines rise from masks.
- 06Closing subscribe bandBand rises.
- 07Minimal 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.
