Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
Il marchio che il puntatore cancella
La soglia di uno studio del suono, nello stile minimal: un grande marchio disegnato con una linea sola su fondo scuro. Dove passa il puntatore la linea si consuma come gesso sotto il pollice e sotto affiora una mappa a curve di livello in blu; la scia è granulosa, forte quando si va veloci, e svanisce da sola.
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 mark the pointer wipes away</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>
<!-- the threshold of a made-up sound studio. On a dark ground a large mark drawn in one thin line; where the pointer
passes, the line wears away and a map in blue shows through, then the trail fades and the mark closes again -->
<main class="soglia" data-soglia>
<canvas class="tela" data-tela aria-hidden="true"></canvas>
<div class="nome">
<h1 class="nome__marchio">Halde</h1>
<p class="nome__sotto">sound</p>
</div>
<p class="aiuto">Move across the mark</p>
</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.
16 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 marchio che il puntatore cancella» da Animorio e adattala al mio sitoCosa fa
La prima pagina di Halde, uno studio del suono inventato. Il fondo è quasi nero; al centro il marchio si disegna da solo, tratto dopo tratto, con una linea chiara sottile: un cerchio aperto in basso a destra, una vetta, un’onda sotto. Poi compaiono il nome, HALDE, largo e leggero, e la parola SOUND. Muovendo il puntatore sopra il marchio, la linea si consuma dove passa, come gesso sotto il pollice, e da sotto affiora una mappa a curve di livello in blu, che prima non si vedeva. La scia ha i bordi granulosi: è forte quando il puntatore corre e debole quando rallenta, e svanisce da sola in pochi decimi, così il marchio si richiude alle spalle. Se nessuno tocca niente, un puntatore fantasma gira sopra il marchio in un otto lento.
Come funziona
Tre tele
Il marchio è disegnato una volta in una tela nascosta, la mappa blu in un’altra; una terza tela, piccola, un quarto dello schermo, tiene la scia. A ogni fotogramma la scia si somma a sé stessa STRENGTH volte (con lighter, che si ferma al pieno), così anche una scia leggera conta; poi lo script compone: prima la mappa, tenuta solo dove c’è la scia (destination-in), poi la linea del marchio, tolta dove c’è la scia (destination-out, due volte, perché la linea sparisca prima che la mappa sia piena). Così la scia fa due cose insieme: cancella il segno e scopre quello che c’è sotto.
La scia che svanisce
A ogni fotogramma la tela della scia perde una parte di sé: un rettangolo con destination-out e opacità 1 meno PERSIST alla potenza del tempo passato in decimi di secondo, quindi dopo un decimo resta PERSIST della scia, a qualunque frequenza giri lo schermo. Poi il pennello si stampa lungo la strada fatta dall’ultimo fotogramma, abbastanza fitto da non lasciare buchi. Il pennello è un cerchio sfumato con un rumore sull’opacità, che dà i bordi granulosi.
Forte quando corri
La punta del pennello insegue il puntatore con FOLLOW, quindi resta un poco indietro e la scia si arrotonda. La velocità della punta, in schermi al secondo, divisa per SPEED_FULL, dice quanto dovrebbe essere forte la scia; la forza vera la rincorre in fretta quando sale (FADE_IN) e piano quando scende (FADE_OUT). Così un gesto veloce lascia un solco pieno e uno lento appena un velo.
Il marchio che si disegna
I tre tratti sono un arco e due percorsi in una scatola di 200 per 200, ingranditi al 78 per cento del lato corto dello schermo. All’inizio GSAP porta un numero da 0 a 1 in DRAW_IN secondi e ogni tratto si disegna con setLineDash, un poco dopo il precedente; il nome entra con le lettere una dopo l’altra. La mappa è fatta di linee chiuse ondulate intorno a tre colline, disegnate una volta sola.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PERSIST | script.js | 0.92 | Quanto della scia resta dopo un decimo di secondo. |
SIZE | script.js | 0.1 | Quanto è grande il pennello, in frazione dell’altezza dello schermo. |
FOLLOW | script.js | 7.5 | Quanto in fretta il pennello segue il puntatore. |
SPEED_FULL | script.js | 0.3 | La velocità, in schermi al secondo, a cui la scia è al massimo. |
FADE_IN | script.js | 12 | Quanto in fretta la scia cresce quando il puntatore accelera. |
FADE_OUT | script.js | 3 | Quanto in fretta svanisce quando rallenta. |
STRENGTH | script.js | 4 | Quanto forte la scia cancella la linea. |
DRAW_IN | script.js | 2.2 | I secondi che il marchio ci mette a disegnarsi. |
GHOST | script.js | true | Se nessuno muove il puntatore, uno fantasma gira sopra il marchio. |
Quando usarla
Per la prima pagina di uno studio del suono, di un’etichetta musicale, di uno studio di architettura del paesaggio o di un’agenzia che vuole una soglia calma con una sorpresa sotto. La mappa nascosta può essere qualunque cosa: una foto, un secondo marchio, il colore del progetto.
Sul telefono
Uguale, col marchio che prende la larghezza e il nome più piccolo: il dito fa da puntatore, e il puntatore fantasma gira finché non si tocca lo schermo.
Con il movimento ridotto
Il marchio è già disegnato, il nome già al suo posto e il puntatore fantasma non c’è; la scia c’è ancora sotto il dito o il mouse, ma svanisce subito.
Trappole
- La scia va sbiadita in base al tempo passato, non di una quantità fissa a fotogramma: su uno schermo a 120 Hz svanirebbe il doppio più in fretta.
- Il pennello va stampato più volte lungo la strada fatta fra due fotogrammi: stampato una volta sola, un gesto veloce lascia una fila di cerchi staccati.
- La tela della scia è piccola apposta: un quarto dello schermo basta, ingrandita diventa morbida da sola e costa sedici volte meno.
- Al primo movimento la punta va messa dove sta il puntatore: partendo dal centro, la prima scia attraversa mezzo schermo.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 4,9 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
