BR Coffee — Pistachio Tiramisu Iced Latte

Scroll builds the drink, frame by frame

One 29-second master, and the scroll position is the playhead: the glass fills, espresso diffuses through milk, pistachio ribbons wrap the inside wall and cocoa dust settles on the cream, all of it advancing only as fast as you move. The scrubber keeps exactly one seek in flight — a new target is only issued once the previous frame has actually been presented, gated on requestVideoFrameCallback rather than fired on every scroll tick, which is what stops a scrubbed video from teleporting. Scroll input is damped inside the GSAP ticker with a frame-rate independent filter, so the drink eases toward your scroll instead of snapping to it. The four chapters are mapped to the footage's real beats rather than to equal quarters, then given equal scroll distance, so the cream builds slowly over 4.4 seconds of film while the finished-drink hold drifts across 8.2. Fraunces over Geist on porcelain, espresso ink, a single pistachio accent.

How to run this

Works the same on Windows, macOS and Linux. No prior setup beyond Node.js, and nothing to configure — the pack runs as-is.

Built with: Vite 8
Requires: Node.js 20 or newer
Opens at: http://localhost:5173

✦ Or let an AI agent set it up for you

Already using Claude Code, Antigravity, Cursor or Windsurf? Unzip the pack, open the folder as a project, and just ask:

Install the dependencies and run this project, then give me the URL

It reads the README included in the pack, runs the right commands for this project, and sorts out anything that trips along the way. You still need Node.js installed (step 1 below) — everything after that it can handle.

Or run it yourself

1
Install Node.js, if you don't have it
Download the LTS build from nodejs.org and run the installer — on Windows and Mac it handles everything. Mac users with Homebrew can run brew install node instead.
To check it worked, run node --version. It should print a number like v22.11.0.
2
Unzip the pack, then open a terminal inside the folder
Windows: open the unzipped folder in File Explorer, click the address bar, type powershell and press Enter.
Mac: press Cmd+Space, type terminal, press Enter. Then type cd (with a trailing space) and drag the unzipped folder onto the terminal window — it fills in the path for you. Press Enter.
3
Install the dependencies
Run npm install
One-time, and takes roughly 30–60 seconds. It creates a node_modules folder — that's expected, and it's why the zip doesn't ship one.
4
Start it
Run npm run dev
Then open http://localhost:5173 in your browser. Leave the terminal open while you use it — closing it stops the site. Press Ctrl+C in the terminal to stop.
5
Optional — build for production
When you're ready to deploy, npm run build produces the optimised output. The pack deploys to Vercel, Netlify or any Node host with no changes.

+ If something goes wrong

“npm is not recognised” / “command not found: npm”: Node.js isn’t installed, or the terminal was open before you installed it. Close the terminal, open a new one, and try again.
“Port 5173 is already in use”: Something else is running there — often a previous copy of this site. Close the other terminal, or stop it with Ctrl+C.
The page loads but images or video are missing: Make sure you ran the command from inside the unzipped BR Coffee — Pistachio Tiramisu Iced Latte folder itself, not the folder containing it.
npm install shows warnings: Warnings (as opposed to errors) are normal and safe to ignore. Only a message starting with ERR! needs attention.

Still stuck? Email us and we'll get it running with you.

Prompt $2.99 · Source $12.99 · or All-Access

What's included

✦The full two-part prompt, verbatim — the four Google Flow master-shot briefs (plus the optional ingredients montage) and then the complete Awwwards-grade build brief
✦Why the master ships tone-mapped with setparams rather than output colour flags: the footage came off Veo in PQ, and -color_trc on the output is silently overridden by the filtered frames' own metadata — the fix is written into the README with the exact ffmpeg line
✦The GOP 6 encode — a keyframe every 0.2s — and what it trades against the all-intra encodes used elsewhere in the catalogue, plus the hqdn3d pass that kills the chroma speckle tone-mapping lifts out of a white wall
✦The single-seek-in-flight scrubber and the damped ticker filter, as reusable hooks rather than as one component you have to unpick
✦Complete source included, with both the desktop and mobile encodes — the chapter timings are measured against this exact take, so the footage ships with it

Unlock BR Coffee — Pistachio Tiramisu Iced Latte

Buy just the prompt, the full source, or get All-Access for every design in the store.

Or get All-Access →

A prompt is a starting point, not a build script. AI models land differently on every run, so expect to refine the result — spacing, timing and copy — before it feels like the preview. The source pack is that preview, finished and running.

BR Coffee — Pistachio Tiramisu Iced Latte

How to run this

More like this

The Great Indian Cafe — Editorial Food Film

BR-Skins — The Anatomy of Glow

AURELIAN Calibre 01 — Skeleton Automatic

AETHERIS Residences — Skyline Luxury