Loading…
Live page · scroll inside
PremiumDesign studio · light · landing page · gsap · lenis · html
Brutal
A brutalist design studio's site in raw paper, black and signal orange: a grid of eight cells ruled with thick black lines holds the giant letters R A W F O R M and a mono project number, and hovering, focusing or tapping one of six ruled project rows floods the letters with that project's photograph through an SVG clip. Then an orange band of blunt studio facts, a thick-ruled price table, a dense mono index of twelve projects and a black sign-off with the email set huge.
Placeholder photos by Nikolas Strugar, Stéphane Mingot, Wolfgang Weiser, Ben Allan, Clem Onojeghuo and Adam Patterson on Unsplash. Replace them with your own before launch.
What's inside
- 01Mono barSolid after 80 px.
- 02Letter grid with project photosHovering, focusing or tapping a project row fills the giant letters with that project's photograph (cross-fade 0.45 s, the photo drifting a few pixels) and changes the number in the eighth cell; the row inverts to black.
- 03Blunt factsRows slide in from the left by 24 px.
- 04Price tableRows rise.
- 05Work indexRows appear in quick succession.
- 06Write to usLines rise.
- 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.
