A product launch that behaves like a teardown film. One WebGL canvas serves the whole page, and a 620vh pinned ScrollTrigger runs five sequences through it: the buds turn under studio light, the ear tips and shells separate along their own axes, twenty-seven parts across two earbuds and a case settle into a symmetrical exploded sculpture, sound rings and a particle beam fire between the drivers, and then the magnets pull all of it back together and seat the pair in the case. Nothing bounces. The architecture is the interesting part. Scroll progress is written into a plain mutable object rather than React state, and the scene reads it every frame — so a 620vh scrub drives sixteen earbud parts and eleven case parts without React re-rendering once. Every chapter registers a DOM anchor, and each scene group projects that anchor's bounding rect onto the z=0 plane to place itself, then switches itself invisible when the anchor leaves the viewport. That is how a single canvas also renders four macro material windows, three floating colourways, a wireframe-to-solid spec model and the finale, at the cost of one context. There are no model files and no textures on disk: the brushed alloy, the protective mesh, the circuit board and the wordmark are all drawn procedurally to canvas at boot, and the sound rings, beam, ribbons and dust are GLSL. Obsidian black, Space Grotesk at 164px, and colour used only as light.
Paste the prompt intoClaude CodeCursorAntigravityWindsurfLovableBoltv0
What's in the source
67 files — the finished project, ready to run with npm install and npm run dev. It ships with instructions your AI coding agent reads before it changes anything.
br-buds/ ├─ src/ 49 files ├─ public/ 5 files ├─ README.md ├─ AGENTS.md ├─ CLAUDE.md ├─ package.json └─ … 9 more
Questions about BR-Buds
Who is BR-Buds for?
BR-Buds is for hardware and device makers, and for the designers, developers and agencies who build their sites. It's a foundation rather than a site for one business: ask your AI to make it about yours and it rewrites the copy, colours and images around the same build.
What is BR-Buds built with?
BR-Buds is built with 3D / WebGL and Next.js + R3F + GSAP. The prompt is written for coding agents such as Claude Code, Cursor and Antigravity.
Can I use BR-Buds for a client project?
Yes. Every purchase includes a commercial licence: use it in your own projects and in work you deliver to clients, including paid client work, change and rebrand it, and publish the result with no credit needed. What you can't do is resell, share or republish the prompt or the source files themselves.
Should I buy the prompt or the source?
The prompt is the written brief that built the design: paste it into a coding agent such as Claude Code, Cursor or Antigravity and it builds the site on your computer, which you then refine. The source is the finished project itself, ready to run exactly as the preview shows. The source always includes the prompt.
Will the prompt give me exactly the preview?
Not exactly, and that's expected. A prompt is a starting point: AI output varies between tools and between runs, so plan to refine spacing, timing and copy. The source pack is the preview itself, finished and running.
Can I get a refund?
Single designs are final once delivered, unless something is wrong on our side: a broken or empty download, a pack that isn't what its page describes, or a double charge. Then email support@brandmotion.in with your receipt and we fix it or refund it. The full terms are on the refunds page.
More like this
Browse the store →
PremiumBR-Skins — The Anatomy of Glow
Nine pinned chapters, five clips, one scroll
PremiumNEON — The Next Interface
Technology should feel alive.
PremiumNORTHRIDGE — Roofing Company Template
A local-service site that sells. Six roof layers separate as you scroll.
