La parola sulle camme

Hover, Testo, SVGGSAPImpegnativaPeso compresso: Demo 9,8 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal: una parola sola, e sotto ogni lettera una punteria sottile, un'asta con la testa, appoggiata alla sua camma a uovo disegnata a filo. Le camme stanno su una cinghia, ognuna girata un passo più avanti: passando col puntatore lungo la parola le camme girano e le lettere salgono una dopo l'altra come una scala, prendono peso in cima e ricadono sulla camma con un piccolo colpo. Tenendo il puntatore fermo la lettera resta su e si accende di rosso.

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>Tappet</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- one word on a row of tappets, each pushed up by its own cam: the pointer turns the cams -->
  <main class="stage" data-stage>
    <h1 class="sr" data-name>Tappet</h1>
    <svg class="machine" data-machine aria-hidden="true">
      <g data-belt-group>
        <path class="belt" data-belt d="" pathLength="1" />
        <path class="teeth" data-teeth d="" />
      </g>
      <path class="rail" data-rail d="" />
      <g data-bushes></g>
      <g data-cams></g>
      <g data-tappets></g>
    </svg>
    <p class="hint" data-hint>Run the pointer along the word.</p>
    <p class="read" data-readout><span class="read__label">Shaft</span> <b class="read__value" data-read>0°</b></p>
  </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.

