Il configuratore dell’auto

Hover, SVGGSAPImpegnativaPeso compresso: Demo 13 KBGSAP 28 KBGratisScarica lo zip

Il configuratore di una concessionaria inventata, nello stile ricco: la coupé Arc GT sta su una pedana nello showroom, sotto tre plafoniere. Scegliendo una vernice il colore nuovo passa sulla carrozzeria dalla coda al muso come una spruzzata, con la nebbiolina e un riflesso che la segue; scegliendo i cerchi quelli vecchi girano via e i nuovi si avvitano al loro posto, la macchina affonda sulle molle e il prezzo conta fino al totale. Muovendo il puntatore le luci del soffitto scorrono sulla carrozzeria.

Il codice

Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.

Scarica lo 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

Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.

32 valori da cambiare

Apri il Playground

Oppure chiedila a Claude Code

Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:

Prendi «Il configuratore dell’auto» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

In uno showroom blu notte, sotto tre plafoniere che si accendono una dopo l’altra con un tremolio, la coupé Arc GT di Vante sta su una pedana col bordo di metallo: la pedana ha i solchi, un filo di luce zafferano che le corre attorno e il piano lucido in cui la macchina si specchia. Sotto ci sono il nome della vernice, il prezzo, cinque campioni di vernice laccati (Racing Red, Glacier, Midnight, Sage, Saffron), tre modelli di cerchi (Aero, Mesh, Turbine) e il pulsante Book a test drive. Scegliendo una vernice il colore nuovo passa sulla carrozzeria e sullo specchietto dalla coda al muso, col bordo morbido come una mano di spray, mentre dal bordo si alza una nuvola di nebbiolina del colore nuovo e un riflesso bianco lo segue; a vernice finita i fari e i fanali lampeggiano due volte. La luce resta la stessa su ogni colore: il cielo dello showroom in alto, il pavimento scuro in basso, la spalla lucida, la linea di carattere, le tre plafoniere riflesse. Scegliendo i cerchi, quelli vecchi girano via rimpicciolendo e i nuovi arrivano girando al contrario e si fermano con un piccolo rimbalzo, la macchina affonda sulle molle e dietro le razze si vedono i dischi e le pinze dei freni. Il nome della vernice cambia con un salto e il prezzo conta fino al totale. Muovendo il puntatore le plafoniere scorrono sulla carrozzeria e sui vetri. Lasciato solo, lo showroom prova colori e cerchi da sé e torna all’inizio.

Come funziona

La macchina in pezzi sovrapposti

La carrozzeria è un tracciato solo, disegnato due volte: sotto la vernice che ha, sopra la vernice nuova sotto una maschera. Sopra tutte e due c’è la luce, uguale per ogni colore: sfumature bianche in alto e nere in basso, la spalla lucida, la linea di carattere e i riflessi delle plafoniere, tutti ritagliati sulla carrozzeria. Così basta cambiare un colore di riempimento.

La spruzzata è il bordo di una maschera

La maschera della vernice nuova è un rettangolo bianco con il bordo destro sfumato in 46 unità: GSAP lo porta dalla coda al muso, e la vernice nuova compare dietro di lui con l’orlo morbido. Al bordo una nuvola sfocata del colore nuovo, alta quanto la carrozzeria in quel punto, e una scia bianca che la segue; dal bordo partono puntini di colore che salgono e svaniscono. Finita la spruzzata, la vernice nuova diventa quella vecchia e la maschera torna indietro.

I cerchi girano attorno al mozzo

Ogni cerchio è un gruppo disegnato attorno al suo centro (cinque razze, la rete a rombi, le pale della turbina). Per cambiarli si scrive a mano rotate e scale a ogni passo del tween: quello vecchio gira e rimpicciolisce, il nuovo arriva girando al contrario con back.out e si posa. Dietro le razze restano il disco e la pinza dei freni.

Molle, prezzo, puntatore

La carrozzeria sta su una molla smorzata: al cambio dei cerchi riceve una spinta e affonda un poco. Il prezzo è un numero che GSAP porta al totale, scritto coi separatori. Il puntatore sposta piano i riflessi delle plafoniere sulla carrozzeria e sui vetri, i vetri di più, come se fossero più vicini.

Lo showroom si adatta alla finestra

Il disegno copre tutta la pagina: a ogni ridimensionamento si calcola il viewBox perché macchina e pedana riempiano lo spazio fra la testata e il pannello, le plafoniere scendono sotto la testata e il muro e il pavimento si allungano fino ai bordi.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SPRAY`	script.js	`1.1`	I secondi della spruzzata, dalla coda al muso.
`MIST`	script.js	`1`	Quanta nebbiolina esce dal bordo della vernice nuova (0 niente).
`SPIN`	script.js	`1`	Quanti giri fanno i cerchi quando si cambiano.
`TURN`	script.js	`1`	Quanto corre la luce attorno alla pedana (0 ferma).
`GLEAM`	script.js	`1`	Quanto scorrono le plafoniere sulla carrozzeria col puntatore.
`BOUNCE`	script.js	`1`	Quanto affonda la macchina sulle molle al cambio dei cerchi.
`PILOT`	script.js	`2`	I secondi fra una scelta e l’altra quando lo showroom fa da sé.

Provali nel Playground

Quando usarla

Per la pagina di un modello sul sito di una casa automobilistica, di una concessionaria o di un noleggio, per un configuratore di moto, biciclette o scooter, e per ogni prodotto che si sceglie per colore e finitura: una sedia, una cucina, una chitarra.

Sul telefono

Le stesse animazioni con le misure adattate: la macchina e la pedana riempiono lo spazio fra la testata e il pannello, i campioni e i cerchi diventano più piccoli, il nome della vernice va su una riga sua, la frase accanto al modello e la nota sui cerchi spariscono e il pulsante prende tutta la larghezza.

Con il movimento ridotto

Niente spruzzata, niente cerchi che girano, niente molle né luce che corre: la vernice nuova e i cerchi nuovi compaiono in dissolvenza, le luci sono già accese e il prezzo cambia subito.

Trappole

Per far girare i cerchi attorno al mozzo non usare svgOrigin di GSAP: è nelle coordinate dell’SVG intero, non del gruppo della ruota, e i cerchi girerebbero attorno a un punto lontano. Qui rotate e scale si scrivono a mano nell’attributo transform.
La luce va disegnata sopra la vernice e ritagliata sulla carrozzeria, non dentro i colori: così ogni vernice, anche quella cambiata dalla Palette del Playground, prende la stessa luce.
Una spruzzata nuova mentre l’altra è a metà: prima si porta la vecchia alla fine (progress(1)), poi si parte, se no le due maschere litigano.

Librerie

GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 22 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Da fare

Licenza d’uso

Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.