Lo sfondo di fili come un tessuto
Sfondi, Hover
NuovaGratis
Torna alla libreria
Lo sfondo a tratteggio che prende la luce
Uno sfondo animato da mettere dietro a un titolo: una carta bianco caldo coperta da un tratteggio a matita a quattro passate, più fitto dove l'ombra è più scura. Il puntatore è una lampada: dove cade la luce i tratti si ritirano, e quando la luce se ne va la matita li ripassa uno a uno, vermigli per un attimo come l'inchiostro fresco. Un tocco fa un lampo che sbianca mezza pagina. 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>Penumbra</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 pencil hatching on a canvas behind the page; the pointer is a lamp, the hatching thins out
where the light falls and is drawn again, stroke by stroke, where the shadow comes back -->
<main class="pagina" data-pagina>
<canvas class="fondo" aria-hidden="true" data-fondo></canvas>
<header class="testa">
<p class="marchio">Penumbra</p>
<p class="testa__nota">Lighting design</p>
</header>
<section class="eroe">
<div class="blocco" data-blocco>
<p class="occhiello" data-entra>Light for homes, shops and galleries</p>
<h1 class="titolo">
<span class="riga"><span class="riga__dentro" data-riga>Where the light falls,</span></span>
<span class="riga"><span class="riga__dentro" data-riga>the shadow draws back.</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>
<footer class="piede">
<p class="piede__nota">Move the lamp, tap for a flash</p>
<p class="piede__lettura" aria-hidden="true">Light <span data-luce>0.00</span><span class="piede__riga"><span data-barra></span></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.
23 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 a tratteggio che prende la luce» da Animorio e adattala al mio sitoCosa fa
Una pagina intera color carta, il fondo di uno studio di illuminazione inventato, Penumbra. Dietro a tutto, su un canvas, un tratteggio a matita copre la carta: una cella ogni 14 pixel, e in ogni cella fino a quattro tratti, uno per passata (la diagonale, l'altra diagonale, l'orizzontale, la verticale). Le celle vicine si toccano, così i tratti fanno righe lunghe e continue, con un tremito della mano diverso per ogni capo. Quante passate ha una cella dipende da quanto è scura la sua ombra: un'ombra fissa e morbida, come nuvole sulla carta, più scura verso gli angoli. Il puntatore è una lampada: intorno a lui l'ombra si schiarisce e i tratti si ritirano, dalla fine verso l'inizio; quando la luce passa oltre, la matita li ripassa uno a uno, sempre dallo stesso capo, e ogni tratto appena ripassato è vermiglio e si asciuga nel grigio in mezzo secondo, così dietro la lampada resta una scia d'inchiostro fresco. Un tocco sulla pagina fa un lampo: la luce si allarga a tre volte in un istante e sbianca mezza pagina, poi si ritira e tutto il disegno si rifà di rosso. In basso a destra Light dice quanta carta è in luce, con una riga vermiglia che si allunga; in basso a sinistra Move the lamp, tap for a flash. Al centro, il titolo: Light for homes, shops and galleries, poi due righe in Instrument Sans stretto (Where the light falls, the shadow draws back.) e una pillola scura (See the projects) con la freccia; intorno alle scritte la carta resta pulita, coi tratti che sfumano. All'apertura la matita copre la pagina dall'angolo in alto a sinistra, poi si accende la lampada. Quando nessuno muove il puntatore una lampada finta gira per la pagina e ogni tanto fa il suo lampo.
Come funziona
Le celle e le quattro passate
Su un canvas a tutta pagina (devicePixelRatio limitato a 2) la carta è divisa in celle di PASSO pixel. Ogni cella può avere quattro tratti: da un angolo in basso a quello in alto, l'altra diagonale, l'orizzontale a metà, la verticale a metà. Celle vicine si toccano, quindi i tratti diventano righe continue. Ogni capo ha un tremito fisso di mezzo pixel, calcolato una volta da un hash, così la mano è sempre la stessa.
L'ombra e la lampada
L'ombra fissa di ogni cella viene da due ottave di un rumore morbido più un velo verso gli angoli. A ogni fotogramma si toglie la luce della lampada, una gaussiana di raggio LUCE intorno al puntatore, e si moltiplica per la zona pulita delle scritte (una superellisse con la sua piuma). Ogni passata si accende oltre la sua soglia (0,12, 0,36, 0,6, 0,84): più buio, più passate.
La matita che ripassa
Ogni tratto ha un avanzamento da 0 a 1 che va verso quello voluto a PENNA tratti al secondo, e si disegna solo fino lì, sempre dal suo capo d'inizio: così si vede la matita che lo traccia. Quando la luce arriva il tratto si ritira più in fretta, dalla fine. Ogni tratto appena cominciato ha la sua luce a 1, che poi cala con e^(−3,2·t).
Il disegno e l'inchiostro fresco
Le quattro passate sono quattro stroke, con spessori appena diversi; le celle vicine alle scritte si disegnano dopo, con la loro trasparenza e sempre intere. Sopra, i tratti freschi nell'accento, raccolti in quattro mazzi di trasparenza, così sono quattro stroke in più e non migliaia.
Il lampo, la lampada finta, l'apertura
Un pointerdown sulla pagina (non sulla pillola) fa il lampo: una timeline GSAP porta un numero a 1 in 0,14 s e lo riporta a 0 in 1,6 s, e quel numero allarga la luce e schiarisce tutta la pagina. Dopo 2,4 s senza il puntatore vero la lampada segue una curva di Lissajous su una molla (MOLLA), e un giro di due volte LAMPO_OGNI fa due lampi. All'apertura le celle si accendono in diagonale dall'alto a sinistra; IntersectionObserver e visibilitychange fermano tutto quando la pagina non si vede.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PASSO | script.js | 14 | La misura di una cella del tratteggio, in px: più piccola, righe più fitte (sul telefono un poco meno). |
LUCE | script.js | 230 | Il raggio della luce della lampada, in px. |
OMBRA | script.js | 0.42 | Quanto è scura la pagina dove non arriva la luce: 0 chiara, 1 piena di tratti. |
PENNA | script.js | 6 | Quanto è veloce la matita a ripassare un tratto, in tratti al secondo. |
LAMPO_OGNI | script.js | 7 | Ogni quanti secondi la lampada finta fa un lampo. |
MOLLA | script.js | [70, 11] | La molla della lampada: quanto è rigida e quanto è frenata. |
SPESSORE | script.js | 1 | Lo spessore dei tratti, in px. |
Quando usarla
Come fondo della prima schermata di uno studio di illuminazione, di un fotografo, di un illustratore, di una galleria, di uno studio di architettura o di una rivista d'arte; in generale dietro a un titolo corto quando si vuole una carta disegnata a mano che reagisce. Il colore dei tratti e l'accento si cambiano nel CSS.
Sul telefono
Le stesse animazioni a misure adattate: le celle sono un poco più piccole, il titolo più piccolo e la zona pulita lo segue; la riga in basso a sinistra non c'è. Il dito sposta la lampada mentre tocca e trascina, un tocco fa il lampo; la pagina continua a scorrere in verticale.
Con il movimento ridotto
Il tratteggio è fermo, con la luce ferma in alto a sinistra: niente matita che ripassa, niente inchiostro fresco, niente lampi. Il titolo, la riga piccola e la pillola compaiono in dissolvenza.
Trappole
- Con un tratto per cella disegnato a sé, migliaia di stroke rallentano il telefono: ogni passata è un solo percorso, e l'inchiostro fresco va in quattro mazzi di trasparenza.
- Intorno alle scritte i tratti non si accorciano (diventerebbero puntini): sono interi e sfumano con la trasparenza.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,4 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.
