Loading…
Live page · scroll inside
FreeOpen-source UI component library · dark · landing page · gsap · lenis · html
Kinetic
A UI-component-library site in terminal black with amber and mint: the hero pins while scrolling types a fourteen-line React component into an editor, step by step under a moving highlight band, as the preview pane assembles the pricing card it describes (header, price, features, a working yearly toggle that recounts $24 to $19, button), with a six-step rail. Then three principles with code chips, a 33-component catalogue, one-off licence pricing and a copy-the-command CTA.
What's inside
- 01Fork barSolid after 80 px.
- 02Pinned code-to-UI walkthroughPinned for two and a half screens. Each scroll step types its lines into the editor (40 ms a character) under a moving highlight band and builds the matching part of the card: header, price, features, a yearly toggle that flips $24 to $19, and the button. Scrolling back removes them in reverse.
- 03Three principlesColumns rise.
- 04Component catalogueGroups rise.
- 05One-off licencesRows rise.
- 06Copy-command bandHeading rises; Copy confirms in place.
- 07FooterNone.
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.
