Verso

AI that writes a sentence onto every frame in a photo archive

by Owais

Repo Live site

Description

Verso is a one-page marketing site for a made-up tool that reads a photographer's archive and writes a sentence onto every frame, so photos can be found by description instead of folder name. The page is warm paper with one clay accent and soft, blurred nature photography. Two sections show the product at work: a search that lights up only the matching photos, and a list of camera filenames beside the sentences Verso wrote for them.

Use it for:

a landing page for an AI, photo or search product
a calm editorial SaaS site with scroll-tied animation
a template for showing what a product does rather than describing it

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 HTML, CSS and JavaScript and adds Lenis.
Pick photos on Unsplash
Choose muted, blurred nature photos made with camera movement, plus one sharp portrait of a photographer by a window. Ask Claude to save them as WebP in an assets folder.
Preview and fix
Ask Claude to start a local preview. Scroll slowly through the whole page and check each section hands over smoothly on desktop and phone, then ask for one fix per message.
Publish on GitHub Pages
Ask Claude to push the folder to a new GitHub repository. Then open the repository's Settings, choose Pages and deploy from the main branch.

Main prompt

Build a one-page marketing site for Verso, a product that reads a photographer's archive and writes a plain sentence onto every frame, so photos can be found by describing them instead of by folder name.

Use plain HTML, CSS and JavaScript in three files with Lenis smooth scroll. No framework, no build step.

Design: warm paper #F7F5F0, sand #EBE5D8 for two sections, one dark section #20231C and ink #191712. Clay #A9542F is the only accent and marks live state only, such as the typing caret and the active step. Fraunces light serif for headings, Switzer for text, DM Mono uppercase for labels. One 22px corner radius. The photos share one mood: blurred, muted nature shots made with camera movement, plus one sharp portrait of a photographer in warm window light for the hero.

Sections:
1. Hero: a full-bleed photo that scales down and rounds its corners as you scroll away.
2. A strip of client logos drifting sideways with the scroll.
3. What it does: three editorial rows on alternating sides, each with one image.
4. How it works: a pinned section where three steps advance as you scroll and the images cross-fade.
5. Search, the one dark section: a query types itself and only the photos that match it light up.
6. What it wrote: camera filenames like _DSC4471.NEF next to the sentence Verso wrote for each, the last one still typing.
7. A big "96%" figure with photo cards drifting past.
8. A full-width quote and an FAQ.
9. Close: a drop zone that describes a photo when you hover it or drop a folder on it (nothing is uploaded).

Tie every scroll animation directly to the scroll position, so layers hand over smoothly instead of switching. Respect reduced motion and give phones a simpler, static layout.