Eyewear 3D
Built for Ostra, the sample brand inside the template
Sunglasses you look through: a real 3D pair floats over a sunny place washed out by glare, and the lenses show the same place clear and tinted as they follow your pointer. Swap the place, the lens and the frame colour, then scroll and put them on.
It builds, or it's free. If this prompt doesn't rebuild the site you saw in its live demo, email us within 14 days of buying for a full refund.
How it moves
The first screen is a cove by the naked eye, bleached by glare, with big tortoiseshell frames floating over it; through the lenses the cove is clear, deep and tinted, and the view moves as the frames follow the pointer. Buttons switch the place (cove, snow, town); a frosted panel repaints the frames in four acetates and swaps four lens tints. Scrolling the pinned hero walks the frames onto your face until one lens passes your eye and the whole view becomes the lens view. A pinned split compares the naked eye and each lens on its own place, wiping the next lens in with the scroll, with a draggable divider. A studio portrait wearing the frames pushes in beside the workshop facts. The close turns the frames on warm paper with colour chips, the price, Book a fitting and Order online, and one legal line. Without WebGL the glare photo and the studio photo stand in. All copy, lenses, acetates and image slots sit in one content file, the palette in one theme file.
What you get
- A tested build prompt · 10.8k wordsPaste it into Claude Code, Cursor, Codex or Lovable and it builds the landing page section by section.
- The working projectVite + React.
npm install && npm run devand it runs, no keys or accounts. - The assets and their promptsEvery image and loop, plus the exact prompts that made them, so you can make your own.
Inside the prompt
A landing page for a small eyewear maker (the sample is Ostra, handmade acetate sunglasses from Genoa). The frames are a real 3D model (generated from a studio photo), drawn with three.js on one canvas behind the page. The idea comes from the first-person try-on: you see a sunny place by the naked eye, washed out by glare, and the lenses are windows onto the same place as the lens sees it: deeper, cleaner, tinted.
- What it is
- Style collection
- Build steps
- Assets
- Motion
- Make it yours
- Launch checklist
- Acceptance checks
