TORQUE — Electric Motorcycle Launch
Silence, violently fast.
A dark, cinematic launch site for an electric performance motorcycle. A live React Three Fiber bike — built entirely from procedural geometry, no models or textures — is pinned mid-screen while one scrubbed GSAP timeline sweeps the camera around it and, at the key moment, explodes its structural battery pack into a floating diagram before reassembling it. A live SVG configurator, spec sheets and an exploded battery animation complete a full product site that static-exports.
Role · Design + front-end build (R3F procedural bike, GSAP scroll choreography) · Updated Jul 2026
- 6 page types: scroll-cinema home, specs, design, technology, configure, company
- The procedural R3F bike scene (exploded battery, camera choreography) as reusable components
- A live SVG configurator with colorway/seat/wheel variants and price updates
- GSAP ScrollTrigger + Lenis motion foundation with a reduced-motion matchMedia gate
- Delivery
- 3–4 days
- Licence
- One-time licence · full source
- Support
- 14 days setup support
- Updates
- Free updates included
Backend · CMS / reservations
Specs, copy and configurator options are typed data; wire the reservation flow to any provider (Stripe, your CRM) and the content to a CMS.
Delivered as full Next.js source. Retheme the ember accent, re-spec the bike and configurator options, and wire reservations to your provider — the 3D is typed data.
What makes it special
A bike that assembles itself
The motorcycle is pure procedural three.js — beveled body, torus wheels, a glowing structural battery spine. One scrubbed timeline orbits the camera and explodes the six battery cells into a labelled diagram, then reassembles them, all driven by scroll.
Rendered by light, not photos
No 3D models, no textures, no photography — the machine reads through proportion, rim lighting and ember emissive alone. Zero image weight, crisp at any resolution, recolorable in code.
A live configurator
Pick colorway, seat and wheels and a procedural SVG bike silhouette recolors in real time as the price updates — a front-end demo with clean seams to real reservations.
Complete product IA
Home cinema, grouped spec sheets, a design story, a technology deep-dive with a scroll-scrubbed exploded-battery SVG, the configurator, and a company page — everything a launch needs.
Cinematic and accessible
Dark, ember-accented and dramatic — yet every scroll scene sits behind prefers-reduced-motion with a fully-visible static fallback (a large, well-lit hero pose that doubles as the card), self-hosted fonts and no runtime external requests.
What’s included
- 6 page types: scroll-cinema home, specs, design, technology, configure, company
- The procedural R3F bike scene (exploded battery, camera choreography) as reusable components
- A live SVG configurator with colorway/seat/wheel variants and price updates
- GSAP ScrollTrigger + Lenis motion foundation with a reduced-motion matchMedia gate
- Full Next.js 15 / TypeScript source, static export, WCAG 2.2 AA intent
More Automotive templates
Explore more collections
Frequently asked
- What do I get when I buy TORQUE?
- A one-time licence with the full, editable source code, including 6 page types: scroll-cinema home, specs, design, technology, configure, company, the procedural r3f bike scene (exploded battery, camera choreography) as reusable components, a live svg configurator with colorway/seat/wheel variants and price updates. 14 days setup support and free updates included.
- What is TORQUE built with?
- It's a Next.js marketing site, built with Next.js 15, TypeScript, Tailwind v4, GSAP ScrollTrigger, React Three Fiber. You receive the complete source to host and extend anywhere.
- Can YantraCore customise TORQUE for my brand?
- Yes — buy it as-is for $5,200, or have YantraCore tailor it to your brand, content and requirements. Start from this page or commission a custom build.
- How fast is delivery?
- Delivery is 3–4 days after purchase.
Make TORQUE yours.
Buy it as-is, or have YantraCore tailor it to your brand and content.