I glifi che si voltano

Hover, Testo, 3DGSAP, Solo CSSMediaPeso compresso: Demo 5,6 KBGSAP 28 KBGratisScarica lo zip

Il campionario dei glifi di una fonderia, nello stile minimal, su nero: una griglia di cornici sottili con un glifo ciascuna. Intorno al puntatore le cornici si voltano di qualche grado a guardarlo, ognuna sulla sua molla, e i glifi vicini prendono peso e si ammorbidiscono con gli assi del carattere variabile, come sotto una lente d’inchiostro; quella sotto il puntatore diventa arancione e dice nome e codice del glifo.

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>Glyphs that turn to look</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <header class="top">
      <span class="top__name">Quarry</span>
      <span class="top__note">Glyph set</span>
    </header>

    <!-- the glyph set of a made-up type foundry, one glyph per thin frame. The frames around the pointer turn a few
         degrees to look at it, and the glyphs near it take weight and grow soft; the one under the pointer shows its
         name and its code point -->
    <section class="sheet" aria-label="Glyph set" data-sheet>
      <div class="grid" data-grid></div>
    </section>

    <p class="hint" data-hint>Move over the glyphs</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.

17 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 glifi che si voltano» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Una pagina nera con in alto il nome di una fonderia di caratteri inventata, Quarry, e a destra Glyph set. In mezzo una griglia di trentadue cornici quadrate sottili, grigie, otto per riga, con dentro un glifo ciascuna in un serif chiaro e leggero: maiuscole e minuscole, la e commerciale, il punto interrogativo, la chiocciola, il paragrafo, la ß, alcune cifre, l’euro. All’apertura le cornici compaiono dal centro verso i bordi e i glifi salgono con un piccolo rimbalzo. Muovendo il puntatore, le cornici intorno si voltano di qualche grado verso di lui in prospettiva, come facce che lo seguono con lo sguardo: quella proprio sotto resta dritta, le vicine si girano di più, quelle lontane per niente; ognuna è su una molla, quindi oscilla appena e si assesta. I glifi vicini al puntatore prendono peso e si arrotondano (gli assi del peso e della morbidezza del carattere), tanto più quanto sono vicini, come una lente d’inchiostro che segue la mano. La cornice sotto il puntatore diventa arancione e in basso compaiono il nome del glifo e il suo codice Unicode, per esempio ampersand e U+0026. Quando il puntatore se ne va le cornici si raddrizzano e i glifi tornano leggeri.

Come funziona

Una griglia misurata dallo script

Lo script sceglie colonne (otto, cinque sul telefono) e misura della cella in base allo spazio libero e la scrive in variabili CSS (--cols, --cell, --gap) che reggono la griglia e la grandezza dei glifi. Ogni cella ha due livelli: l’elemento esterno lo gira lo script con transform, il figlio porta il bordo e il colore, così il transform in linea non cancella niente del CSS.

Voltarsi a guardare

Per ogni cella si calcola la distanza dal puntatore in celle e la direzione. L’angolo è TILT × sen(π·d/REACH), smorzato vicino a zero: nullo sotto il puntatore, massimo a circa una cella, nullo oltre REACH. rotateY segue la direzione orizzontale e rotateX quella verticale col segno opposto, con perspective() nel transform di ogni cella, così ogni cornice ha il suo punto di vista e non quello del centro della griglia.

Molle a passi fissi

I due angoli di ogni cella vanno verso il loro obiettivo su una molla (SPRING) poco frenata, nel ticker di GSAP, a passi di 1/240 di secondo: per questo oscillano appena e si assestano. Il peso ha una sua molla più ferma; la morbidezza segue con un semplice inseguimento esponenziale.

La lente d’inchiostro

Fraunces ha gli assi wght (100–900), SOFT (0–100) e opsz. Il peso va da WEIGHT[0] a WEIGHT[1] e la morbidezza da 0 a SOFT con una campana gaussiana della distanza larga LENS celle, moltiplicata per l’intensità del campo, che GSAP porta a 1 quando il puntatore entra e a 0 quando esce. font-variation-settings si riscrive solo quando i valori arrotondati cambiano.

Nome e codice

La cella più vicina al puntatore prende la classe is-on (bordo arancione) e il suo nome e il suo codice salgono di quattro pixel con un’entrata power3; il codice si scrive con codePointAt in esadecimale. Nelle celle piccole, sul telefono, resta solo il nome.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`GLYPHS`	script.js	`'AaBbGgQqRrSsefky&?!@%§¶ß2358øæW€'`	I glifi del campionario, in ordine (trentadue sul computer, trenta sul telefono).
`TILT`	script.js	`7`	Di quanti gradi si volta al massimo una cornice per guardare il puntatore.
`REACH`	script.js	`2.6`	Fin dove si voltano le cornici, in celle dal puntatore.
`LENS`	script.js	`1.4`	Fin dove arrivano peso e morbidezza, in celle.
`WEIGHT`	script.js	`[300, 900]`	Il peso di un glifo a riposo e proprio sotto il puntatore (da 100 a 900).
`SOFT`	script.js	`100`	Quanto si ammorbidisce un glifo sotto il puntatore (da 0 a 100).
`SPRING`	script.js	`[190, 13]`	La molla delle cornici: quanto è rigida e quanto è frenata (meno freno, più oscilla).

Provali nel Playground

Quando usarla

Per la pagina di un carattere in una fonderia, per un portfolio di grafica o di lettering, per la sezione «caratteri» di un sistema di design: dove si vuole far toccare con mano un carattere variabile. Funziona con qualunque insieme di glifi, anche icone di testo o cifre.

Sul telefono

Le stesse animazioni a misure adattate: cinque colonne e trenta glifi, celle più piccole. Toccando la griglia la lente si accende sotto il dito e lo segue trascinando; alzando il dito resta un momento, poi le cornici si raddrizzano. Nelle celle piccole sotto il glifo c’è solo il nome.

Con il movimento ridotto

Le cornici non si voltano e non c’è nessuna molla: restano dritte, i glifi vicini al puntatore prendono peso e morbidezza senza oscillare, la cornice sotto diventa arancione e nome e codice compaiono in dissolvenza. All’apertura tutto compare in dissolvenza.

Trappole

Sul telefono la griglia usciva dallo schermo con tre colonne enormi: la sezione, figlia di una griglia CSS, si allargava al contenuto (otto celle da 120 pixel di partenza) e lo script misurava quella larghezza. La pagina ha grid-template-columns: minmax(0, 1fr) e la sezione min-width: 0.
Il bordo arancione e il transform dello script sullo stesso elemento: il transform in linea di GSAP avrebbe cancellato quello del CSS. Il bordo sta sul figlio .cell__face.
Un mouse già sopra la griglia durante l’apertura non accendeva niente: l’ultima posizione si tiene e la lente si accende appena l’apertura finisce.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0.

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

Collaudo

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