Loading…
Live page · scroll inside
FreeCreative agency / Studio · dark · landing page · canvas · gsap · lenis · html
Ember
A creative-agency site in charcoal and ember orange: a spark swells on the loader, then the hero is a field of three thousand canvas particles that spell a word, scatter and re-form into the next one every few seconds and flee from the pointer; case studies unroll from the bottom, service rows flood orange on hover, a studio statement inks on scroll, an outlined marquee of clients runs, and a glowing blob box closes.
Placeholder photos by Albert Bleeker, Laura Ockel, ryan baker and Declan Sun on Unsplash. Replace them with your own before launch.
What's inside
- 01Spark loaderThe spark pops, swells and burns out; the cover fades.
- 02Dot navLinks brighten on hover; past 80 px the bar turns solid with a hairline.
- 03Particle headlineParticles spell a word, scatter into the next every 3.4 s (pausable) and flee from the pointer.
- 04Unrolling casesFigures unroll from the bottom as they enter; images settle; hover zooms.
- 05Hover-flood rowsRows rise in; hovering floods the row orange from the bottom and turns the arrow outward.
- 06Studio statementWords ink on scroll, counters run, the photo parallaxes, the chip dot pulses three times on arrival.
- 07Outlined marqueeLoops left over 40 s; a pause button sits under its right end. The visible line is aria-hidden and a screen-reader sentence lists the clients.
- 08Blob boxBlobs drift out and back once as the box enters; headline lines rise from masks.
- 09Footer stripNone.
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.
