Il menu di condivisione a moduli
Menu, Transizioni, Hover, Testo
NuovaGratis
Tutti i componenti
Il menu in caratteri ASCII
Il menu a tutto schermo di uno studio che fa strumenti per sviluppatori, scritto in caratteri: premendo Menu un’onda di caratteri corre fuori dal pulsante per tutto lo schermo e, dove passa, lascia le voci in grandi lettere fatte di lettere piccole, scelte una per una per la loro forma.
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 ASCII menu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the full-screen menu of a small studio that makes tools for developers, set in characters. At rest only a
Menu button. Pressed, a wave of characters runs out of the button across the screen and, where it has passed,
the links are left drawn in big letters made of small ones: every character is chosen for its shape, so the
slashes follow the diagonals and the bars the straight strokes -->
<div class="term" data-frame>
<canvas class="term__screen" aria-hidden="true" data-screen></canvas>
<nav class="term__menu" id="ascii-menu" aria-label="Main" data-menu inert>
<ul class="term__list">
<li><a class="word" href="#work" data-word data-note="selected work">Work</a></li>
<li><a class="word" href="#tools" data-word data-note="open source" aria-current="page">Tools</a></li>
<li><a class="word" href="#notes" data-word data-note="essays, changelogs">Notes</a></li>
<li><a class="word" href="#studio" data-word data-note="people and place">Studio</a></li>
<li><a class="word" href="#contact" data-word data-note="say hello">Contact</a></li>
</ul>
</nav>
<button class="key" type="button" aria-expanded="false" aria-controls="ascii-menu" data-toggle data-autoclic>
<span class="key__word" aria-hidden="true" data-key-word>Menu</span>
<svg class="key__icon" viewBox="0 0 16 12" aria-hidden="true">
<path data-key-line d="M1 2h14"/>
<path data-key-line d="M1 6h14"/>
<path data-key-line d="M1 10h14"/>
</svg>
<span class="sr" data-toggle-name>Open the menu</span>
</button>
</div>
</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.
20 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 menu in caratteri ASCII» da Animorio e adattala al mio sitoCosa fa
Su una pagina nera c’è solo un pulsante scuro, «Menu» in un carattere a spaziatura fissa con tre righe. Premuto, il pulsante scivola nell’angolo in alto a destra e la sua parola diventa «Close» passando per caratteri a caso, mentre le tre righe si accorciano a scaletta. Dal pulsante parte un’onda di caratteri che corre per tutto lo schermo: ogni posto lampeggia un istante e si ferma, e dove l’onda è passata restano le voci, WORK, TOOLS, NOTES, STUDIO e CONTACT, in lettere alte sei righe fatte di caratteri piccoli: i trattini, le barre, le parentesi e i cancelletti seguono la forma delle lettere. Accanto a ognuna c’è una nota grigia, e qualche crocetta tenue segna la griglia. La pagina in cui sei, TOOLS, è arancione. Sotto il puntatore i caratteri vuoti si agitano in un piccolo campo; la voce indicata lampeggia in arancione partendo dal punto in cui è entrato il puntatore e le altre si spengono. Dalla tastiera la voce ha intorno dei segni di taglio disegnati coi caratteri. Scegliendo una voce questa si rovescia su un blocco arancione, poi l’onda torna indietro e i caratteri spariscono verso il pulsante, che torna al centro. Si chiude anche con Esc o col pulsante.
Come funziona
La forma di ogni carattere
All’inizio ogni carattere della serie (punti, trattini, barre, parentesi, cancelletto…) si disegna su un canvas nascosto e se ne misura la copertura in sei zone: due in larghezza e tre in altezza. Sono sei numeri da 0 a 1 che dicono dove il carattere ha inchiostro: la barra / in alto a destra e in basso a sinistra, il trattino basso solo in fondo.
Le lettere grandi, posto per posto
Le voci si scrivono in maiuscolo, nero 800, su un altro canvas nascosto tre volte più fine della griglia, alte TALL righe. Per ogni posto della griglia si misurano le stesse sei zone e si sceglie il carattere che ci somiglia di più (la distanza fra i sei numeri, con il pieno portato alla copertura del carattere più denso). Così i bordi in diagonale diventano barre, i tratti dritti parentesi e l’interno cancelletti.
L’onda
Ogni posto sa quanto dista dal pulsante: l’onda ci arriva dopo distanza / SPEED secondi, più un niente a caso. Per SCRAMBLE secondi il posto mostra caratteri a caso (cambiano 24 volte al secondo, da un hash del posto e del tempo), poi il suo carattere finale; i posti vuoti lampeggiano solo in parte (GLITTER). Alla chiusura è lo stesso al contrario, dal più lontano al pulsante.
Il puntatore
Nei posti vuoti entro LENS pixel dal puntatore compaiono caratteri di una scala di densità, più fitti vicino a lui, che si spengono in meno di un secondo quando si ferma. La voce indicata riparte a lampeggiare dalla colonna in cui è entrato il puntatore, più tardi le colonne più lontane, e le altre si fanno grigie.
Link veri sopra il disegno
Le voci sono link veri, trasparenti, messi sopra il rettangolo della loro parola. Il focus da tastiera disegna i segni di taglio coi caratteri + - |; le frecce vanno da una voce all’altra, Tab gira fra il pulsante e le voci, Esc chiude e il focus torna al pulsante. Il canvas si ridisegna solo mentre qualcosa si muove.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SPEED | script.js | 950 | Quanto corre l’onda di caratteri, in pixel al secondo. |
SCRAMBLE | script.js | 0.24 | I secondi che un carattere lampeggia prima di fermarsi. |
TALL | script.js | 7 | Quante righe è alta al massimo una parola grande (si abbassa da sola se non ci sta). |
WEIGHT | script.js | 800 | Il peso delle lettere da cui sono ritagliate le parole grandi (da 100 a 800). |
LENS | script.js | 64 | Il raggio del campo di caratteri che il puntatore smuove, in pixel. |
GLITTER | script.js | 0.45 | Quanti posti vuoti lampeggiano al passaggio dell’onda (0 nessuno, 1 tutti). |
Quando usarla
Per il sito di uno studio di sviluppo, di uno strumento per programmatori, di un’app tecnica o di un portfolio che vuole un carattere forte. Va bene con poche voci corte, fino a cinque o sei: le parole grandi hanno bisogno di spazio.
Sul telefono
La griglia si rifà alla larghezza dello schermo e le parole grandi si abbassano di una riga perché ci stiano; l’onda parte lo stesso dal pulsante nell’angolo. Il tocco sceglie la voce; il campo che segue il puntatore segue anche il dito.
Con il movimento ridotto
Niente onda e niente caratteri che lampeggiano: le voci compaiono già scritte in dissolvenza, e il pulsante va nell’angolo senza scivolare. Le voci indicate si accendono e le altre si spengono come sempre, senza lampeggiare.
Trappole
- Con tutti i caratteri della tastiera (@, $, &, M, W) le lettere grandi si riempivano di simboli diversi e diventavano rumore: la serie è stata ridotta a quelli con una forma netta, e il più denso, il cancelletto, fa l’interno.
- La parte alta delle lettere sporgeva di un soffio nella riga sopra e lasciava una fila di puntini: ora si leggono soltanto le righe della parola.
- Le parole alte quattro righe non si leggevano: la griglia è passata a caratteri più piccoli (9,5 pixel su righe da 10), così le parole hanno sei o sette righe e le lettere tornano lettere.
- Le misure dei caratteri vanno prese dopo che il carattere è arrivato (document.fonts.load): prima il canvas usa un carattere di riserva, e forme e larghezze sono sbagliate.
- Il pulsante tornava al centro mentre l’onda rientrava ancora nel suo angolo: ora parte solo quando l’ultimo carattere è sparito.
Librerie
GSAP 3.15.0, JetBrains Mono (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 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.
