Il titolo che si alza dalla linea
Transizioni, Testo, Immagini
NuovaGratis
Torna alla libreria
L’orizzonte che si raddrizza
Nello stile minimal, lo strumento «raddrizza» di un’app di fotografia: dietro una cornice di ritaglio ferma c’è una foto storta di qualche grado. Una riga rossa si posa sull’orizzonte, la foto gira finché è in bolla, passa di una frazione di grado e torna, mentre sotto un righello di gradi scorre e il numero prende peso. Si può anche trascinare: lasciata, si raddrizza da sola.
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 horizon that levels itself</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>
<header class="top">
<p class="mark">Plumb</p>
<p class="tool">Straighten</p>
</header>
<!-- the crop: a level frame with the photo behind it, tilted. A red hairline finds the horizon, the photo turns
until it is level and the dial under it counts the degrees. Drag the photo or the dial to tilt it -->
<section class="desk" data-desk>
<p class="name" data-name aria-live="polite"></p>
<figure class="crop" data-crop role="img">
<div class="photo" data-photo>
<div class="photo__img" data-img></div>
<i class="photo__level" data-level aria-hidden="true"></i>
</div>
<div class="thirds" data-thirds aria-hidden="true">
<i class="thirds__v" style="left: 33.333%"></i>
<i class="thirds__v" style="left: 66.666%"></i>
<i class="thirds__h" style="top: 33.333%"></i>
<i class="thirds__h" style="top: 66.666%"></i>
</div>
</figure>
<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--bl" data-corner aria-hidden="true"></i>
<i class="corner corner--br" data-corner aria-hidden="true"></i>
<div class="dial" data-dial aria-hidden="true">
<div class="dial__ruler" data-ruler></div>
<i class="dial__needle"></i>
</div>
<p class="angle" data-angle aria-hidden="true"><span data-angle-n>0.0</span><span class="angle__deg">°</span></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.
21 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’orizzonte che si raddrizza» da Animorio e adattala al mio sitoCosa fa
Una pagina color carta con in alto a sinistra il nome di un’app di fotografia inventata, Plumb, e a destra il nome dello strumento, Straighten. Al centro una cornice di ritaglio con quattro angoli neri e dentro una foto disegnata dallo script: il mare aperto al mattino, con una vela sulla linea dell’orizzonte. Sopra la cornice il titolo della foto, sotto un righello di gradi con una lancetta rossa ferma al centro e, più in basso, il numero dei gradi. La foto arriva storta, l’orizzonte pende di quattro gradi e mezzo, e il righello scorre con lei. Una riga rossa sottile si posa sull’orizzonte, da sinistra a destra, e sopra la foto compare la griglia dei terzi. Poi la foto gira finché l’orizzonte è in bolla: mentre gira si ingrandisce quel tanto che basta per riempire sempre la cornice, il righello scorre sotto la lancetta e il numero conta verso lo zero, sempre più nero e più stretto. Arriva un po’ oltre, una frazione di grado che sui bordi è un pixel, e torna. Quando si posa gli angoli della cornice si stringono di un pixel e tornano, il numero prende un colpo di peso, la riga rossa se ne va verso destra e la griglia svanisce. Dopo un momento arriva la foto dopo, storta dall’altra parte: una salina a mezzogiorno con un palo e la sua ombra, poi la riva di un lago con una fila di pali nell’acqua. Si può trascinare la foto o il righello per storcerla a mano; lasciata, si raddrizza da sola.
Come funziona
Un numero solo, l’angolo
Tutto segue un numero, l’angolo in gradi. A ogni fotogramma il ticker di GSAP gira la foto di quell’angolo, sposta il righello di angolo × PER_DEGREE pixel sotto la lancetta e scrive il numero con un decimale e il vero segno meno (String.fromCharCode(0x2212)). Le animazioni muovono solo l’angolo.
La foto che riempie sempre la cornice
Girata, una foto grande quanto la cornice scopre gli angoli. Per coprirla deve crescere di max(cos θ + (A/L) sin θ, cos θ + (L/A) sin θ), con L e A larghezza e altezza della cornice: lo stesso calcolo che fanno le app di fotografia. Così a zero gradi la foto è esattamente nella cornice.
In bolla, un pixel oltre
Il raddrizzamento è una timeline: prima la riga rossa si posa sull’orizzonte (scaleX da sinistra) e compare la griglia dei terzi, poi l’angolo va a −tilt × OVERSHOOT con power3.inOut e torna a zero con sine.inOut. Con 4,6 gradi e 0,035 sono 0,16 gradi, circa un pixel sui bordi della foto.
Il numero che prende peso
Il numero è in Archivo, carattere variabile con gli assi wght e wdth. Lo script calcola quanto l’angolo è vicino allo zero e porta il peso da 300 a 680 e la larghezza da 112 a 94: più la foto è dritta, più il numero è nero e stretto. Quando si posa, un colpo in più di peso con elastic.out, insieme agli angoli della cornice che entrano di un pixel.
Trascinare e lasciare
Premendo sulla foto o sul righello la timeline si ferma e l’angolo segue il puntatore (sul righello al contrario, perché si trascina la scala). Lasciando, parte un raddrizzamento nuovo dall’angolo dove la si è lasciata, e poi la foto dopo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PHOTOS | script.js | 3 foto | Le foto disegnate dallo script, una dopo l’altra: il titolo e di quanti gradi è storta ognuna. |
IMAGE | script.js | '' | Una foto tua (un indirizzo o un file caricato nel Playground) al posto di quelle disegnate. |
HORIZON | script.js | 0.56 | Dove sta l’orizzonte nella tua foto, dall’alto (0) al basso (1): lì si posa la riga rossa. |
TURN | script.js | 1.5 | I secondi che la foto impiega a mettersi in bolla. |
OVERSHOOT | script.js | 0.035 | Quanto va oltre lo zero, come parte della sua pendenza (0 = si ferma secca). |
HOLD | script.js | 1.8 | I secondi che una foto dritta resta prima della successiva. |
PER_DEGREE | script.js | 14 | I pixel di righello per ogni grado. |
Quando usarla
Per un’app o un sito che lavora sulle foto (un editor, un servizio di stampa, un corso di fotografia), per spiegare uno strumento nella pagina di presentazione, o come apertura curiosa del portfolio di un fotografo di paesaggio.
Sul telefono
La stessa animazione con le misure adattate: la cornice diventa verticale e taglia la foto ai lati, il righello è largo quanto lo schermo. La foto e il righello si trascinano col dito.
Con il movimento ridotto
Niente gira: le foto sono già dritte, a zero gradi, e una lascia il posto all’altra con una dissolvenza.
Trappole
- Girata, una foto grande quanto la cornice scopre la carta negli angoli: cresce a ogni fotogramma di quanto serve per l’angolo di quel momento, non di un valore fisso (troppo poco storta, troppo grande dritta).
- I numeri del righello venivano in corsivo: le tacche sono elementi <i>, e il corsivo del browser passava ai numeri dentro. Ci vuole font-style: normal.
- Arrotondando a un decimale, un angolo di −0,04 si leggerebbe «−0.0»: sotto i cinque centesimi si scrive 0.0, e il meno è quello tipografico, largo come le cifre.
- Gli angoli della cornice stavano dentro il riquadro che taglia la foto e sparivano: sono fuori, accanto, messi dallo script.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,9 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.
