Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Il rettangolo aureo che si disegna
Scorri dentro l’anteprima
Scendendo, un rettangolo aureo si divide quadrato dopo quadrato: ogni linea sottile si disegna, atterra con una piccola tacca e lascia la sua misura accanto. Poi la spirale percorre i quadrati e la camera la segue fino all’occhio, dove aspettava il nome dello studio. 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 golden rectangle that draws 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>
<!-- a made-up architecture studio, Aurel. The stage sticks while you scroll: a golden rectangle 233 by 144 is divided
square after square, every thin line draws itself with its measure beside it; then the spiral runs through the
squares and the camera dives into its eye, where the studio's name was waiting. The drawing is made by the
script -->
<main>
<section class="corsa" data-corsa>
<div class="palco" data-palco>
<svg class="tela" data-tela aria-hidden="true">
<defs>
<linearGradient id="bordi" data-bordi x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#000"/>
<stop data-bordo-alto offset="0.08" stop-color="#fff"/>
<stop data-bordo-basso offset="0.92" stop-color="#fff"/>
<stop offset="1" stop-color="#000"/>
</linearGradient>
<mask id="buco" data-maschera maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
<rect data-maschera-fondo x="0" y="0" width="100" height="100" fill="url(#bordi)"/>
<rect data-buco x="0" y="0" width="0" height="0" fill="#000" fill-opacity="0"/>
<rect data-buco-sotto x="0" y="0" width="0" height="0" fill="#000" fill-opacity="0"/>
</mask>
</defs>
<g data-veli></g>
<g mask="url(#buco)">
<path class="quote" data-quote d="M0 0"/>
<path class="linee" data-linee d="M0 0"/>
<path class="spirale" data-spirale d="M0 0"/>
</g>
</svg>
<div class="misure" data-misure aria-hidden="true"></div>
<header class="testa">
<a class="marchio" href="#" data-marchio data-entra-testa>
<svg class="marchio__segno" viewBox="0 0 26 16.83" aria-hidden="true">
<path class="marchio__bordo" d="M1 1h24v14.83H1zM15.83 1v14.83M15.83 10.17H25M19.33 10.17v5.66"/>
<path class="marchio__arco" data-marchio-arco d="M1 15.83A14.83 14.83 0 0 1 15.83 1A9.17 9.17 0 0 1 25 10.17A5.67 5.67 0 0 1 19.33 15.83"/>
</svg>
<span class="marchio__nome">Aurel</span>
</a>
<p class="voce" data-entra-testa>Studio for architecture</p>
</header>
<h1 class="nome" data-nome aria-label="Aurel">Aurel</h1>
<p class="sotto" data-sotto><span class="sotto__dentro" data-sotto-dentro>We build in proportion.</span></p>
<p class="nota" data-entra-testa><span class="nota__etichetta">Proportion</span><span class="nota__valore">1 : 1.618</span></p>
<p class="cenno" data-entra-testa><span class="cenno__dentro" data-cenno><span>Scroll</span><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 3v13M4.5 10.5 10 16l5.5-5.5"/></svg></span></p>
</div>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.
18 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 «Il rettangolo aureo che si disegna» da Animorio e adattala al mio sitoCosa fa
La pagina di uno studio di architettura inventato, Aurel: carta color avorio, il nome in alto a sinistra con il suo piccolo rettangolo aureo, in basso la proporzione 1 : 1.618 e, in mezzo, un rettangolo disegnato a linee sottili. Arriva tracciandosi dall’angolo in alto a sinistra, in tutte e due le direzioni insieme, e intorno compaiono le quote come su un disegno tecnico: la linea di misura che cresce dal centro, le tacche oblique alle estremità e i numeri 233 e 144 che interrompono la linea. Scorrendo il palco resta fermo e il rettangolo si divide: una linea parte dalla linea di prima, scende o attraversa, e quando arriva in fondo lascia una piccola tacca che si posa con un rimbalzo; il quadrato appena chiuso si vela per un attimo e accanto alla linea compare la sua misura, stretta e un po’ più in basso, che si allarga e sale al suo posto. I quadrati sono 144, 89, 55, 34, 21, 13, 8, 5, 3, 2, 1 e 1, i numeri di Fibonacci, quindi la divisione torna esatta; ognuno prende un po’ meno scroll del precedente e le misure dei più piccoli restano nascoste finché non sono abbastanza grandi da leggersi. Poi la spirale, nel colore d’accento, entra dall’angolo in basso a sinistra e percorre i quadrati, un quarto di cerchio in ognuno: la misura del quadrato che sta attraversando si accende nell’accento e torna grigia quando la spirale passa oltre. Quando la spirale arriva ai quadrati piccoli la camera la segue e si tuffa verso l’occhio con uno zoom esponenziale, così ogni quadrato cresce allo stesso ritmo, le quote esterne escono dallo schermo e le misure dei quadrati minuscoli compaiono una dopo l’altra. Le linee restano sempre sottili un pixel. Nell’occhio c’era il nome dello studio: le linee si aprono intorno, come su un disegno quando c’è una scritta, e le lettere arrivano strette e leggere, una dopo l’altra, e si allargano fino al peso pieno con un piccolo rimbalzo; sotto compare la frase dello studio. Col mouse il quadrato sotto il puntatore si vela e la sua misura si accende, le lettere del nome si allargano e tornano con un elastico, il marchio ridisegna la sua spirale. Risalendo, tutto torna indietro.
Come funziona
Il disegno in unità
Il rettangolo è 233 per 144 e i quadrati sono i numeri di Fibonacci, quindi ogni taglio è esatto. Un ciclo gira in senso orario, sinistra, sopra, destra, sotto, e da quello che resta toglie ogni volta un quadrato largo quanto il lato corto: per ognuno lo script tiene la linea che lo chiude, il quarto di cerchio della spirale (centro e due estremi) e la sua misura. Ogni linea viene girata in modo da partire dalla linea di prima. L’occhio della spirale è dove la diagonale del rettangolo incrocia la diagonale di quello che resta dopo il primo quadrato.
Disegnare sullo schermo, non zoomare
Niente è ingrandito con transform: a ogni fotogramma lo script porta ogni punto dalle unità allo schermo con la camera (uno zoom e la posizione dell’occhio) e riscrive i tracciati SVG. Così le linee restano di un pixel anche a undici ingrandimenti, le tacche oblique e le misure restano della stessa grandezza e ogni misura si mostra solo quando il suo quadrato è grande almeno 48 pixel. Sul telefono il disegno gira di un quarto e il rettangolo sta in piedi.
La spirale e la camera
Ogni quarto di cerchio è campionato una volta; la punta della spirale avanza per quarti, e ognuno prende una parte di scroll proporzionale al lato elevato a 0,42, così i quadrati piccoli non passano in un lampo. Lo zoom è esponenziale (ZOOM elevato alla posizione), quindi ogni quadrato cresce allo stesso ritmo, e parte quando la punta è a metà del quarto quadrato; intanto l’occhio scivola al centro dello schermo. La misura del quadrato che la punta sta attraversando si mescola verso il colore d’accento.
Il nome nell’occhio
Il nome è ancorato all’occhio e cresce con la camera. Una maschera SVG ha un rettangolo nero grande quanto il nome (misurato su una copia invisibile già al peso finale) e uno per la frase sotto: crescendo di opacità aprono le linee e la spirale intorno alle scritte, come su un disegno tecnico, e le misure che finirebbero sotto si fanno da parte. Le lettere salgono con font-variation-settings da wght 260 e wdth 62 a 600 e 112, con back.out e uno sfalsamento.
La regia
Tutto è una timeline sola con ScrollTrigger e scrub, su un palco sticky alto 100lvh con Lenis: le linee una dopo l’altra (ognuna con un po’ meno scroll), ognuna con la tacca, il velo e la misura in back.out, poi la spirale, lo zoom, il nome e la frase. Lo stato è un insieme di numeri; il disegno si rifà nel ticker di GSAP solo quando qualcosa è cambiato. L’entrata (il rettangolo e le quote) è una timeline a tempo, e una sfumatura nella maschera spegne il disegno vicino ai bordi alto e basso, dove ci sono le scritte piccole.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'Aurel' | Il nome dello studio che aspetta nell’occhio della spirale; la sua larghezza si misura da sola. |
SQUARES | script.js | 12 | In quanti quadrati si divide il rettangolo, da 7 a 12: con meno quadrati la spirale si ferma prima e l’occhio resta vuoto. |
LINE | script.js | 1 | Lo spessore delle linee del disegno, in pixel; resta uguale a ogni ingrandimento. |
SPIRAL | script.js | 1.8 | Lo spessore della spirale, in pixel. |
ZOOM | script.js | 11 | Quanto si avvicina la camera all’occhio alla fine: 11 vuol dire undici volte più vicino. |
SETTLE | script.js | 1.7 | Quanto vanno oltre le tacche, le misure e le lettere prima di posarsi (0 = niente rimbalzo). |
RIDE | script.js | 1 | Quanto scroll serve per tutto: 2 è il doppio. |
--accento | style.css | #e5432a | Il colore della spirale e della misura che sta attraversando. |
--inchiostro | style.css | #141414 | Il colore delle linee e del nome. |
Quando usarla
Per l’apertura di uno studio di architettura, di un designer, di un marchio che lavora sulle proporzioni o di un portfolio che vuole dire «misuriamo tutto»: il disegno tecnico che si costruisce e porta al nome. Va bene anche per presentare un metodo, una griglia o un sistema di impaginazione.
Sul telefono
Uguale: il disegno gira di un quarto e il rettangolo sta in piedi, così riempie lo schermo alto; le quote vanno sopra e a destra, le misure sono appena più piccole e il nome è largo quasi due terzi dello schermo.
Con il movimento ridotto
Niente si disegna né si muove e Lenis resta spento: lo scroll passa da tre soste, il rettangolo diviso con le misure, la spirale completa e il nome nell’occhio, e fra una sosta e l’altra il disegno cambia con una dissolvenza.
Trappole
- Ingrandire il disegno con transform: scale ingrossa anche le linee (a undici ingrandimenti diventano barre di 11 pixel) e le misure: il disegno si rifà ogni fotogramma sullo schermo, e le linee restano di un pixel.
- Con la spirale divisa in parti uguali di lunghezza, i quadrati piccoli passavano in un lampo e quelli grandi non finivano più: ogni quarto prende una parte di scroll proporzionale al lato elevato a 0,42.
- Uno zoom lineare resta quasi fermo all’inizio e corre alla fine: è esponenziale, così ogni quadrato cresce allo stesso ritmo.
- Il velo del quadrato appena chiuso, al 7 per cento, sembrava un blocco grigio sul primo quadrato grande: è al 3,5 per cento e svanisce subito.
- La frase sotto il nome attraversata dalle linee non si leggeva: anche lei ha il suo rettangolo nella maschera, e le misure che finiscono sotto il nome o la frase si fanno da parte.
- Durante lo zoom sul telefono le linee passavano sopra il marchio in alto: una sfumatura nella maschera spegne il disegno vicino ai bordi.
Librerie
GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 14 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.
