BR-Skins — The Anatomy of Glow

Nine pinned chapters, five clips, one scroll

A skincare launch built the way Apple builds a hardware page. Five Google Flow clips are re-encoded all-intra — every frame a keyframe — so a scroll-driven currentTime seek resolves in a single decode, and the bottle comes apart, the liquid explodes and the cream fabric drifts exactly as fast as the reader moves. Nine chapters run 300vh to 600vh: the anatomy section draws five callout lines onto the exploded bottle, the science section floats cursor-reactive spheres over the ingredient footage, and the collection turns five bottles on a Three.js ring with per-slot blur and desaturation. The last chapter is not footage at all — it is a procedural bottle, frosted glass and rose gold with a canvas label, rotated by scroll under a subtle bloom. Sunshine yellow, ocean blue and magenta on warm cream, which is the point: it is a luxury skincare site that refuses the usual sage-and-oat palette.

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: Next.js 14
Requires: Node.js 18 or newer
Opens at: http://localhost:3000

✦ 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:3000 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 3000 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-Skins — The Anatomy of Glow 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 $3.99 · Source $13.99 · or All-Access

What's included

✦The full two-part prompt, verbatim — five Google Flow video briefs and four image briefs with the packaging colour system, then the complete Awwwards-grade build brief
✦Why the clips are encoded all-intra rather than at a dense GOP, and the rAF scrubber that writes a target time and eases the real playhead toward it — sub-frame writes are skipped, which is what stops a fast flick thrashing the decoder
✦The ScrollTrigger detail that silently breaks scrubbed timelines: progress is mapped onto the timeline's own duration, so a timeline ending at t=0.465 compresses every position parameter. scrubTimeline() parks an empty tween at t=1 so positions read as scroll progress
✦How the pinned stages hand over — pinSpacing false leaves a hard seam between two flat cream planes, and useSceneTransition ramps opacity and scale across the overlap to turn it into a dissolve
✦Complete source included, with all five clips and the full image set — the chapter timings are cut against these exact takes

Unlock BR-Skins — The Anatomy of Glow

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-Skins — The Anatomy of Glow

How to run this

More like this

BR-Buds — Hear the Impossible

Ruturaj Jena — Creative Technologist Portfolio

BR Coffee — Pistachio Tiramisu Iced Latte

NEON — The Next Interface