BR-KESAR — Flower to Carton, in Real-Time 3D

Name: BR-KESAR — Flower to Carton, in Real-Time 3D
Brand: Brand Motion Studios

A saffron crocus blooms, gives up its three red threads, steeps them in oil and ends in a hot-foiled carton — all rendered live.

A saffron skincare brand's story, rendered live in WebGL instead of played as video. One pinned scroll opens a crocus in front of a giant italic "Kesar", swings four herbarium tags in on threads and lifts the flower's three red stigmas out to hover while the petals flutter away. A clear dropper bottle rises, the threads sink into its oil and the oil blooms from gold to saffron amber while a Day 01 → 21 counter runs; a gold dropper screws on as the label rolls onto the glass, one drop falls and ripples behind "Keep glowing.", and the bottle drops into a reverse-tuck carton whose flaps fold, lid closes and tongue tucks before it turns to camera. Then an editorial page: a manifesto with self-drawing botanical plates, four products where tapping any bottle whips it round to its back label, a pinned twenty-one-day process, a scroll- and hover-driven ring of sixteen botanicals, reviews and a footer. There is no image, video or model file in the product: the flower, the glass, the oil shader, every label and carton face and every product photo are drawn in the browser. Next.js 16, React 19, React Three Fiber, GSAP ScrollTrigger and Lenis.

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 16
Requires: Node.js 20 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-KESAR — Flower to Carton, in Real-Time 3D 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 $5.99 · Source $18.99 · or All-Access

Unlock BR-KESAR — Flower to Carton, in Real-Time 3D

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

The prompt

$5.99

The exact prompt that built it. Paste it into Claude Code and make it yours.

Complete sourcePrompt included

$18.99

The finished build, as a download that runs today. The prompt comes with it.

Or get All-AccessEvery design in the store, from $99 a year

Secure checkout by Lemon SqueezySecure checkout by Razorpay · UPI, cards, netbanking
Instant access the moment payment clears
Anything broken on our side is fixed or refunded within 7 days. Policy

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.

What's included

✦The complete build brief: every beat window, camera fit, material, print layout and line of copy, so an agent can rebuild the site exactly
✦Complete Next.js 16 + React Three Fiber source, with the brand, the four products and every line of copy in one data file
✦The procedural 3D kit: a crocus with morphing tepals, swept saffron threads, a dropper bottle with an infusion oil shader, a jar, a mist, a pump and a reverse tuck-end carton
✦Print sheets for packaging: colour, spot UV, hot-foil and emboss layers per label and carton face, and a label that rolls onto the glass
✦The scroll engine: one progress value driving the WebGL rig and the HTML overlay, from bloom to drop to carton
✦Tap-to-turn product cards on one shared live turntable, plus in-browser studio stills, so every product photo ships zero image bytes

BR-KESAR — Flower to Carton, in Real-Time 3D

How to run this

More like this

BR-NARIO — Coconut to Carton, in Real-Time 3D

BR-KOKOA — Pod to Sleeve, in Real-Time 3D

BR-SOLAR — A Journey Through the Cosmos, in Real-Time 3D

BR-DAK — Coast to Coast, in Real-Time 3D