Loading…
Live page · scroll inside
PremiumMonogram and logo design studio · light · landing page · gsap · lenis · html
Monogram
A monogram-studio site on bone paper with oxblood and brass: the hero is a logo lab where three sliders (letter pair, Bodoni weight, frame shape: none, circle, arch, diamond, seal) redraw one SVG symbol that appears at once on a large plate, a business card, an app icon and a hanging shop sign, after a short demo. Then a grid of six finished marks, a four-step process with italic numerals, a fee ledger and a seal sign-off.
What's inside
- 01Seal barSolid after 80 px.
- 02Monogram lab heroSliders redraw the monogram everywhere at once: letters swap with a short rise, weight steps through Bodoni 400–700, and the frame morphs between none, circle, arch, diamond and seal with a scale-in. A one-off demo nudges each slider on load.
- 03Mark gridTiles rise in sequence.
- 04Four-step processSteps rise.
- 05Fee ledgerColumns rise.
- 06Letterhead sign-offSeal rotates in a few degrees; heading rises.
- 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.
