Lo sfondo di fili come un tessuto
Sfondi, Hover
NuovaGratis
Torna alla libreria
Lo sfondo di crocette che guardano
Uno sfondo animato da mettere dietro a un titolo o a una sezione: una griglia di crocette sottili su un nero pieno. Quelle vicine al puntatore si girano verso di lui e allungano il braccio che lo guarda, come aghi di bussola; ogni pochi secondi un'onda attraversa la griglia e le fa girare di un quarto, su una molla, accendendole per un attimo nell'arancio. 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>Norma</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>
<!-- the background: a grid of thin crosses on a canvas behind the page; the crosses near the pointer turn and
stretch one arm towards it, and every few seconds a wave runs across the grid and turns them a quarter -->
<main class="pagina" data-pagina>
<canvas class="fondo" aria-hidden="true" data-fondo></canvas>
<header class="testa">
<p class="marchio">Norma</p>
<p class="testa__nota">Architecture & interiors</p>
</header>
<section class="eroe">
<div class="blocco" data-blocco>
<p class="occhiello" data-entra>A small studio for houses and rooms</p>
<h1 class="titolo">
<span class="riga"><span class="riga__dentro" data-riga>Quiet buildings,</span></span>
<span class="riga"><span class="riga__dentro" data-riga>drawn to the millimetre.</span></span>
</h1>
<div class="azione" data-entra>
<a class="pillola" href="#">
<span class="pillola__scritta" data-testo="See the projects">See the projects</span>
<svg class="pillola__freccia" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.8 13.2 8 9 12.2" /></svg>
</a>
</div>
</div>
</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 «Lo sfondo di crocette che guardano» da Animorio e adattala al mio sitoCosa fa
Una pagina intera nera, il fondo di uno studio di architettura inventato, Norma. Dietro a tutto, su un canvas, una griglia di crocette sottili color carta, una ogni 34 pixel, come i segni di un foglio da disegno tecnico. Al centro, piccolo, il titolo: A small studio for houses and rooms, poi due righe in Instrument Sans stretto (Quiet buildings, drawn to the millimetre.) e una pillola chiara (See the projects) con la freccia; in alto il marchio e Architecture & interiors. Intorno al titolo e alle due scritte della testata le crocette sfumano fino a sparire, sempre intere e mai rimpicciolite, così le parole stanno sul nero pulito. Le crocette vicine al puntatore si girano verso di lui e allungano il braccio che lo guarda, più vicine più lungo, come un campo di aghi di bussola; lontano tornano piccole e uguali. Ogni cinque secondi un'onda parte da un punto diverso del bordo (in basso a sinistra, in alto a destra, in alto al centro) e attraversa la griglia: ogni crocetta che tocca fa un quarto di giro su una molla, passando per la ×, va un filo oltre e si posa, e per un attimo prende l'arancio, che sfuma dietro al fronte. Quando nessuno muove il puntatore, un puntatore finto passeggia per la pagina su una curva che torna uguale. All'apertura le crocette nascono dal centro verso i bordi con un piccolo rimbalzo e le due righe del titolo salgono dalla loro finestra stringendosi e prendendo peso.
Come funziona
La griglia e le zone pulite
Su un canvas a tutta pagina (devicePixelRatio limitato a 2) si mette una crocetta ogni PASSO pixel, centrata. Si misurano il blocco del titolo e le due scritte della testata e per ogni crocetta si calcola la distanza da un rettangolo molto arrotondato intorno a ognuno (una superellisse): dentro sparisce, sul bordo sfuma con una piuma di 60 px (26 per la testata). Le crocette sfumate si disegnano con la loro trasparenza ma sempre intere: rimpicciolite diventerebbero puntini.
Gli aghi verso il puntatore
Ogni crocetta ha un angolo che segue una molla (MOLLA), integrata a mano sul ticker di GSAP col passo limitato a 1/30 di secondo, e sempre per la via più corta (la differenza fra angoli riportata fra −π e π). Entro GUARDA pixel dal puntatore l'angolo voluto si gira verso di lui di tanto quanto è vicina, e il braccio che lo guarda si allunga di ALLUNGA volte; lontano torna al suo angolo e alla sua misura.
L'onda
Una timeline GSAP in ripetizione dura tre volte ONDA_OGNI: dentro ci sono la fase della passeggiata del puntatore finto e tre onde, ognuna un numero da 0 a 1 in TRAVERSA secondi. Il raggio dell'onda è quel numero per la diagonale della pagina; a ogni fotogramma le crocette fra il raggio di prima e quello di adesso ricevono un quarto di giro in più sull'angolo di riposo, una spinta alla misura e la luce, che poi cala con e^(−2,6·t).
Il disegno in tre passate
Tutte le crocette normali sono un solo percorso e un solo stroke; poi quelle sfumate, una per una con globalAlpha; poi sopra quelle toccate dall'onda nell'accento, con la trasparenza della loro luce, così l'arancio sfuma sul grigio invece di lasciare un buco.
L'apertura, il puntatore finto, la pausa
All'apertura una timeline fa nascere le crocette dal centro verso i bordi con un rimbalzo, e le righe del titolo salgono con back.out mentre font-stretch passa da 100% a 84% e il peso da 360 a 500. Dopo 2,4 secondi senza il puntatore vero il punto segue una curva di Lissajous legata alla fase del giro, su una molla morbida. IntersectionObserver e visibilitychange fermano il ticker e il giro quando la pagina non si vede.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PASSO | script.js | 34 | La distanza fra una crocetta e l'altra, in px (sul telefono un poco meno). |
BRACCIO | script.js | 5 | La lunghezza di mezzo braccio, in px. |
GUARDA | script.js | 230 | Fin dove le crocette sentono il puntatore, in px. |
ALLUNGA | script.js | 1.6 | Quanto si allunga il braccio che guarda il puntatore (0 non si allunga). |
ONDA_OGNI | script.js | 5 | Ogni quanti secondi parte un'onda; ne partono tre per giro. |
TRAVERSA | script.js | 3.4 | In quanti secondi l'onda attraversa tutta la pagina. |
MOLLA | script.js | [120, 11] | La molla delle crocette: quanto è rigida e quanto è frenata. Meno frenata, più oscillano dopo l'onda. |
SPESSORE | script.js | 1 | Lo spessore delle crocette, in px. |
Quando usarla
Come fondo della prima schermata di uno studio di architettura o di ingegneria, di un tipografo, di uno studio di design, di una conferenza tecnica o di un prodotto per sviluppatori; in generale dietro a un titolo corto quando si vuole un nero preciso e vivo, con l'aria di un foglio da disegno. Il colore delle crocette e l'accento si cambiano nel CSS.
Sul telefono
Le stesse animazioni a misure adattate: le crocette sono un poco più fitte, il titolo più piccolo e la zona pulita lo segue. Il dito fa girare le crocette mentre tocca e trascina; quando si alza torna il puntatore finto.
Con il movimento ridotto
La griglia è ferma, tutte le crocette dritte: niente onde, niente aghi verso il puntatore, niente nascita dal centro. Il titolo, la riga piccola e la pillola compaiono in dissolvenza.
Trappole
- Le onde avevano la durata scritta come funzione (per farla dipendere dalla larghezza della pagina): GSAP non la accetta, l'onda finiva subito e non si vedeva. Ora ogni onda è un numero da 0 a 1 in TRAVERSA secondi e il raggio si calcola nel disegno, così segue anche il cambio di misura della finestra.
- Le crocette accese dall'onda si disegnavano solo nell'arancio sempre più trasparente: dietro al fronte lasciavano una scia più scura del resto. Ora si disegnano sempre in grigio e l'arancio va sopra.
- Intorno al titolo le crocette prima si rimpicciolivano fino a diventare puntini (e i puntini sono vietati): ora sono sempre intere e sfumano con la trasparenza.
- Le crocette passavano sopra il marchio e la scritta della testata: anche quelle due hanno la loro zona pulita.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,3 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.
