I prezzi del laboratorio di pellicola

Prezzi, SVG, Hover, FisicaGSAPImpegnativaPeso compresso: Demo 13 KBGSAP 28 KBGratisScarica lo zip

La tabella dei prezzi di un laboratorio che sviluppa pellicola, con tre piani: ognuno è una macchina fotografica su una mensola di legno davanti a un fondale colorato, coi suoi rullini accanto. Scegliendo un piano la macchina scatta, col flash e il pulsante che va giù, e una stampa cade sul filo e dondola sulla molletta; passando al pagamento annuale arriva una scatola di cartone e i rullini ci saltano dentro uno alla volta, mentre ogni prezzo conta cifra per cifra fino al totale dell’anno.

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 film lab pricing</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the plans of a film developing lab, each one a camera on a wooden shelf with its rolls of film beside it,
         drawn by the script. Picking a plan fires the camera's flash and a print slides up; paying yearly a
         cardboard year pack slides in and the rolls hop into it while each price counts to the year's total -->
    <section class="lab" aria-labelledby="lab-title" data-lab data-autoclic>
      <header class="lab__head">
        <p class="lab__brand">Silverbath Lab</p>
        <h2 class="lab__title" id="lab-title">Every roll, <em>developed.</em></h2>
        <div class="bill" role="radiogroup" aria-label="Billing" data-bill>
          <span class="bill__thumb" aria-hidden="true" data-thumb></span>
          <button class="bill__opt" type="button" role="radio" aria-checked="true" data-period="month">Monthly</button>
          <button class="bill__opt" type="button" role="radio" aria-checked="false" tabindex="-1" data-period="year">Yearly <span class="bill__free" data-free>2 months free</span></button>
        </div>
      </header>
      <div class="tabs" role="tablist" aria-label="Plans" data-tabs></div>
      <div class="plans" data-plans></div>
      <p class="sr" aria-live="polite" data-live></p>
    </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.

56 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 «I prezzi del laboratorio di pellicola» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una carta color sabbia, Silverbath Lab, il titolo Every roll, developed. e un interruttore Monthly / Yearly (con l’etichetta 2 months free); sotto, tre piani. Ognuno ha una finestrella con un fondale colorato, una mensola di legno con le venature, la sua macchina e i suoi rullini: Roll (€6 al mese) una macchina usa e getta di cartone giallo e verde col flash a righe e un rullino, Darkroom (€14, Most loved) una macchina a telemetro di pelle e cromo, col flash sulla slitta e tre rullini, Studio (€29) una biottica di pelle color cuoio con la parabola del flash a lampadina e sei rullini 120 impilati a piramide. Entrando le macchine scendono con un rimbalzo, i rullini cadono al loro posto e i prezzi contano da zero. Il piano scelto ha il bordo rosso e il bottone Your plan con la spunta; sceglierlo fa scattare la macchina: il pulsante va giù, il flash esplode in raggi, la lente si spegne un attimo, la macchina si schiaccia sui piedi e torna su elastica, la rotella dell’usa e getta gira, e una stampa cade dall’alto sul filo e dondola sulla molletta di legno. Passando a Yearly in ogni piano arriva da destra una scatola di cartone, Year pack, e i rullini ci saltano dentro uno alla volta facendo una capriola, mentre l’etichetta conta i rullini dell’anno (12, 36, 72) e ogni prezzo conta fino al totale dell’anno (€60, €140, €290), con la riga sotto che diventa €5 a month · save €12. Tornando a Monthly i rullini saltano fuori e rimbalzano al loro posto, la scatola se ne va. Il puntatore inclina la macchina verso di sé e sposta il riflesso sulla lente.

Come funziona

Una scena per piano, in SVG

Ogni piano è un SVG di 260 per 160 unità con preserveAspectRatio meet: il fondale, la mensola e il pavimento sono rettangoli molto più larghi del riquadro, così su qualsiasi finestra non resta mai un bordo vuoto. Sopra, a strati: la stampa sul filo, l’ombra, la mensola, la macchina, la scatola e i rullini, il lampo e il velo bianco. Le macchine sono disegnate a mano con sfumature di cromo, una trama a puntini per la pelle e le cuciture, e ogni parte che si muove ha il suo attributo (data-shutter, data-glass, data-flashwin, data-wheel).

