Veduta

What's inside

Prompts

HTML · 444 lines / React · 537 lines

Media

Background film · Background image

Hosting

cdn.orbital.supply, already in the prompt

Fonts

Noto Serif Display + Spline Sans · Google Fonts

HTML

One file · gsap 3.15.0 + ScrollTrigger + SplitText (jsDelivr) · lenis 1.3.26 (jsDelivr)

React

react 19.3.0 · vite 8.3.2 · typescript 6.0.3 · tailwindcss 4.3.3 · gsap 3.15.0 (+ ScrollTrigger · SplitText) · @gsap/react 2.1.2 · lenis 1.3.26

Motion

loader-once, die-cut-gate, pinned-overlap, stacked-sheets

Tested & documented

13 October 2026

• Reproduced in Claude
• Checked at 375, 768, 1440, 1920 px
• Spec linter: 0 errors, no generator links

How to use it

1. Claude

   Paste the HTML prompt into a new chat. You get one index.html to serve over HTTP or publish anywhere.

2. Vite + React

   Open an empty Vite + React project and paste the React prompt. It lists the exact packages; the asset URLs are already inside.

The prompt

Excerpt / 537 lines in the full prompt

# Build: "Veduta Pictures" — a film production company site printed on die-cut card stock, with 19th-century landscape paintings that move

## 0. Brief

Veduta is a fictional production company (documentary, commercials, long-form drama) that films on location in natural light. The whole site is a sheet of tan card stock with a die-cut window, like a film gate: through it you see public-domain landscape paintings in which a tiny film crew has been painted, and the opening painting moves (a seamless video loop). Tiny printed slate data (scene, roll, take, timecode, coordinates) sits on the paper. Scrolling opens the gate to full screen, then each chapter is a new sheet that rises over the last one with a die-cut top edge. It closes with the same gate shutting over a golden gorge. Calm, printed, cinematic; one serif, one sans, no accent colour: the paintings carry the colour.

The full prompt unlocks at launch.