Le colonne di colore
Hover, SVG
NuovaGratis
Torna alla libreria
La parola col punto di fuga
Nello stile minimal: il nome di uno studio di architettura, Plinth, disegnato in prospettiva centrale come su un foglio da disegno. Le facce davanti delle lettere sono piene, ogni spigolo corre con una linea sottile verso lo stesso punto di fuga sull'orizzonte, le facce dietro sono tratteggiate. Il punto di fuga segue il puntatore su una molla e la parola gira nello spazio; la lettera più vicina si solleva e i suoi spigoli diventano rossi, e un clic spinge fuori la profondità.
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>Plinth</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- one word drawn in one-point perspective: every corner runs to a vanishing point that follows the pointer -->
<main class="stage" data-stage>
<header class="top">
<span class="brand">Plinth</span>
<span class="what">Architecture & interiors</span>
</header>
<svg class="drawing" data-svg role="img" aria-label="Plinth, drawn in perspective">
<g data-guides class="guides"></g>
<line data-horizon class="horizon" x1="0" y1="0" x2="0" y2="0" />
<g data-ticks class="ticks"></g>
<g data-depth class="depth"></g>
<g data-back class="back"></g>
<g data-front class="front"></g>
<g data-vp class="vp">
<circle class="vp__ring" r="9" />
<line class="vp__arm" x1="-14" y1="0" x2="14" y2="0" />
<line class="vp__arm" x1="0" y1="-14" x2="0" y2="14" />
<text class="vp__label" x="12" y="-12">VP</text>
</g>
</svg>
<footer class="bottom">
<p class="hint" data-hint>Move to drag the vanishing point. Click to push the depth.</p>
<p class="read" aria-hidden="true"><span>Depth</span> <b data-read-depth>0.00</b> <span class="read__sep"></span> <span>Horizon</span> <b data-read-h>0%</b></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.
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 «La parola col punto di fuga» da Animorio e adattala al mio sitoCosa fa
Su un fondo color carta c'è la parola PLINTH in lettere squadrate, disegnata in prospettiva centrale: le facce davanti sono nere e piene, da ogni spigolo parte una linea sottile che va indietro fino allo stesso spigolo più lontano, e le facce dietro sono un contorno tratteggiato. Linee di costruzione tratteggiate e chiare continuano dagli angoli di ogni lettera fino al punto di fuga, un piccolo mirino rosso con la scritta VP, che sta su una linea dell'orizzonte sottile con le tacche, più lunghe vicino al punto. All'inizio l'orizzonte e le linee di costruzione si disegnano dal centro, il mirino si apre con un piccolo scatto, le lettere cadono una dopo l'altra e si posano con un rimbalzo di un pixel, e poi la profondità si apre con una molla. Muovendo il puntatore il punto di fuga lo segue su una molla, arriva un poco oltre e torna: tutte le linee si girano verso di lui e la parola si vede da sopra, da sotto, da destra o da sinistra. La lettera più vicina al puntatore si solleva di qualche pixel e i suoi spigoli e la sua faccia dietro diventano rossi. Un clic spinge fuori la profondità, che torna indietro oscillando, e dal mirino parte un anello che si allarga e sparisce. In basso una scritta piccola dice la profondità e l'altezza dell'orizzonte, che cambiano dal vivo. Se nessuno muove il puntatore, il punto di fuga dopo un poco va a spasso da solo.
Come funziona
Le lettere fatte di poligoni
Le sei lettere di PLINTH sono scritte a mano come poligoni su una griglia larga cinque unità e alta sette (la P ha un secondo anello, la pancia vuota, disegnato con fill-rule evenodd). Così ogni spigolo è un punto vero, e da ogni punto si può tirare una linea verso il punto di fuga. La misura della parola è il minimo fra tre quarti della larghezza e un quarto abbondante dell'altezza, ricalcolata a ogni resize.
La prospettiva in una riga
La faccia dietro di ogni lettera è la faccia davanti spostata verso il punto di fuga di una frazione fissa, la profondità: ogni punto P diventa P + (VP − P) · profondità. Le linee di profondità uniscono ogni spigolo davanti al suo gemello dietro; le linee di costruzione partono dai quattro angoli di ogni lettera e arrivano fino al punto di fuga.
Le molle
Il punto di fuga, la profondità e il sollevamento di ogni lettera sono molle con frequenza e smorzamento, calcolate a passi fissi di un duecentoquarantesimo di secondo dentro gsap.ticker. FOLLOW e WOBBLE decidono quanto svelto e quanto morbido il punto segue il puntatore; il clic dà un calcio alla velocità della profondità, quindi esce e torna oscillando.
La lettera più vicina
A ogni fotogramma si cerca la lettera più vicina al puntatore dentro un ovale alto come la parola: quella si solleva di LIFT pixel su una molla e i suoi spigoli e la sua faccia dietro prendono il colore d'accento, con una classe CSS.
L'entrata e la scritta
Una timeline GSAP disegna l'orizzonte e le linee di costruzione dal centro (expo.out), apre il mirino con back.out, lascia cadere le lettere una ogni nove centesimi e alla fine apre la profondità con un calcio alla molla. La scritta in basso legge profondità e altezza dell'orizzonte a ogni fotogramma.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DEPTH | script.js | 0.2 | Quanto sono profonde le lettere, come parte della strada fino al punto di fuga (da 0.05 a 0.5). |
PUSH | script.js | 1.9 | Quanto un clic spinge fuori la profondità (1 = per niente). |
FOLLOW | script.js | 3.4 | Quanto svelto il punto di fuga segue il puntatore, in hertz. |
WOBBLE | script.js | 0.42 | Lo smorzamento della molla: 0.2 va oltre e oscilla, 1 arriva senza andare oltre. |
LIFT | script.js | 4 | Di quanti pixel si solleva la lettera sotto il puntatore. |
GUIDES | script.js | 0.7 | Quanto si vedono le linee di costruzione (0 = nascoste, 1 = piene). |
IDLE | script.js | 2.4 | Dopo quanti secondi senza puntatore il punto di fuga va a spasso da solo (0 = mai). |
--accent | style.css | #e2482c | Il colore del punto di fuga e della lettera sotto il puntatore. |
--ink | style.css | #161513 | Il colore delle facce davanti. |
--paper | style.css | #f3f0e8 | Il colore del fondo. |
Quando usarla
Per l'intestazione di uno studio di architettura, di design d'interni o di ingegneria, di una scuola di disegno, di una rivista di architettura o di un costruttore: un titolo che si lascia girare col mouse. Le lettere sono poligoni, quindi la parola si cambia ridisegnando le lettere sulla griglia.
Sul telefono
Le stesse linee e le stesse molle, con la parola misurata anche sull'altezza: sta nella casella del telefono. Il punto di fuga segue il dito che trascina in orizzontale (in verticale la pagina scorre), e un tocco spinge la profondità. Senza tocco, il punto va a spasso da solo.
Con il movimento ridotto
Niente si muove: il disegno compare in dissolvenza con la prospettiva già aperta e il punto di fuga fermo. La lettera più vicina al puntatore cambia solo colore.
Trappole
- Con le lettere scritte come testo non ci sono spigoli da unire al punto di fuga: servono poligoni veri, scritti a mano, con la pancia della P come secondo anello in evenodd.
- Una molla calcolata col passo del fotogramma diventa instabile quando il fotogramma è lungo: punto di fuga e profondità usano passi fissi di 1/240 di secondo.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,8 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 23 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.
