The car configurator

Hover, SVGGSAPAdvancedCompressed weight: Demo 13 KBGSAP 28 KBFreeDownload the zip

A car configurator for a made-up dealership, in the rich style: the Arc GT coupé stands on a turntable in the showroom under three ceiling lights. Pick a paint and the new colour sprays over the bodywork from the tail to the nose, with a fine mist of overspray and a gleam that follows it; pick a set of wheels and the old rims spin off while the new ones spin on, the car dips on its springs and the price counts to the new total. Move the pointer and the ceiling lights slide across the paint and the glass.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The car configurator</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- a made-up dealership, Vante: the Arc GT coupé stands on a turntable in the showroom under the ceiling lights.
       Picking a paint sprays the new colour over the bodywork from the tail to the nose, picking a wheel spins the old
       rims off and the new ones on, and the price counts up or down. Car, showroom and rims are SVG drawn by the script -->
  <main class="palco" data-palco>
    <svg class="scena" data-scena role="img" aria-label="The Arc GT coupé on a turntable in the showroom"></svg>
    <header class="testata">
      <p class="marchio">
        <svg viewBox="0 0 32 32" aria-hidden="true"><path d="M4 8h6l6 13 6-13h6L19 27h-6Z"/></svg>
        Vante
      </p>
      <p class="sotto">Showroom</p>
    </header>

    <div class="scena-box" aria-hidden="true"></div>

    <section class="pannello" aria-label="Configure the Arc GT">
      <div class="riga riga--dati">
        <h1 class="titolo">Arc GT <span class="titolo__frase">Make it yours.</span></h1>
        <p class="prezzo"><span class="prezzo__da">From</span> <span class="prezzo__cifra" data-prezzo>$42,900</span></p>
      </div>

      <div class="riga riga--scelte">
        <p class="scelta" aria-live="polite"><span class="scelta__cosa">Paint</span> <span class="scelta__nome" data-nome-vernice>Racing Red</span></p>
        <div class="vernici" role="radiogroup" aria-label="Paint" data-vernici>
          <button class="vernice" role="radio" aria-checked="true" aria-label="Racing Red" data-vernice="racing" data-nome="Racing Red" data-costo="0" style="--chip: var(--racing)"></button>
          <button class="vernice" role="radio" aria-checked="false" aria-label="Glacier" data-vernice="glacier" data-nome="Glacier" data-costo="600" style="--chip: var(--glacier)" tabindex="-1"></button>
          <button class="vernice" role="radio" aria-checked="false" aria-label="Midnight" data-vernice="midnight" data-nome="Midnight" data-costo="900" style="--chip: var(--midnight)" tabindex="-1"></button>
          <button class="vernice" role="radio" aria-checked="false" aria-label="Sage" data-vernice="sage" data-nome="Sage" data-costo="1200" style="--chip: var(--sage)" tabindex="-1"></button>
          <button class="vernice" role="radio" aria-checked="false" aria-label="Saffron" data-vernice="saffron" data-nome="Saffron" data-costo="1500" style="--chip: var(--saffron)" tabindex="-1"></button>
        </div>

        <span class="divisore" aria-hidden="true"></span>

        <div class="cerchi" role="radiogroup" aria-label="Wheels" data-cerchi>
          <button class="cerchio" role="radio" aria-checked="true" aria-label="Aero wheels" data-cerchio="aero" data-nome="Aero" data-costo="0"><svg viewBox="-34 -34 68 68" aria-hidden="true" data-icona="aero"></svg></button>
          <button class="cerchio" role="radio" aria-checked="false" aria-label="Mesh wheels" data-cerchio="mesh" data-nome="Mesh" data-costo="1400" tabindex="-1"><svg viewBox="-34 -34 68 68" aria-hidden="true" data-icona="mesh"></svg></button>
          <button class="cerchio" role="radio" aria-checked="false" aria-label="Turbine wheels" data-cerchio="turbine" data-nome="Turbine" data-costo="2200" tabindex="-1"><svg viewBox="-34 -34 68 68" aria-hidden="true" data-icona="turbine"></svg></button>
        </div>
      </div>

      <div class="riga riga--azione">
        <p class="nota" data-nota>Aero wheels, 19 inch</p>
        <a class="tasto" href="#" data-tasto>
          <span class="tasto__testo">Book a test drive</span>
          <svg class="tasto__freccia" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg>
        </a>
      </div>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

32 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “The car configurator” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

