Attrezzi che cadono
Fisica, Hover
NuovaGratis
Torna alla libreria
I cursori che scappano
I colleghi sono cursori con un nome: girano per la tavola e si scansano quando il puntatore si avvicina; messi all’angolo o cliccati, si fermano e rispondono. Sopra il titolo il tuo cursore diventa un quadrato che inverte i colori.
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 cursors that run away</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a shared board: the studio's people are cursors with a name, and they keep away from yours -->
<main class="board" data-board>
<header class="top">
<p class="brand">Offcut</p>
<p class="top__line">The people at the studio</p>
</header>
<h1 class="headline" data-headline>Nobody here<br>likes to be<br>pointed at.</h1>
<!-- the colleagues: the script writes one for each name in its list -->
<div class="peers" data-peers aria-hidden="true"></div>
<!-- your cursor: an arrow with its tag; over the headline it becomes a square that inverts what is under it -->
<div class="lens" data-lens aria-hidden="true"></div>
<div class="lens-frame" data-lens-frame aria-hidden="true"><i></i><i></i><i></i><i></i></div>
<div class="you" data-you aria-hidden="true">
<svg class="you__arrow" viewBox="0 0 24 26" width="24" height="26"><path d="M2 2 L2 21 L7.4 16.2 L11 24 L14.6 22.4 L11.2 14.8 L18.6 14.4 Z"/></svg>
<span class="you__tag">You</span>
</div>
<p class="note" data-note>Go after them: they keep their distance. Corner one, or click it, and it answers.</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.
50 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 «I cursori che scappano» da Animorio e adattala al mio sitoCosa fa
La tavola di uno studio inventato, con un titolo enorme al centro: «Nobody here likes to be pointed at.». Intorno girano cinque cursori colorati, ognuno col nome di una persona dello studio, e il tuo è una freccia scura con l’etichetta «You». Se ti avvicini si spostano, tanto più quanto più sei vicino, e quando te ne vai tornano al loro giro. Contro un bordo non hanno dove andare: se ne tocchi uno, o ci clicchi vicino, si ferma, sobbalza e nel suo fumetto scrive una risposta. Sopra il titolo il tuo cursore si apre in un quadrato che inverte quello che ha sotto: il blu diventa giallo e le lettere bianche nere. Se nessuno muove il puntatore, una mano gira da sola e ogni tanto ne prende uno.
Come funziona
Il giro di ognuno
Ogni cursore ha un posto, in frazioni della tavola, e ci gira intorno: un seno lungo una sua linea, con un periodo fra 5 e 8 secondi, e un secondo seno più lento di traverso. Niente tween: a ogni fotogramma la posizione voluta si calcola dal tempo.
La spinta
Se il puntatore è a meno di 260 px, alla posizione voluta si aggiunge una spinta lungo la linea che li unisce, verso fuori: 190 px quando sono uno sull’altro, zero a 260. La distanza si misura dalla posizione che il cursore ha adesso, quindi scappa anche mentre lo insegui. I bordi della tavola fermano la posizione voluta: è lì che lo si mette all’angolo.
La molla
Il cursore non salta alla posizione voluta: ce lo porta una molla (rigidità 120, smorzamento 15), integrata a passi di un centoventesimo di secondo dentro il ticker di GSAP. La freccia si inclina con la velocità di lato. Vicino al bordo destro nome e fumetto passano a sinistra della freccia, con due soglie diverse per non tremare sulla linea.
Preso
Sotto i 26 px dal puntatore, o con un clic entro 46 px, il cursore è preso: la posizione voluta diventa quella in cui si trova, la freccia sobbalza, e una timeline scrive la risposta una lettera ogni 0,05 secondi, la tiene, la cancella un poco più in fretta. Poi torna libero, con quasi un secondo in cui non lo si può riprendere.
Il quadrato che inverte
Quando il puntatore entra nel rettangolo del titolo, un numero va da 0 a 1 in 0,4 secondi: è la scala di un quadrato bianco centrato sul puntatore, con mix-blend-mode: difference. Bianco meno blu dà giallo, bianco meno bianco dà nero. I quattro quadratini agli angoli stanno in un elemento a parte, senza fusione, e la freccia sfuma mentre il quadrato si apre.
Da sola
Dopo tre secondi senza puntatore parte una mano: segue una curva di Lissajous e i cursori la evitano come eviterebbero te. Ogni sei secondi e mezzo punta dritta al più vicino, che per quella volta non la vede arrivare, e lo prende. Al primo movimento vero sparisce.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TEAM | script.js | 5 | Nomi, colori, posti e risposte: una riga per persona. |
REACH, PUSH | script.js | 260, 190 | Da che distanza cominciano a scansarsi, e di quanto sono spinti quando il puntatore è su di loro, in pixel. |
SPRING | script.js | 120 / 15 | La molla che li porta, rigidità e smorzamento: meno smorzamento, più rimbalzo. |
DRIFT | script.js | [90, 56] | Quanto si allontanano dal loro posto girando: lungo la loro linea, e di traverso. |
CATCH, CLICK | script.js | 26, 46 | Sotto che distanza un cursore è preso, e fino a che distanza vale un clic. |
LETTER | script.js | 0.05 | I secondi per ogni lettera della risposta. |
IDLE, HUNT_EVERY | script.js | 3, 6.5 | Dopo quanti secondi senza puntatore la tavola gioca da sola, e ogni quanto la mano ne prende uno. |
LENS | script.js | [190, 0.26, 340] | Il quadrato che inverte: lato minimo, parte della larghezza della tavola, lato massimo. |
Quando usarla
Per la pagina di una squadra, di uno studio o di uno strumento dove si lavora in tanti: l’apertura di un «chi siamo», una pagina di assunzioni, il lancio di un prodotto collaborativo.
Sul telefono
I cursori scappano dal dito mentre lo si trascina, e un tocco su uno lo prende. Portata, spinta e giro si accorciano con la tavola; vicino al bordo nomi e fumetti si aprono a sinistra. Alzato il dito, dopo tre secondi riparte la mano che gioca da sola.
Con il movimento ridotto
I cursori stanno fermi al loro posto e non scappano: portando il puntatore su uno, o toccandolo, la sua risposta compare tutta insieme per due secondi. Il quadrato che inverte si apre e si chiude senza animazione, e la tavola non gioca da sola.
Trappole
- mix-blend-mode fonde con quello che sta sotto nello stesso contesto di impilamento: se il quadrato è figlio di un elemento con transform, quel genitore fa contesto a sé e il quadrato resta bianco. Qui è figlio diretto della tavola, e il transform ce l’ha lui.
- La spinta va misurata dalla posizione che il cursore ha adesso, non dal suo posto: misurata dal posto, il campo resta fermo lì e il cursore lo si raggiunge senza che si muova.
- Titolo, note e cursori hanno pointer-events: none: così il puntatore cade sempre sulla tavola e non parte un pointerleave a ogni elemento attraversato.
- Col dito pointerleave non arriva: al telefono la fine del tocco si legge da pointerup e pointercancel.
- Una molla integrata una volta per fotogramma esplode quando la scheda torna in primo piano dopo una pausa: il tempo del fotogramma va limitato (qui a 0,05 s) e diviso in passi piccoli.
- Chi è appena stato liberato ha un momento in cui non lo si può riprendere: senza, col puntatore fermo sopra, risponderebbe all’infinito.
Librerie
GSAP 3.15.0, Anybody (font variabile) 5.3.0, Geist Mono (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,0 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 30 settembre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