18 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 «La parola sulle camme» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco caldo c'è la parola Tappet, in un carattere sottile, con le lettere ben distanziate. Sotto ogni lettera c'è una punteria disegnata a filo: una testa orizzontale, un'asta che scende e passa in una piccola boccola su una guida, e in fondo la camma, una sagoma a uovo fatta di un cerchio, di un naso tondo e di due tratti dritti. Le camme stanno su una cinghia sottile con i dentini, e ognuna è girata un passo più avanti della vicina. All'apertura la cinghia e la guida si disegnano, le camme si aprono sui mozzi una dopo l'altra con un mezzo giro in più, le lettere cadono sulle loro camme e rimbalzano un poco; poi le camme fanno un giro lento e la parola sale e scende come una scala. Da lì la guida chi guarda: la posizione del puntatore lungo la parola è l'angolo delle camme (da un margine all'altro fanno un giro esatto), quindi passando da sinistra a destra il naso di ogni camma arriva sotto la sua lettera e la spinge su. Le camme seguono il puntatore con una molla, e i dentini della cinghia scorrono. Una lettera in alto diventa grassa e un po' stretta, sul carattere variabile; ricadendo batte sulla camma, si schiaccia un attimo e rimbalza. Un passaggio veloce le lancia più in alto della camma: volano, si fermano contro la guida se esagerano e ricadono. Tenendo fermo il puntatore su una lettera, dopo mezzo secondo la lettera dà un piccolo scatto in su e si accende di vermiglio, con la sua asta; la lettura in basso a destra, l'angolo della cinghia in gradi, si accende anche lei. Se nessuno tocca la parola, una mano invisibile la percorre: sale fino alla lettera di mezzo, aspetta che si accenda e prosegue fino in fondo.

Come funziona

Tutto in altezze di lettera

Il palco è un SVG con il viewBox grande quanto la finestra, quindi un'unità è un pixel. Ogni lettera si misura con getBBox due volte, al peso più leggero e a quello più pesante: la più larga decide il passo fra le lettere, che deve anche lasciare girare le camme senza toccarsi. Poi tutto si conta in altezze di lettera: la testa della punteria sotto la discesa delle lettere, la guida, la cima della camma a riposo, il mozzo. La grandezza del carattere si sceglie perché la parola e le camme stiano nella finestra, in larghezza e in altezza.

Una camma vera

La camma è un cerchio di base e un piccolo cerchio per il naso, uniti da due tangenti dritte: la forma a uovo delle camme vere, sempre convessa. Le tangenti lasciano il cerchio di base a un angolo che si calcola (l'arcocoseno della differenza dei raggi fratto la distanza dei centri): fuori da lì la camma non solleva niente. La punteria la tocca in cima, quindi l'alzata è quanto il contorno arriva in su sopra il cerchio di base: si legge una volta sola dal disegno in una tabella di 1440 angoli, così l'asta tocca sempre la linea che si vede.

Il puntatore è un angolo

Ogni lettera ha un angolo a cui il naso della sua camma è in cima, un passo dopo l'altra; prima della prima e dopo l'ultima c'è un riposo largo quanto un fianco della camma, così a riposo nessuna camma tocca la sua punteria e da un margine all'altro le camme fanno un giro esatto. La x del puntatore diventa l'angolo da raggiungere, e la cinghia lo insegue con una molla (SPIN e SETTLE) e una velocità massima. Entrando, il puntatore prende il giro su cui stanno le camme, così non girano mai un giro intero per raggiungerlo.

Le punterie

Ogni punteria è un corpo vero, con un passo fisso di 1/240 di secondo: una molla la spinge giù e la camma può solo spingerla su. Se la camma scende più in fretta di quanto la punteria possa cadere, la punteria resta in aria e poi ci ricade: il colpo la fa rimbalzare (BOUNCE) e la schiaccia per un attimo con una molla smorzata. Se vola troppo in alto, il collare sotto la testa si ferma contro la guida. Il peso e la larghezza della lettera seguono l'alzata con una curva morbida, fra THIN e HEAVY.

Fermarsi, la mano invisibile e l'apertura

Se il puntatore resta su una lettera, la camma è ferma col naso sotto l'asta e la punteria è appoggiata, si conta il tempo: dopo HOLD secondi la lettera si accende, con una spinta piccola verso l'alto, come un tasto che fa presa. Il colore entra in fretta e se ne va piano. Senza puntatore, dopo IDLE secondi una timeline GSAP muove un puntatore finto lungo la parola, con una sosta sulla lettera di mezzo. Anche l'apertura è una timeline sola: la cinghia e la guida si disegnano con stroke-dashoffset, le camme si aprono con back.out, le lettere vengono lasciate cadere una alla volta e le camme fanno il primo giro.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORD`	script.js	`'Tappet'`	La parola sulle punterie: fino a dieci lettere, gli spazi si tolgono. Ogni lettera ha la sua camma.
`LIFT`	script.js	`0.25`	Quanto le camme sollevano una lettera, in altezze di lettera: più alzata vuol dire camme più grandi e lettere più distanti.
`SPIN`	script.js	`2.6`	Quanto in fretta le camme seguono il puntatore, in hertz: 1 è pigro, 6 è stretto.
`SETTLE`	script.js	`0.62`	Come si fermano le camme: 0.3 vanno oltre e tornano indietro, 1 si fermano secche.
`BOUNCE`	script.js	`0.32`	Quanto rimbalza una lettera quando ricade sulla sua camma (0 = si posa e basta).
`HOLD`	script.js	`0.5`	I secondi che il puntatore deve restare fermo su una lettera perché si accenda.
`THIN`	script.js	`230`	Il peso di una lettera a riposo (da 100 a 900).
`HEAVY`	script.js	`780`	Il peso di una lettera in cima alla sua alzata (da 100 a 900).
`IDLE`	script.js	`2.4`	I secondi senza puntatore prima che una mano invisibile percorra la parola (0 = mai).

Provali nel Playground

Quando usarla

Per un nome che si suona passandoci sopra: l'apertura di un portfolio o di uno studio di design industriale, il marchio di un'officina, di un costruttore di orologi o di strumenti, la pagina di un progetto di ingegneria, la 404. Funziona con qualunque parola corta.

Sul telefono

La stessa macchina con le misure adattate: la parola e le camme prendono quasi tutta la larghezza e tutto si misura in altezze di lettera, quindi le proporzioni non cambiano. Si fa scorrere un dito lungo la parola; tenendolo fermo su una lettera, la lettera si accende. La scritta d'aiuto diventa «Drag a finger along the word.».

Con il movimento ridotto

Niente si muove: la cinghia, le camme e la parola compaiono in dissolvenza e restano ferme a riposo. La lettera sotto il puntatore prende peso e diventa rossa in dissolvenza, senza salire, e torna sottile quando il puntatore se ne va.

Trappole

La prima camma era un cerchio piccolo con un lobo fatto da un'onda di coseno: veniva fuori un'arachide con la vita stretta, che nessuna camma vera ha. Ora è un cerchio di base e un naso uniti da due tangenti, e l'alzata si legge dal disegno, così l'asta tocca sempre il contorno.
Con il lobo largo più di un passo fra due lettere, a riposo qualche camma toccava ancora la sua punteria e la parola non era mai in riga: il riposo sta in un vuoto largo quanto un fianco della camma da tutte e due le parti, e i passi fra le lettere si stringono per stare nel giro.
Tenendo fermo il puntatore, la lettera si accendeva e faceva il suo piccolo scatto: lo scatto la staccava dalla camma, il tempo ripartiva da zero e la lettera si spegneva e riaccendeva di continuo. Una lettera già accesa resta accesa anche in aria.
Un passaggio veloce lanciava le punterie così in alto che l'asta usciva dalla sua boccola: ora il collare sotto la testa si ferma contro la guida e la punteria ricade.
Il riquadro di un testo SVG (getBBox) è quello della riga, non della lettera: la discesa è quella del carattere anche per una T. La testa della punteria scende sotto le lettere solo se la parola ha davvero lettere con la coda.
Il puntatore che rientra dall'altra parte voleva le camme su un giro diverso e le faceva girare tutto un giro per raggiungerlo: entrando, il puntatore prende il giro su cui le camme stanno già.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Collaudo

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