I prezzi in vaso

Prezzi, Transizioni, Fisica, 3DGSAP, CanvasImpegnativaPeso compresso: Demo 15 KBGSAP 28 KBGratisScarica lo zip

I tre piani di un’app per curare le piante, ognuno una pianta grassa nel suo vaso: passando al pagamento annuale le piante crescono di un anno, con le foglie nuove che escono dal centro, le vecchie che si allargano e i figli che spuntano dalla terra, mentre ogni prezzo conta cifra per cifra fino al totale dell’anno; il piano scelto alza uno stelo che si piega e apre i fiori dal basso in alto, con un rimbalzo elastico.

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 potted 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 plant care app, each one a succulent in its pot, drawn by the script. Paying yearly the
         plants grow a year: new leaves come out of the middle, the old ones spread, little plants come up by the
         rim, while each price counts up to the year's total. The plan chosen sends up a stalk and flowers -->
    <section class="garden" aria-labelledby="garden-title" data-garden data-autoclic>
      <header class="garden__head">
        <h2 class="garden__title" id="garden-title">Plans that grow with you</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>3 months free</span></button>
        </div>
      </header>
      <div class="pots" data-pots></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.

71 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 in vaso» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco, Plans that grow with you e un interruttore Monthly / Yearly (con l’etichetta 3 months free); sotto, tre piani color carta, ognuno con un arco colorato e dentro un vaso disegnato: Sprout (€4 al mese) ha un vaso di terracotta con una rosetta di foglie tonde azzurrine dalla punta rosa, Grower (€8, Most loved) un vaso smaltato verde con una pianta dalle foglie lunghe e appuntite, Greenhouse (€16) un vaso di gres color crema con una rosetta fitta lilla. Entrando le piante crescono dal seme e i prezzi contano da zero. Il piano scelto ha il bordo verde, il bottone Your plan con la spunta e uno stelo che sale dal centro, si piega da un lato e apre quattro fiori a stella, dal basso in alto, ognuno con un piccolo rimbalzo. Passando a Yearly ogni pianta cresce di un anno: dal centro escono foglie nuove una dopo l’altra, le vecchie si allungano e si piegano verso il bordo, e accanto spuntano le piantine figlie; intanto ogni prezzo conta fino al totale dell’anno (€36, €72, €144), con ogni cifra che cambia che scende al suo posto, e la riga sotto diventa €3 a month · save €12. Tornando a Monthly l’anno scorre all’indietro. Scegliendo un altro piano, il vecchio chiude i fiori e ritira lo stelo, il nuovo fiorisce. Il puntatore che passa sulla pianta ne scuote le foglie e fa oscillare lo stelo.

Come funziona

Una pianta da un numero solo

Ogni pianta è un numero, G: quante foglie ha messo fuori finora. La foglia k esce all’angolo aureo dalla precedente (137,5 gradi, come in una rosetta vera) e ha età G − k; dall’età vengono la lunghezza (1 − e^(−età/2,1)), quanto è aperta, quanto si è piegata dal centro verso il bordo (da 12 a 82 gradi dalla verticale) e quanto è ancora chiara. Crescere di un anno vuol dire solo portare G da 8 a 15 con un tween: le foglie nuove spuntano al centro e le vecchie si allargano da sole.

La foglia in 3D

Ogni foglia è una curva di Bézier quadratica nello spazio, con la punta che si alza (curl), e una sagoma che dice quanto è larga lungo la strada: a cucchiaio, a lancia o a stella secondo la pianta. Per undici punti si calcolano i due bordi e una costola rialzata lungo la normale: le due metà della foglia si riempiono da sole, ognuna illuminata dalla sua normale, con un gradiente dalla base alla punta che finisce nel rosa. Si guarda dall’alto (TILT) e tutte le foglie del vaso, figlie comprese, si disegnano dalla più lontana alla più vicina.

I prezzi che contano

Il prezzo è una fila di cifre, ognuna in uno span suo dentro una fessura con overflow hidden. Un tween porta il valore al prezzo nuovo con power3.out e a ogni passo si riscrivono solo le cifre cambiate, che scendono (o salgono) al loro posto: le unità corrono, le decine scattano di rado, come un contatore. La riga sotto e / month rotolano nello stesso verso.