In a midnight blue showroom, under three ceiling lights that come on one after the other with a flicker, Vante’s Arc GT coupé stands on a turntable with a metal rim: grooves on top, a thin saffron light running round its edge and a glossy surface the car is mirrored in. Below are the paint name, the price, five lacquered paint chips (Racing Red, Glacier, Midnight, Sage, Saffron), three wheel designs (Aero, Mesh, Turbine) and the Book a test drive button. Pick a paint and the new colour passes over the body and the mirror from the tail to the nose with a soft edge, like a coat of spray, while a cloud of overspray in the new colour rises from the edge and a white gleam follows it; when the coat is done the headlights and taillights blink twice. The light stays the same on every colour: the showroom ceiling above, the dark floor below, the glossy shoulder, the character line, the three ceiling lights reflected. Pick a set of wheels and the old rims spin away shrinking while the new ones spin in the other way and stop with a small bounce, the car dips on its springs and the brake discs and calipers show behind the spokes. The paint name changes with a jump and the price counts to the total. Move the pointer and the ceiling lights slide across the bodywork and the glass. Left alone, the showroom tries paints and wheels by itself and comes back to the start.

How it works

The car in stacked layers

The bodywork is a single path drawn twice: below, the paint it has; above, the new paint under a mask. Over both sits the light, the same for every colour: white gradients at the top and black at the bottom, the glossy shoulder, the character line and the ceiling lights’ reflections, all clipped to the bodywork. So changing a colour is one fill.

The spray is the edge of a mask

The new paint’s mask is a white rectangle whose right edge fades over 46 units: GSAP moves it from the tail to the nose, and the new paint appears behind it with a soft edge. At the edge sit a blurred cloud in the new colour, as tall as the bodywork there, and a white gleam that follows it; specks of colour leave the edge, rise and fade. When the spray is done the new paint becomes the old one and the mask goes back.

The rims turn round the hub

Each rim is a group drawn round its own centre (five spokes, the diamond mesh, the turbine blades). To change them, rotate and scale are written by hand at every step of the tween: the old set spins and shrinks, the new one comes in spinning the other way with back.out and settles. The brake disc and caliper stay behind the spokes.

Springs, price, pointer

The body sits on a damped spring: when the wheels change it gets a push and dips a little. The price is a number GSAP moves to the total, written with separators. The pointer gently slides the ceiling lights’ reflections across the bodywork and the glass, the glass more, as if it were closer.

The showroom fits the window

The drawing covers the whole page: on every resize the viewBox is worked out so the car and the turntable fill the space between the header and the panel, the ceiling lights drop below the header and the wall and the floor stretch to the edges.

Values to change

Name	File	Default	What it changes
`SPRAY`	script.js	`1.1`	The seconds the spray takes, from the tail to the nose.
`MIST`	script.js	`1`	How much overspray leaves the edge of the new paint (0 none).
`SPIN`	script.js	`1`	How many turns the rims make when they change.
`TURN`	script.js	`1`	How fast the light runs round the turntable (0 still).
`GLEAM`	script.js	`1`	How far the ceiling lights slide on the car with the pointer.
`BOUNCE`	script.js	`1`	How much the car dips on its springs when the wheels change.
`PILOT`	script.js	`2`	The seconds between choices when the showroom runs by itself.

Try them in the Playground

When to use it

For a model page on the site of a car maker, a dealership or a rental company, for a motorbike, bicycle or scooter configurator, and for any product you choose by colour and finish: a chair, a kitchen, a guitar.

On phones

The same animations with the sizes adapted: the car and the turntable fill the space between the header and the panel, the chips and the wheels get smaller, the paint name gets its own line, the line next to the model name and the wheel note go, and the button takes the full width.

With reduced motion

No spray, no spinning rims, no springs and no running light: the new paint and the new wheels fade in, the lights are already on and the price changes at once.

Pitfalls

To spin the rims round the hub don’t use GSAP’s svgOrigin: it is in the coordinates of the whole SVG, not of the wheel’s group, and the rims would spin round a faraway point. Here rotate and scale are written by hand into the transform attribute.
Draw the light over the paint and clip it to the bodywork, not into the colours: that way every paint, even one changed by the Playground’s Palette, gets the same light.
A new spray while the other is halfway: first take the old one to the end (progress(1)), then start, or the two masks fight.

Libraries

GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 13 KB; the libraries: GSAP 28 KB.

Testing

Tested on 22 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: To do

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.