GOAT SaleLifetime $349 $174.50 · Yearly 25% offleft

India price: 40% off any design withapplied for you at checkout

← Back to store
cinematic scrollvideo scrubbingagency sitenext.js + gsap

BR–BrandMotion Hyderabad — One Continuous Flight

Six clips, one 48-second film, and the scroll bar is the playhead.

A scroll-driven cinematic site where six generated clips are treated as a single unbroken flight — out of the cloud deck, into the headquarters, through the studio floor and back out over the lake. Nothing autoplays: scrolling down advances the film, scrolling up rewinds it, frame by frame. The clips are re-encoded all-intra so an arbitrary seek costs one frame of decode instead of decoding forward from the nearest keyframe, which is what makes frame-accurate scrubbing possible at all. Each clip is fetched as a blob and scrubbed from memory rather than the network, seeks are coalesced so the loop can never fall behind the playhead, and the joins — which are not frame-matched in the source footage — are cross-dissolved across ~2% of scroll so they read as film dissolves rather than jumps. Two encode ladders ship, 1600x900 and 1024x576, with the lighter one chosen on low-core, low-memory or save-data devices.

Paste the prompt intoClaude CodeCursorAntigravityWindsurfLovableBoltv0

What's in the source

60 files — the finished project, ready to run with npm install and npm run dev.

br-hyd-cinematic/
├─ components/  19 files
├─ public/  19 files
├─ hooks/  4 files
├─ app/  3 files
├─ lib/  3 files
├─ scripts/  1 file
├─ README.md
├─ package.json
└─ … 9 more

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 15
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. 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. 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. 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. 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. 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–BrandMotion Hyderabad — One Continuous Flight 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.

Questions about BR–BrandMotion Hyderabad

Who is BR–BrandMotion Hyderabad for?

BR–BrandMotion Hyderabad is for agencies and studios, 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–BrandMotion Hyderabad built with?

BR–BrandMotion Hyderabad is built with Next.js + GSAP and video scrubbing. The source is a Next.js project: run npm install, then npm run dev, and it opens locally exactly as the preview shows. The prompt is written for coding agents such as Claude Code, Cursor and Antigravity.

Can I use BR–BrandMotion Hyderabad 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.