Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
L'angolo che si apre
Un goniometro disegnato con linee sottili: il braccio libero gira sulla scala, scatta in una tacca ogni quindici gradi con un filo di rimbalzo, e il numero dei gradi si allarga insieme all'angolo, stretto a zero e larghissimo a 180. A novanta gradi il piccolo arco nell'angolo si piega nel quadratino dell'angolo retto, nell'unico colore d'accento. Stile minimal.
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 opening angle</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a protractor drawn with hairlines: one arm is fixed on the base line, the other is dragged round the scale and
clicks into a notch every fifteen degrees. The number underneath opens with the angle (Anybody's width axis),
and at ninety degrees the little arc in the corner folds into the square of a right angle -->
<main class="stage" data-stage>
<header class="top">
<span class="top__name">Bevel</span>
<span class="top__note">An angle, measured</span>
</header>
<div class="dial" role="slider" tabindex="0" aria-label="Angle" aria-valuemin="0" aria-valuemax="180" aria-valuenow="0" aria-valuetext="0 degrees" data-dial>
<svg class="dial__svg" viewBox="-320 -306 640 322" aria-hidden="true">
<path class="base" pathLength="1" data-base></path>
<path class="scale" pathLength="1" data-scale></path>
<path class="ticks" data-ticks></path>
<path class="ticks ticks--in" data-ticks-in></path>
<path class="mark" data-mark></path>
<path class="arm arm--fixed" data-fixed></path>
<path class="arm" data-arm></path>
<path class="grip" data-grip></path>
<path class="pivot" data-pivot></path>
</svg>
<div class="labels" aria-hidden="true" data-labels></div>
</div>
<div class="read" aria-hidden="true">
<div class="num" data-num><span class="num__in" data-num-in><span data-digits>0</span><span class="num__deg">°</span></span></div>
<div class="name" data-name></div>
</div>
<p class="hint">Drag the arm round the scale</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.
30 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'angolo che si apre» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo, in alto a sinistra il nome di un marchio inventato, Bevel, e a destra An angle, measured. In mezzo un goniometro a mezzo cerchio, tutto a linee sottili: la linea di base, l'arco della scala, una tacca per ogni grado, più lunghe ogni cinque, ogni quindici e ogni quarantacinque gradi, e i numeri 0, 30, 60, 90, 120, 150 e 180 fuori dal bordo. Dal centro partono due bracci: uno fermo sulla linea di base, verso lo zero, e uno libero con una piccola presa più spessa in cima. Trascinando (in qualunque punto della pagina, col mouse o col dito) il braccio libero punta verso la mano e la segue su una molla. Ogni quindici gradi c'è una tacca: quando il braccio ci arriva vicino viene tirato dentro, va un filo oltre e si posa; le tacche intorno sentono il colpo e si allungano verso il centro con una piccola vibrazione, e il numero prende peso per un attimo. Le tacche dentro l'angolo diventano scure, e scuri anche i numeri della scala che l'angolo ha passato. Sotto, grande, il numero dei gradi in Anybody, un carattere variabile la cui larghezza va da 50 a 150: il numero si apre insieme all'angolo, stretto e alto a zero, largo e basso a 180, e segue anche il rimbalzo del braccio. Sotto il numero il nome dell'angolo, zero, acute, right, obtuse, straight angle, che cambia lettera per lettera. A novanta gradi esatti, quando il braccio si è posato, il piccolo arco nell'angolo si piega nel quadratino dell'angolo retto e diventa blu elettrico, l'unico colore d'accento. Il braccio non passa la linea di base: se ci sbatte contro, a zero o a 180, rimbalza e si posa. All'apertura la linea di base si apre dal centro, la scala si disegna da 0 a 180 con le tacche che crescono una dopo l'altra, i bracci si allungano dal centro e il numero sale da sotto. Quando nessuno lo tocca il braccio va da solo: 30, 90 col quadratino, 150, 180, 45, poi ricade sullo zero con un piccolo rimbalzo e ricomincia; lasciato dalla mano, dopo un momento torna a zero e riparte. Con le frecce si va di un grado (con Maiuscolo di quindici), con Pagina su e giù di quindici, con Home e Fine a 0 e a 180.
Come funziona
Il goniometro in un SVG
L'SVG ha un viewBox di 640 per 322 con il vertice nell'origine e la scala a raggio 260. Gli angoli si contano come in geometria, in senso antiorario dallo zero a destra, quindi un punto a d gradi è (r·cos d, −r·sin d): la y va in giù. Le tacche sono segmenti dalla scala verso il centro, lunghe 4, 9, 16 o 24 secondo il grado, in due path ridisegnati a ogni fotogramma: quelle dentro l'angolo più scure, le altre più chiare. Sotto i 520 pixel di larghezza le tacche di un grado si lasciano fuori, per non fare una fascia grigia.
Il braccio su una molla, con le tacche e il fermo
La mano chiede un angolo (atan2 dal vertice al puntatore, fra 0 e 180; sotto la linea di base vale 0 o 180). Se è a meno di MAGNET gradi da un multiplo di STEP, la richiesta diventa la tacca: è la calamita che tira dentro il braccio. Il braccio va verso la richiesta su SPRING, integrata a mano sul ticker di GSAP in quattro passi per fotogramma col tempo limitato a 1/30 di secondo; frenata poco, va un grado oltre e torna. La linea di base è un fermo: se l'angolo passa 0 o 180 si rimette sul bordo e la velocità si inverte, moltiplicata per BOUNCE.
Il colpo che sentono le tacche
Ogni volta che la richiesta entra in una tacca (e ogni volta che il braccio sbatte sul fermo) si segna un colpo: dove e da quanto. Ogni tacca si allunga di LEAN × e^(−(distanza/6,5)²) × e^(−7t) × cos(21t), una campana intorno alla tacca che vibra e si spegne in meno di un secondo. Nello stesso momento il peso del numero sale di WEIGHT[1] e torna giù con un tween power3.out.
Il numero che si apre e il quadratino dell'angolo retto
La larghezza del numero è font-stretch da WIDTH[0] a WIDTH[1] in proporzione all'angolo del braccio, molla compresa. Le cifre mostrano la tacca quando il braccio le è a meno di 0,9 gradi, così l'assestamento non le fa ballare fra 89 e 91. Il segno nell'angolo è una linea di 28 punti presi due volte, sull'arco di raggio 58 e sulla spezzata dell'angolo retto (A, B, C, che sta anche sugli angoli diversi da 90 come un rombo); un valore m da 0 a 1 li mescola punto per punto, e il colore va dall'inchiostro all'accento con gsap.utils.interpolate. m sale con back.out solo quando la richiesta è 90 e il braccio si è posato.
L'apertura, il giro da solo e le mani
Una timeline GSAP apre la linea di base dal centro, fa crescere le tacche con un back.out quando lo sweep le raggiunge (e disegna la scala con lo stroke-dashoffset), allunga i bracci e fa salire il numero. Poi parte il giro: una timeline con repeat −1 che porta la richiesta della mano per gli angoli di TOUR con power2.inOut, tenendo ogni angolo HOLD secondi, e ricade sullo zero con power3.in. Quando la mano preme il giro si ferma; lasciato, dopo IDLE secondi una gsap.delayedCall riporta il braccio a zero e il giro riparte. Il goniometro è un role=slider con aria-valuenow.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
STEP | script.js | 15 | Ogni quanti gradi c'è una tacca in cui il braccio scatta. |
MAGNET | script.js | 2.5 | Da quanti gradi di distanza una tacca tira dentro il braccio (0, niente calamita). |
SPRING | script.js | [190, 15] | La molla del braccio: quanto è rigida e quanto è frenata (meno freno, più va oltre). |
BOUNCE | script.js | 0.45 | Quanta velocità tiene il braccio quando sbatte sulla linea di base. |
LEAN | script.js | 14 | Quanto si allungano le tacche intorno a una tacca quando il braccio ci scatta dentro. |
WIDTH | script.js | [56, 148] | La larghezza del numero con i bracci chiusi e distesi (da 50 a 150). |
WEIGHT | script.js | [560, 190] | Il peso del numero (da 100 a 900) e quanto pesa di più a ogni scatto. |
TOUR | script.js | [30, 90, 150, 180, 45, 0] | Gli angoli per cui passa il braccio quando va da solo, da 0 a 180. |
HOLD | script.js | 1.1 | I secondi in cui il braccio resta fermo su ogni angolo del giro (a 90 e a 180 una volta e mezza). |
IDLE | script.js | 2.4 | Dopo quanti secondi senza mani il braccio torna a zero e riparte da solo. |
Quando usarla
Per un valore che è un angolo o un'apertura e che si vuole far sentire: l'inclinazione di un pannello solare o di uno schienale nella pagina di un prodotto, l'angolo di una sfumatura o di una rotazione in un'app di disegno, l'apertura di un faretto, lo studio di un architetto o di un falegname che si presenta con i suoi strumenti. Funziona dove c'è spazio per una scena sola; in un modulo pieno di campi basta un cursore normale.
Sul telefono
Le stesse animazioni a misure adattate: il goniometro è largo quanto lo schermo, i numeri della scala più piccoli, le tacche di un grado lasciate fuori sotto i 520 pixel, il numero dei gradi scala con lo schermo. Il braccio segue il dito che trascina in qualunque punto della pagina (lì la pagina non scorre, è una scena sola) e resta dove il dito lo lascia; poi torna a zero e riparte da solo.
Con il movimento ridotto
Niente molla, niente rimbalzi, niente tacche che vibrano e niente lettere che salgono: il braccio va subito all'angolo, il quadratino compare già piegato, il nome dell'angolo si scambia con una breve dissolvenza. Nel giro da solo il braccio non si muove fra un angolo e l'altro: ricompare in dissolvenza già al suo posto. All'apertura tutto compare in dissolvenza.
Trappole
- Allargata e stretta con scaleX di GSAP e svgOrigin '0 0', la linea di base finiva fuori centro, lunga fino al bordo sinistro della pagina, e il segno del vertice restava solo sopra la linea: linea e segno si ridisegnano ora a ogni fotogramma con la loro misura, senza trasformazioni.
- Con le cifre prese dall'angolo del braccio, l'assestamento sulla tacca dei 90 le faceva ballare fra 89, 90 e 91, e con loro il nome (acute, right, obtuse): le cifre mostrano la tacca quando il braccio le è a meno di 0,9 gradi.
- Il back.out che piega l'arco nel quadratino porta m oltre 1: mescolando i punti oltre il quadrato il segno usciva storto, con il lato di sopra in salita. m si ferma a 1 per la forma e quello che avanza fa solo crescere il quadratino di un filo.
- La pausa su un angolo va prima del tween dopo, quindi si misura sull'angolo da cui si parte e non su quello dove si va: all'inizio il braccio restava più a lungo su 30 invece che su 90.
- Le tacche di un grado, su un telefono, sono a due pixel e mezzo l'una dall'altra e diventano una fascia grigia: sotto i 520 pixel di goniometro restano solo quelle ogni cinque gradi.
Librerie
GSAP 3.15.0, Anybody (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 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.