Lo stelo e i fiori

Il piano scelto porta bl da 0 a 1 in BLOOM secondi: la prima metà alza lo stelo, una curva che sale oltre la punta e ricade da un lato; poi lungo la fine spuntano i boccioli e i fiori si aprono uno dopo l’altro dal basso, ognuno con elastic.out. Il piano lasciato riporta bl a 0 con power2.in, e i fiori si richiudono prima che lo stelo rientri.

Le molle e il puntatore

Ogni vaso ha tre molle smorzate, integrate a passi di 1/120 di secondo: la spinta sulle foglie (che piega di più quelle dritte del centro), la punta dello stelo e lo schiacciamento di tutta la pianta. Il puntatore che passa sopra il vaso spinge con la sua velocità, la fine di una crescita schiaccia la pianta e la fa rimbalzare. Quando le molle sono ferme e nessun tween è in corso, il canvas non si ridisegna.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PLANS`	script.js	`[['Sprout', 'Up to 10 plants', 4, […]], …]`	I piani: nome, cosa copre, prezzo al mese in euro, cosa comprende.
`FREE_MONTHS`	script.js	`3`	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).
`LEAVES`	script.js	`[[8, 15], [7, 12], [13, 26]]`	Le foglie di ogni pianta, pagando al mese e pagando all’anno.
`PUPS`	script.js	`[1, 2, 2]`	Le piantine figlie che ogni vaso fa crescere in un anno.
`GROW`	script.js	`1.8`	I secondi che le piante impiegano a crescere di un anno.
`COUNT`	script.js	`1.5`	I secondi che un prezzo impiega a contare fino al nuovo.
`BLOOM`	script.js	`1.7`	I secondi che i fiori del piano scelto impiegano ad aprirsi.
`FLOWERS`	script.js	`4`	I fiori su ogni stelo.
`SWAY`	script.js	`1`	Quanto si muovono le foglie sotto il puntatore: 0 ferme, 2 molto.
`TILT`	script.js	`30`	Quanto si guarda dall’alto dentro i vasi, in gradi.

Provali nel Playground

Quando usarla

Per la pagina dei prezzi di un’app o di un servizio legato alla natura, a un orto, a un vivaio, alla cura di qualcosa che cresce; e in generale ovunque il pagamento annuale vada raccontato come qualcosa che cresce col tempo.

Sul telefono

I piani stanno uno accanto all’altro e scorrono sotto il dito uno alla volta (scroll-snap), col piano scelto già al centro; il dito che passa sulla pianta ne scuote le foglie come il puntatore, e toccarla sceglie il piano.

Con il movimento ridotto

Le piante passano subito alla loro forma nuova con una dissolvenza, i prezzi e le righe cambiano subito, il piano scelto ha già i fiori aperti e niente oscilla.

Trappole

Le foglie di una rosetta si coprono a vicenda in modo diverso a ogni angolo: disegnarle nell’ordine in cui nascono fa passare le foglie di dietro sopra quelle davanti. Si ordinano ogni fotogramma per la profondità del loro punto di mezzo.
Una foglia piena illuminata con una normale sola sembra di carta: le due metà, ognuna con la normale inclinata verso il suo bordo, danno la costola e lo spessore della pianta grassa.
Ricostruire tutte le cifre del prezzo a ogni passo del contatore fa ripartire l’animazione anche di quelle ferme: si riscrivono solo le cifre cambiate, e la fila si rifà solo quando cambia il numero di cifre.
Le molle integrate col passo del fotogramma esplodono quando il browser salta qualche fotogramma: il passo è limitato a 1/30 di secondo e diviso in passi da 1/120.
Con le schede che scorrono di lato sul telefono, scorrere col codice mentre è acceso lo scroll-snap fa saltare la schiera a metà strada: lo snap si spegne durante il tween e si riaccende alla fine.

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 15 KB; le librerie: GSAP 28 KB.

Collaudo

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