I simboli sotto il cursore

Testo, HoverGSAP, CanvasMediaPeso compresso: Demo 6,8 KBGSAP 28 KBGratisScarica lo zip

Un titolo grande le cui lettere, vicino a un cursore, diventano per un attimo i simboli di una parolaccia da fumetto, ognuno di un colore, e tornano lettere quando il cursore se ne va. Il simbolo è scelto fra quelli larghi quasi come la lettera, e le vicine scivolano invece di saltare. Sulla pagina ci sono due cursori con il nome: il tuo e quello di una collega che gira 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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Symbols under the cursor</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>
  <header class="bar">
    <a class="brand" href="#"><span class="brand__mark" aria-hidden="true"></span>Redline</a>
    <nav class="bar__nav" aria-label="Sections">
      <a href="#">Product</a>
      <a href="#">Pricing</a>
      <a href="#">Changelog</a>
    </nav>
    <a class="bar__login" href="#">Log in</a>
  </header>

  <main class="hero">
    <!-- the headline: the script splits it into letters; near a cursor they turn into symbols for a moment -->
    <h1 class="title" data-scramble>Edit together,<br>swear less.</h1>
    <p class="lead">Comments, suggestions and tracked changes for teams who write. Your cursor and theirs, on the same page.</p>
    <div class="actions">
      <a class="btn" href="#">Start a draft</a>
      <a class="btn btn--ghost" href="#">See it live</a>
    </div>
  </main>

  <!-- the two cursors: yours follows the mouse, the colleague's wanders over the page -->
  <div class="cursor" data-cursor="you" aria-hidden="true">
    <div class="cursor__body" data-body>
      <svg class="cursor__arrow" viewBox="0 0 24 28"><path d="M3 2.5 21 15.6l-7.7 1.1 4.6 8.4-3.3 1.8-4.6-8.4L3.6 23.7z"/></svg>
      <span class="cursor__chip">You</span>
    </div>
  </div>
  <div class="cursor cursor--mate" data-cursor="mate" aria-hidden="true">
    <div class="cursor__body" data-body>
      <svg class="cursor__arrow" viewBox="0 0 24 28"><path d="M3 2.5 21 15.6l-7.7 1.1 4.6 8.4-3.3 1.8-4.6-8.4L3.6 23.7z"/></svg>
      <span class="cursor__chip" data-mate-name>Mara</span>
    </div>
  </div>

  <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.

36 valori da cambiare

Apri il Playground

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 simboli sotto il cursore» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

La home di un’app inventata per scrivere e correggere testi in gruppo, Redline: in alto il marchio con un tratto rosso e tre link, al centro il titolo enorme «Edit together, swear less.», sotto una riga e due bottoni. Il cursore del mouse è disegnato dalla pagina: una freccia con l’etichetta «You», che si inclina quando corre di lato e si alza un poco quando va veloce. Da destra entra un secondo cursore, arancio, con l’etichetta «Mara», e percorre il titolo disegnando un otto. Quando un cursore arriva vicino alle lettere, quelle intorno, in un ovale più largo che alto, diventano simboli !@#$%^&*>< colorati, viola, azzurro, giallo, arancio, verde, mai lo stesso colore due volte di fila; ogni simbolo sale al suo posto da un poco più in basso. Le lettere non cambiano tutte insieme: ognuna aspetta pochi millesimi di secondo a caso. Ogni sedici pixel di strada del cursore i simboli cambiano di nuovo, e le lettere lasciate indietro tornano normali. Il simbolo scelto è quasi sempre largo più o meno come la lettera, quindi la riga si muove appena; quando, circa una volta su cinque, ne arriva uno più largo o più stretto, le lettere dopo scivolano di lato invece di saltare.

Come funziona

Le lettere in scatola

Il titolo viene diviso in parole, che non vanno mai a capo nel mezzo, e in lettere: ogni lettera è una scatola con dentro il carattere. La scatola serve a farla scivolare, il carattere a farlo saltare su. Il titolo tiene il suo testo intero in aria-label, per chi lo ascolta.

Simboli della stessa larghezza

Quando il carattere è caricato, uno script misura su un canvas, a 100 pixel, la larghezza di ogni lettera e di ogni simbolo, e mette in fila per ogni lettera i simboli dal più simile al più diverso. Di solito ne pesca uno fra i sei più vicini, col peso 1/(1 + differenza); con probabilità WILD ne prende uno più lontano, fino a 60 pixel di differenza, e in quel caso pesano di più proprio i più diversi.

L’ovale intorno al cursore

