BrandMotion
0
Scroll to explore the build
← Back to store
bicycle3d / webglnext.js + r3f + gsap

BR — ANTIGRAVITY · Engineered Beyond Gravity

615 parts, none of them a downloaded model

An engineering keynote for a futuristic e-enduro bicycle, told as nine scroll-driven chapters over one fixed WebGL canvas. The machine is not a model file: all 615 meshes and roughly 91,000 triangles are generated procedurally in the browser from a single geometry file, and the rear suspension is posed every frame by an analytic four-bar solver rather than by keyframes — so when the linkage cycles its full 160mm of travel, it is actually solving, not replaying. Parts separate along their own assembly vectors and retrace them exactly on the way back, the drivetrain turns in true ratio, and the whole thing is paced from one table that owns the section heights, the camera shots and the animation channels together. It closes by handing off from the dark studio into a light editorial zone built straight from the Figma design system.

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. 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 — ANTIGRAVITY · Engineered Beyond Gravity 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.