Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
L’orologio a parole
Animazione di testo nello stile minimal, su nero: una griglia di maiuscole dice l’ora in parole, IT IS TWENTY PAST TEN. Le lettere accese sono larghe, piene e chiare, le altre strette, sottili e quasi nere. Quando l’ora cambia le parole vecchie si spengono stringendosi e le nuove si accendono in ordine di lettura, ognuna su una molla di larghezza e peso; fra una parola e l’altra quattro angoli arancio contano i minuti.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The word clock</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>
<main class="stage" data-stage>
<!-- the clock: a grid of letters, the time lit up in words; the four corner marks count the minutes in between -->
<div class="clock" data-clock>
<div class="grid" data-grid aria-hidden="true"></div>
<i class="corner corner--tl" data-corner aria-hidden="true"></i>
<i class="corner corner--tr" data-corner aria-hidden="true"></i>
<i class="corner corner--br" data-corner aria-hidden="true"></i>
<i class="corner corner--bl" data-corner aria-hidden="true"></i>
<p class="sr" data-said aria-live="polite"></p>
</div>
<p class="foot" data-foot>
<span class="foot__brand">Ostra Coffee, Harbour Street</span>
<span class="foot__time" data-time>10:16</span>
</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.
15 valori da cambiare
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 «L’orologio a parole» da Animorio e adattala al mio sitoCosa fa
Su un fondo quasi nero una griglia di dieci righe per undici lettere maiuscole, tutte strette, sottilissime e di un grigio scuro che si vede appena, compare riga dopo riga. Poi si accendono le lettere che dicono l’ora, in ordine di lettura: IT IS QUARTER PAST TEN. Ogni lettera accesa diventa larga, piena e color carta, con un piccolo rimbalzo di larghezza e peso che passa la misura di un niente e torna. Qui l’orologio corre: un minuto ogni 0,7 secondi. Fra un quarto d’ora e l’altro i minuti in più li contano quattro angoli sottili attorno alla griglia, come i segni di taglio di un foglio, che si accendono in arancio uno alla volta. Allo scoccare dei cinque minuti gli angoli si spengono, le parole che non servono più si stringono e si fanno sottili tornando nel buio, dall’ultima lettera alla prima, e subito dopo le parole nuove si accendono lettera per lettera: TWENTY PAST TEN, TWENTY FIVE PAST TEN, HALF PAST TEN, e dopo la mezza TWENTY FIVE TO ELEVEN. In basso a sinistra il nome di un caffè inventato, a destra l’ora in cifre.
Come funziona
Una griglia nostra
Le dieci righe di undici lettere sono disegnate da noi: ogni parola ha il suo posto (riga, colonna, lunghezza) e le parole dei minuti vengono prima di PAST e TO, che vengono prima delle ore, così ogni frase si legge da sinistra a destra e dall’alto in basso. Le lettere che avanzano nascondono il nome del caffè, OSTRA, e BREWS. Le celle sono di una griglia CSS a misura fissa: larghezza e peso cambiano senza spostare le vicine.
Dall’ora alle parole
I minuti si arrotondano ai cinque: zero è O’CLOCK, da cinque a trenta si dice PAST l’ora, da trentacinque in poi TO l’ora dopo (TWENTY FIVE, TWENTY, QUARTER, TEN, FIVE). Il resto dei minuti, da uno a quattro, accende gli angoli. La frase intera va anche in un paragrafo nascosto con aria-live, così chi usa un lettore di schermo la sente.
Ogni lettera ha un numero
Ogni cella ha un valore v da 0 a 1: larghezza da DARK_WIDTH a LIT_WIDTH, peso da DARK_WEIGHT a LIT_WEIGHT e colore dal grigio scuro al chiaro, calcolati a ogni fotogramma in gsap.ticker e scritti solo se cambiano. Accendersi è una tween di v a 1 con back.out(2.4), quindi passa 1 di poco e torna: la lettera si allarga un filo oltre e si posa.
La coreografia del cambio
Quando le parole cambiano si confrontano le celle accese prima e dopo: quelle che restano (IT IS, PAST, l’ora) non si muovono, quelle che escono vanno a 0 con power2.inOut, dall’ultima alla prima, e 0,38 secondi dopo quelle nuove si accendono in ordine di lettura, sfalsate di STAGGER.
Il tempo che corre
Un gsap.delayedCall di TICK secondi fa avanzare l’orologio di un minuto e si richiama da solo; con REAL_TIME guarda l’ora vera una volta al secondo. Gli angoli sono quattro elementi con due bordi da 1 px, come i segni di taglio, e cambiano colore con una tween.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START | script.js | '10:16' | L’ora da cui parte l’orologio (ore:minuti). |
TICK | script.js | 0.7 | Quanti secondi dura un minuto: l’orologio corre perché le parole cambino ogni pochi secondi. |
REAL_TIME | script.js | false | Con true l’orologio segna l’ora vera di chi guarda, un minuto al minuto. |
LIT_WIDTH | script.js | 118 | La larghezza delle lettere accese, sull’asse wdth (da 62 a 125). |
LIT_WEIGHT | script.js | 780 | Il peso delle lettere accese (da 100 a 900). |
DARK_WIDTH | script.js | 66 | La larghezza delle altre lettere. |
DARK_WEIGHT | script.js | 140 | Il peso delle altre lettere. |
STAGGER | script.js | 0.035 | I secondi fra una lettera che si accende e la successiva. |
Quando usarla
Per la pagina di un caffè, di un bar o di un negozio che dice se è aperto, per l’apertura di un albergo o di una casa vacanze, per un orologiaio, o come pezzo da mostrare in un portfolio di tipografia. Con REAL_TIME diventa un orologio vero da tenere in un angolo della pagina.
Sul telefono
La stessa animazione: la griglia occupa quasi tutta la larghezza dello schermo e le celle si rimisurano, con il carattere in proporzione.
Con il movimento ridotto
Le lettere non cambiano larghezza né peso: tutte hanno la stessa forma e quelle che dicono l’ora si accendono e si spengono solo col colore, in dissolvenza, tutte insieme. Gli angoli cambiano colore come sempre.
Trappole
- Con le lettere in una riga di testo normale, allargarne una spostava tutte le altre: ogni lettera sta in una cella di una griglia CSS a misura fissa, centrata, e può cambiare larghezza senza disturbare le vicine.
- Una griglia copiata da un orologio in commercio sarebbe stata la loro: questa è disegnata da capo, con le parole in un ordine che permette di leggere ogni ora e le lettere avanzate che nascondono il nome del caffè.
- Le lettere spente troppo scure sparivano e la griglia non si capiva; troppo chiare facevano rumore. Con #34312d su #0f0e0d si vedono appena, quanto basta a far capire che è una griglia di lettere.
- A mezzanotte e mezzogiorno l’ora zero è TWELVE: l’elenco delle ore parte da TWELVE e si legge con il resto della divisione per dodici.
Librerie
GSAP 3.15.0, Archivo (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,1 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.
