Le colonne di colore
Hover, SVG
NuovaGratis
Torna alla libreria
L'elenco dei progetti con la graffa che abbraccia la voce
Un elenco di progetti hover nello stile minimal: cinque voci grandi su carta bianco caldo e, a sinistra, una graffa sottile tracciata come a matita. Passando su una voce la graffa si piega e la abbraccia, braccia e punta ognuna su una sua molla, con un'eco più chiara che arriva un attimo dopo; la voce prende peso e larghezza, le altre si spengono, e l'anno si accende di vermiglio.
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>Orvale Studio</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>
<!-- a list of projects; a thin curly brace on the left bends and hugs the item under the pointer -->
<main class="pagina" data-pagina>
<header class="testa">
<p class="marchio" data-entra>Orvale Studio</p>
<p class="testa__nota" data-entra>Selected work</p>
</header>
<section class="palco" data-palco>
<svg class="graffa" data-svg aria-hidden="true">
<path class="graffa__eco" data-eco />
<path class="graffa__linea" data-graffa />
</svg>
<ol class="elenco" data-elenco>
<li class="voce" data-voce><a href="#" class="voce__nome">Harbour Lights</a><span class="voce__anno">2026, identity</span></li>
<li class="voce" data-voce><a href="#" class="voce__nome">Salt & Clay</a><span class="voce__anno">2025, packaging</span></li>
<li class="voce" data-voce><a href="#" class="voce__nome">Northbound</a><span class="voce__anno">2025, editorial</span></li>
<li class="voce" data-voce><a href="#" class="voce__nome">Quiet Rooms</a><span class="voce__anno">2024, interiors</span></li>
<li class="voce" data-voce><a href="#" class="voce__nome">Field Notes</a><span class="voce__anno">2024, type</span></li>
</ol>
</section>
<footer class="piede">
<p class="nota" data-entra data-nota>Point at a project, the brace holds it</p>
<p class="conta" data-entra>Showing <span data-scelta>all five</span></p>
</footer>
</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.
27 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'elenco dei progetti con la graffa che abbraccia la voce» da Animorio e adattala al mio sitoCosa fa
È la pagina dei lavori di Orvale Studio, uno studio inventato: cinque progetti in colonna, in Archivo grande, Harbour Lights, Salt & Clay, Northbound, Quiet Rooms e Field Notes, ognuno con l'anno e il tipo di lavoro a destra. A sinistra c'è una graffa sottile, come quella che si traccia a matita a margine di un foglio per tenere insieme un gruppo di righe: all'apertura si disegna dall'alto e tiene tutto l'elenco. Passando su una voce la graffa si piega e la abbraccia: il braccio di sopra e quello di sotto scivolano a stringerla, la punta le si mette davanti, e ogni parte ha la sua molla, così la graffa arriva con un piccolo assestamento invece di scattare. Dietro, un'eco della graffa più chiara e più lenta arriva un attimo dopo, come il segno della matita che si ripassa. La voce abbracciata prende peso e larghezza sull'asse del carattere variabile e si sposta di sei pixel, le altre si spengono nel grigio, e il suo anno diventa vermiglio, l'unico colore. In basso la scritta Showing cambia col nome. Un clic stringe la graffa per un attimo, come la mano che preme; lasciando l'elenco la graffa torna a tenerlo tutto. Se nessuno muove il puntatore, la graffa gira da sola fra le voci.
Come funziona
La graffa disegnata
La graffa è un solo tracciato SVG ridisegnato a ogni fotogramma con quattro numeri: dove inizia il braccio di sopra, dove finisce quello di sotto, l'altezza della punta e quanto sporge. Fra un tratto dritto e l'altro ci sono curve quadratiche con raggio CURL, che si stringe quando la voce è bassa, così le braccia non si incrociano mai.
Una molla per ogni numero
Ognuno dei quattro numeri ha la sua molla, rigidezza STIFF e smorzamento DAMP, integrata a ogni giro del ticker di GSAP: la punta e le braccia arrivano ognuna coi suoi tempi e passano di un pixel oltre prima di posarsi. Cambiando voce la profondità riceve una piccola spinta, e la punta si ritira e torna.
L'eco
Sotto la graffa c'è una seconda graffa uguale, più chiara e sottile, con molle più morbide: ECHO dice quanto è lenta. Arriva sempre un attimo dopo, come il segno della matita ripassato, e si vede solo mentre la graffa si muove.
La voce abbracciata
La voce sotto il puntatore va a peso 640 e a larghezza GROW sull'asse wdth di Archivo, con back.out, e scivola di sei pixel; le altre vanno al grigio. L'anno della voce diventa vermiglio, e la scritta in basso cambia nome uscendo in alto ed entrando da sotto con un rimbalzo.
Il clic e il giro da solo
Un clic spinge la profondità della graffa e la voce, che tornano con una molla: la graffa stringe e lascia. Dopo IDLE secondi senza puntatore la graffa passa da sola su una voce ogni 1,6 secondi e ogni tanto la stringe, poi torna su tutto l'elenco.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
STIFF | script.js | 170 | La rigidezza della molla della graffa: più alta, più svelta. |
DAMP | script.js | 15 | Lo smorzamento: più basso, più oscilla. |
ECHO | script.js | 0.35 | Quanto è lenta l'eco della graffa (0 la toglie). |
DEPTH | script.js | 22 | Quanto sporge la punta, in px. |
CURL | script.js | 16 | Il raggio delle curve della graffa, in px. |
HUG | script.js | 10 | Quanto le braccia stanno larghe intorno alla voce, in px. |
GROW | script.js | 118 | La larghezza della voce abbracciata sull'asse wdth. |
IDLE | script.js | 2.6 | Dopo quanti secondi fermi la graffa gira da sola. |
Quando usarla
Come elenco dei lavori di uno studio, di un'agenzia o di un fotografo; come indice di una rivista o di un archivio; come menu aperto di un sito con poche voci, dove si vuole che la voce scelta si veda senza sottolineature.
Sul telefono
La stessa animazione: le voci si misurano sulla larghezza e sull'altezza, gli anni a destra spariscono, e un tocco su una voce la fa abbracciare e la stringe. La frase in basso dice tap.
Con il movimento ridotto
Niente molle né eco: la graffa salta alla voce con una dissolvenza, la voce cambia peso e colore subito, le scritte compaiono in dissolvenza.
Trappole
- Con un raggio di curva fisso, su una voce bassa le due curve di un braccio si incrociavano e la graffa faceva un ricciolo: il raggio va limitato a metà di ogni braccio.
- GSAP non conosce le molle con velocità: ogni numero ha la sua molla integrata a mano nel ticker, così le spinte del clic e del cambio di voce si sommano senza ricominciare il tween.
- Le misure delle voci cambiano quando il carattere finisce di caricare e al resize: si rileggono in document.fonts.ready e a ogni resize.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,1 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 24 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.