A ogni fotogramma si misura il centro di ogni lettera. Un cursore accende il gioco se sta dentro l’ovale REACH di almeno una lettera, in altezze di lettera; allora cambiano tutte le lettere dentro l’ovale più grande SPREAD. Ognuna si prenota per fra 0 e SWAP millisecondi, e chi esce dall’ovale torna lettera fra 0 e RESTORE. Ogni REROLL pixel di strada del cursore i simboli si rimescolano. Due lettere vicine non hanno mai lo stesso colore né lo stesso simbolo.

Niente salti

Quando un simbolo è più largo della lettera, tutto quello che viene dopo si sposta. Lo script legge offsetLeft di ogni lettera a ogni fotogramma: se è cambiato, la lettera prende uno spostamento uguale e contrario e ne recupera una parte DRIFT a ogni fotogramma. Così sullo schermo le lettere scivolano dove devono andare.

I due cursori

Il tuo cursore e quello della collega sono due elementi fissi mossi con un transform. Ognuno si inclina con la velocità laterale e si alza con quella totale, su una molla: rigidità 0,16 e smorzamento 0,8 a ogni sessantesimo, con la velocità che conta fino a 28 pixel a fotogramma. La collega percorre un otto sul titolo in LAP secondi, e il suo cursore è come il tuo: cambia anche lui le lettere.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SYMBOLS`	script.js	`!@#$%^&*><`	I simboli in cui si trasformano le lettere.
`COLORS`	script.js	`#744cf6, #3fa9f5, #e0a91f, #ff5004, #6fa52f`	I colori dei simboli; due lettere vicine non hanno mai lo stesso.
`REACH`	script.js	`0.6, 0.55`	Quanto deve avvicinarsi un cursore a una lettera perché il gioco cominci, in altezze di lettera: di lato e in alto o in basso.
`SPREAD`	script.js	`1.7, 1.3`	Quanto intorno al cursore cambiano le lettere, in altezze di lettera: di lato e in alto o in basso.
`REROLL`	script.js	`16`	I pixel di strada di un cursore prima che i simboli cambino di nuovo.
`SWAP`	script.js	`70`	L’attesa più lunga prima che una lettera cambi, in millisecondi.
`RESTORE`	script.js	`150`	E prima che torni lettera.
`HOP`	script.js	`0.09`	Da quanto sotto la riga parte un simbolo nuovo prima di salire al suo posto, in altezze di lettera.
`WILD`	script.js	`0.22`	La probabilità di un simbolo molto più largo o più stretto della lettera.
`DRIFT`	script.js	`0.24`	Quanta strada recuperano a ogni fotogramma le lettere spostate da un simbolo largo.
`TILT`	script.js	`7.2`	Quanto si inclina un cursore che corre di lato, in gradi; sopra il titolo un po’ di più.
`LIFT`	script.js	`1.9`	Quanto si alza un cursore veloce, in pixel.
`MATE`	script.js	`Mara`	Il nome della collega che gira sul titolo; vuoto, non c’è.
`LAP`	script.js	`13`	I secondi che la collega impiega per un giro.

Provali nel Playground

Quando usarla

Per il titolo d’apertura di un sito che ha a che fare con la scrittura, il gioco o la collaborazione: un’app, uno studio, una rivista. Vuole un titolo corto e grande, due righe al massimo, e un carattere senza grazie e pieno, dove i simboli non sembrano un errore. Su un testo lungo da leggere disturberebbe.

Sul telefono

Il tuo cursore non c’è, perché non c’è un mouse: il gioco lo fa il cursore della collega, che gira sul titolo da solo, e il dito appoggiato sul titolo, finché resta giù. Il titolo scende a 46-72 pixel.

Con il movimento ridotto

La collega non c’è e i cursori non si inclinano. Le lettere vicine al tuo cursore cambiano lo stesso, ma senza saltare e senza scivolare: il carattere e il colore cambiano sul posto.

Trappole

La larghezza dei simboli va misurata col carattere caricato: prima di document.fonts.ready il canvas misura un carattere di riserva e le file di simboli escono sbagliate. Finché il carattere non c’è, i simboli si pescano a caso.
Lo spostamento delle vicine si calcola da offsetLeft, che ignora i transform, e non da getBoundingClientRect, che conterrebbe lo spostamento che si sta smaltendo e lo raddoppierebbe.
Il centro di una lettera si legge dal suo riquadro meno lo spostamento in corso, altrimenti mentre scivola entra ed esce dall’ovale e sfarfalla.
Il canvas non conosce font-stretch al 92%: le larghezze si misurano al 100%. Le differenze fra lettera e simbolo restano quasi le stesse, ed è solo quella che conta.

Librerie

GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 6,8 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 2 ottobre 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.