Skip to content
Templates

Travel & mobilityAutomotive

Regen

Electric vehicle owner app

3D product viewMapChartsTimeline / GanttReal-time 3D (three.js)

Regen

Video preview

Recorded from the actual template. The 4 animated views are included in the source.

Category
Automotive
Dashboard
Views
4
animated
Interface
Light
theme
Stack
Next.js
16 · React 19
License
Unlimited
projects
Delivery
ZIP
by email

About

A light EV owner interface with a studio-lit three.js car, local vehicle controls, battery-pack inspection, charging charts and procedural trip maps.

  • Best forDevelopers building electric vehicle owner apps and mobility interfaces.

Included views

4 views

  • Vehicle

    Rotate the procedural EV, preview two paints and try local lock, climate, frunk, charge-port and lighting controls alongside tyre and service details.

  • Battery

    Inspect an isometric battery pack and module readings, switch health charts and adjust the charge limit.

  • Charging

    Follow a simulated DC session and taper curve, plan home charging and select nearby chargers on a procedural street map.

  • Trips

    Select fictional trips to inspect a consumption-coloured route, shared-distance elevation and consumption charts, and energy summaries.

Animations and interactions

  • Procedural vehicle studio

    A three.js fastback EV uses a lofted body, studio lighting and a contact shadow. Rotation, paint preview, the frunk and charge port respond to controls.

  • Battery and charging detail

    A selectable module diagram, battery-health history, charge limit and a locally advancing charging session connect the energy views.

  • Maps and trip profiles

    Generated charger and regional maps support selection. Route drawings and aligned elevation and consumption charts follow the chosen demo trip.

  • Responsive and reduced motion

    Four views include keyboard navigation and a layout for smaller screens. The hydration-safe reduced-motion hook shows composed still states; three.js scenes include lighter software-rendering tiers and a fallback when WebGL is unavailable.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

Demo data and what to connect

The vehicle, readings, chargers, tariffs and trips are invented. Commands update the browser demonstration only and do not control a car or charger. No vehicle API, telematics, map service, charging network, payments or backend is connected.

  • IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
  • Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

What’s in the ZIP

  • Complete Next.js project
  • 4 animated views
  • Source files and project assets
  • README with setup and customization
  • LICENSE.md

Stack and requirements

  • StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Three.js, Lucide icons
  • FontsManrope, Geist Mono
  • RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

Explore the source files
regen/
    • globals.css
    • layout.tsx
    • page.tsx
      • CarFallback.tsx
      • carGeometry.ts
      • CarHero.tsx
      • carProfile.ts
      • carScene.ts
    • App.tsx
    • motion.tsx
    • canvas.ts
    • citymap.ts
    • data.ts
    • reduced-motion.ts
    • rng.ts
    • trips.ts
    • useSize.ts
    • vehicle.ts
    • generate-avatars.mjs
  • .gitignore
  • LICENSE.md
  • next.config.ts
  • package-lock.json
  • package.json
  • postcss.config.mjs
  • README.md
  • tsconfig.json

Price, license and delivery

  • Price$9 USD, one-time payment. No subscription or renewal.
  • TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
  • LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
  • DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
  • RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
  • Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.

$9one-time

USD · Tax included

Buy · $9