I rullini che saltano nella scatola

La scatola ha tre strati: il fondo dell’apertura, un gruppo vuoto per quello che ci sta dentro e il davanti con l’etichetta. I rullini fuori stanno in un gruppo sopra al davanti; ognuno sale con power2.out fino a sopra il bordo, e a metà salto un call() lo sposta nel gruppo di dentro con appendChild, così la discesa con power2.in passa dietro al cartone. Al ritorno lo stesso al contrario, e l’atterraggio è bounce.out.

Il flash

Una timeline breve: il pulsante scende di 1,6 unità e torna con back.out(3), la macchina si schiaccia a 0,955 e torna con elastic.out(1, 0.35) attorno al punto in cui poggia (svgOrigin), la lente va a opacità 0,25 per un attimo, il lampo (un cerchio con un gradiente radiale e dodici raggi) cresce da 0,3 e si spegne, e un velo color carta copre la finestra e sparisce in 0,45 secondi. FLASH regola quanto sono forti il lampo e il velo.

I prezzi che contano

Ogni prezzo è una fila di caselle, una per cifra, con overflow hidden. Un tween porta il valore al prezzo nuovo con power3.out e a ogni passo si riscrive solo la cifra che cambia, che entra dall’alto quando il numero sale e dal basso quando scende. I tre piani partono a otto centesimi l’uno dall’altro.

Il telefono

Sotto i 640 pixel i tre piani stanno nella stessa cella della griglia e se ne vede uno solo, scelto dalle schede in cima: quello nuovo entra di lato con back.out e quello vecchio esce dall’altra parte. Le righe di cosa comprende si nascondono per stare nella casella.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PLANS`	script.js	`[['Roll', '1 roll a month, developed', 6, […]], …]`	I piani: nome, cosa copre, prezzo al mese in euro, cosa comprende.
`FREE_MONTHS`	script.js	`2`	I mesi all’anno regalati a chi paga all’anno.
`PICK`	script.js	`1`	Il piano scelto quando si apre la pagina (0 è il primo).
`LOVED`	script.js	`1`	Il piano con l’etichetta Most loved (-1 per nessuno).
`COUNT`	script.js	`1.3`	I secondi che un prezzo impiega a contare fino al nuovo.
`HOP`	script.js	`0.42`	I secondi di ogni salto di un rullino dentro la scatola o fuori.
`FLASH`	script.js	`1`	Quanto è forte il flash: 0 niente, 1,5 accecante.
`TILT`	script.js	`6`	Quanti gradi la macchina si inclina verso il puntatore.

Provali nel Playground

Quando usarla

Per la pagina dei prezzi di un laboratorio fotografico, di un servizio di stampa, di uno studio o di un’app di fotografia; e in generale ovunque i piani si possano raccontare con un oggetto che cresce da un piano all’altro e il pagamento annuale con una scatola che si riempie.

Sul telefono

Si vede un piano alla volta, scelto dalle schede Roll, Darkroom, Studio in cima: il piano nuovo entra di lato con un rimbalzo. Le stesse macchine, gli stessi salti dei rullini e lo stesso flash; le righe di cosa comprende si nascondono.

Con il movimento ridotto

Niente salti né rimbalzi: i rullini passano subito nella scatola e fuori, i prezzi cambiano subito, la stampa compare in dissolvenza e il flash è solo un lampo chiaro che si spegne.

Trappole

Un rullino che salta dentro la scatola deve passare davanti al bordo salendo e dietro scendendo: con un solo strato o resta sempre sopra il cartone o non si vede mai. Si sposta di gruppo a metà salto con appendChild, nel punto più alto, dove non si nota.
GSAP legge l’attributo transform dei gruppi SVG e lo trasforma in x e y: i rullini nascono con translate(x y) e poi si animano con x e y senza perdere il posto.
Le cifre del prezzo ricostruite tutte a ogni passo del tween fanno sfarfallare il numero: si riscrive solo quella che cambia.
Il fondale disegnato grande quanto il viewBox lascia bande vuote ai lati quando la finestra è più larga o più alta: si disegna molto più grande e si lascia ritagliare dal riquadro.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.

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

Collaudo

Provata il 23 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.