Loading…
Live page · scroll inside
PremiumAI image tool · dark · landing page · gsap · lenis · html
Tessera
An AI image-generation site in ink black with acid lime: a centred prompt bar over a wall of eighteen canvas-painted frames that re-tile with a Y-axis flip-wave spreading from the prompt whenever you generate (keywords pick landform, time of day and tint; the seed varies each frame), a rail of five style passes over one seed, a control sheet, pricing bands and a lime sentence CTA that sends its prompt back to the wall.
What's inside
- 01Tile-mark barSolid after 80 px.
- 02Prompt wall heroOn load the wall paints the first prompt; every Generate (or chip) flips each frame on its Y axis in a wave that spreads from the prompt bar outward, repainting at the edge-on midpoint; the status line reports frames and time. One wave runs by itself 2.6 s after load.
- 03Style railFrames rise with a stagger; each paints once when it nears the viewport.
- 04Control sheetRows rise in sequence.
- 05Pricing bandsBands slide up in sequence.
- 06Sentence CTAThe heading lines rise; submitting scrolls up to the wall and generates.
- 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.
