Tessera

Visual archive SaaS for creative teams

by Hanan

Repo Live site

Description

Tessera is a one-page marketing site for a made-up archive tool that keeps every frame a studio has shot in one searchable place. The hero is one pinned scene that keeps changing as you scroll: a ring of prints swells into an arch, settles on a single print, then becomes a 3D stack you can scroll through and filter. The rest is white paper, hairlines and photographs, with a price that rolls like an odometer as you drag a ruler.

Use it for:

a landing page for a photo, media or file management product
a gallery or studio site where the photos do the talking
a reference for scroll-driven 3D image scenes without WebGL

Workflow

Open Claude Code
Install Claude Code, open a terminal in an empty folder and run claude. Pick Claude Opus 5 with the /model command.
Paste the prompt
Copy the prompt on this page and send it as your first message. Claude writes the whole site in one index.html.
Photos are already linked
The prompt pulls placeholder photos from picsum.photos, so there is nothing to download. To use your own, ask Claude to swap the links.
Preview and fix
Ask Claude to start a local preview. Scroll slowly through the hero, try the filters and the pricing ruler, then ask for one fix per message.
Publish
Upload the folder to any static host, such as GitHub Pages or Netlify, to share it.

Main prompt

Build a one-page marketing site for Tessera, an archive tool that keeps every photo a creative team has ever shot in one searchable place. Hero line: "Every frame your team has ever made, findable."

Use one index.html with vanilla JavaScript and Lenis smooth scroll. No framework, no build step. Use warm, cinematic photos from picsum.photos.

Design: white, ink #141414 and grey #8a8a8a with thin hairlines, and no colour anywhere. Newsreader light serif for centred titles, Inter Tight for text, and a small grey uppercase label above every section. Keep the same spacing between label, title and content in every section, and keep photos sharp: never blur or dim them.

Sections:
1. Hero, pinned while you scroll: 18 prints circle around the headline. Scrolling swells the ring into an arch, then one print settles in the centre with its caption below it, then becomes the front of a 3D stack.
2. Browse: scroll through the 3D stack of photos, with filters (All, Portraits, Golden hour, Coast, Street, Travel, Desert) and counts.
3. A grid of 12 studio names; hovering a name raises that studio's photo inside its cell.
4. System: five photos in a row. The active one opens wide and they take turns explaining Ingest, Rights, Index, Versions and Share.
5. Workflow: a sticky photo on one side and three steps scrolling past on the other.
6. Field notes: a draggable rail of quote and photo cards, then one sentence whose numbers count up.
7. Pricing: one card whose price digits roll like an odometer as you drag a seats ruler, with a monthly/yearly toggle.
8. Join: an arc of prints, an email field and a giant footer wordmark.

Add a floating nav with a mosaic logo, a pill naming the current section, a full-screen menu and a "Start free" button. Run all animation from one loop that sleeps when nothing moves. Lazy-load WebP images and avoid horizontal scroll at 375px.