La tavolozza che suona

Ricerca, Transizioni, Fisica, TestoGSAP, CanvasImpegnativaPeso compresso: Demo 17 KBGSAP 28 KBGratisScarica lo zip

La tavolozza dei comandi di un programma per montare podcast, dove ogni comando è una clip col suo audio disegnato sotto: mentre scrivi suona tanto più forte quanto più ti somiglia, e i più forti salgono in cima. Una riga che deve scavalcare le altre viaggia come suono, con le parole spente, e le ritrova al posto nuovo; il comando scelto suona in ambra e, lasciato, si spegne piano come la lancetta di un vu-meter.

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>The palette that plays</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/radio-canada@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the command palette of a podcast editor. Every command is a clip of sound: the better it matches what is
         typed, the louder its waveform plays, and the loudest go to the top. The command picked plays in amber;
         moving on, its sound fades out behind you. The rows are made by the script from the list in script.js -->
    <div class="desk" data-desk data-autoclic>
      <button class="open" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="cmd-dialog" aria-keyshortcuts="Control+K Meta+K" data-open>
        <svg class="open__lens" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.5 4.5a6 6 0 1 0 0 12a6 6 0 1 0 0-12zM15 15l4.5 4.5"/></svg>
        <span class="open__text">Commands</span>
        <span class="keys" aria-hidden="true"><kbd class="key" data-mod>Ctrl</kbd><kbd class="key">K</kbd></span>
      </button>

      <div class="pal" id="cmd-dialog" role="dialog" aria-modal="true" aria-label="Commands" data-pal hidden>
        <div class="pal__head">
          <svg class="pal__lens" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.5 4.5a6 6 0 1 0 0 12a6 6 0 1 0 0-12zM15 15l4.5 4.5"/></svg>
          <input class="pal__input" type="text" role="combobox" aria-expanded="true" aria-controls="cmd-list" aria-autocomplete="list" aria-label="Search commands" placeholder="Search commands…" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" enterkeyhint="go" data-input>
          <span class="pal__caret" aria-hidden="true" data-caret></span>
          <kbd class="key key--word" aria-hidden="true">esc</kbd>
        </div>

        <div class="pal__list" id="cmd-list" role="listbox" aria-label="Commands" data-list>
          <canvas class="pal__wave" aria-hidden="true" data-wave></canvas>
          <div class="pal__none" aria-hidden="true" data-none>
            <p class="none__what" data-none-what></p>
            <p class="none__tip">Try a word like noise, chapter or export.</p>
          </div>
        </div>

        <div class="pal__foot">
          <p class="pal__hints" data-hints>
            <span class="hint hint--keys"><kbd class="key key--icon"><svg viewBox="0 0 24 24"><path d="M12 18.5v-13M7 10l5-5 5 5"/></svg></kbd><kbd class="key key--icon"><svg viewBox="0 0 24 24"><path d="M12 5.5v13M7 14l5 5 5-5"/></svg></kbd>Move</span>
            <span class="hint hint--keys"><kbd class="key key--icon"><svg viewBox="0 0 24 24"><path d="M18.5 5.5v7H6.5M10.5 8.5l-4 4 4 4"/></svg></kbd>Run</span>
            <span class="hint hint--keys"><kbd class="key key--word">esc</kbd>Close</span>
            <span class="hint hint--touch">Tap a command to run it</span>
          </p>
          <p class="pal__done" data-done>
            <svg class="pal__tick" viewBox="0 0 24 24" aria-hidden="true" data-done-tick><path d="M5.5 12.5l4.2 4.2L18.5 7.5"/></svg>
            <svg class="pal__info" viewBox="0 0 24 24" aria-hidden="true" data-done-info><path d="M12 3.5a8.5 8.5 0 1 0 0 17a8.5 8.5 0 1 0 0-17zM12 11v5.5M12 7.6v.4"/></svg>
            <span data-done-text></span>
          </p>
        </div>
      </div>

      <p class="sr" role="status" aria-live="polite" data-said></p>
    </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.

98 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 «La tavolozza che suona» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero un pulsante scuro con una lente, la scritta Commands e due tasti disegnati, Ctrl e K (sul Mac il segno di Comando e K). Premuto, o con Ctrl K da qualunque punto, sotto si apre la tavolozza: un campo Search commands… col tasto esc e, sotto, i comandi in tre gruppi, Clip, Sound ed Episode, ognuno con la sua icona e a destra le sue scorciatoie; Publish to feed è spento e dice Export first. Sotto ogni riga c’è il suo audio, una forma d’onda a barrette fatta di sillabe, diversa per ogni comando: si sente piano sotto le parole, si apre nello spazio fra il nome e i tasti e tace sotto i tasti. Il comando scelto suona in ambra, con l’audio che parte da sinistra e corre in un attimo fino in fondo. Scrivendo, ogni comando suona tanto più forte quanto meglio contiene le lettere scritte, che diventano color miele: i più forti salgono in cima al loro gruppo e il gruppo col comando più forte in cima alla lista. Le righe che restano in ordine scivolano al posto nuovo con le parole accese; una riga che deve scavalcarne altre spegne le parole, e il suo audio vola da solo al posto nuovo mescolandosi a quelli che incontra, poi le parole tornano lì. Quelle che non c’entrano più spengono le parole e il loro audio cade a zero. Con le frecce o col puntatore la scelta passa a un altro comando, che si accende da sinistra, mentre il suono di quello lasciato si spegne piano dietro di lei, come una lancetta che ricade: tenendo premuta la freccia resta una scia. Invio esegue: una testina attraversa la riga e l’audio dietro di lei diventa bianco come renderizzato, i tasti lasciano il posto a una spunta che si disegna, sotto compare per esempio Loudness set to −16 LUFS, e la tavolozza si chiude. Su Publish to feed la riga scuote la testa e sotto compare perché non si può. Se nulla corrisponde la tavolozza lo dice e propone qualche parola. Esc o un clic fuori la chiudono e il fuoco torna al pulsante.

Come funziona

Una voce per ogni comando

Ogni comando ha la sua forma d’onda, sempre uguale: dal suo nome nasce un numero che fa partire un generatore casuale, che mette in fila sillabe (campane di larghezza e altezza diverse) e qualche pausa. La forma si campiona in barrette larghe 2 pixel ogni 4, quante ne stanno nella riga, e si ricampiona quando la finestra cambia misura.

Più somiglia, più suona

La ricerca vuole tutte le lettere scritte nel nome, in ordine, e sceglie con la programmazione dinamica il modo di trovarle che vale di più: un punto per lettera, quattro se segue la lettera prima, tre se comincia una parola, due se comincia il nome, un poco meno per ogni lettera saltata. Il punteggio diviso per quello del migliore, elevato a 1,6, è il volume della riga; i comandi si ordinano per punteggio dentro il gruppo e i gruppi per il loro comando migliore.

Le barrette come un vu-meter

Ogni barretta ha la sua altezza e il suo calore (da grigio ad ambra), che inseguono il loro bersaglio con una legge esponenziale: veloce a salire (0,03 secondi) e lenta a scendere (TRAIL), come gli strumenti che misurano l’audio. La scelta accende le barrette da sinistra una dopo l’altra in SWEEP secondi. Le barrette si disegnano su una sola tela sotto le righe, sommando la luce dove due audio si incrociano, e solo finché qualcosa si muove; sotto le parole valgono il 32 per cento, sotto i tasti niente.

Scivolare o volare come suono

A ogni lettera le righe e i nomi dei gruppi prendono il posto nuovo su una molla (SPRING). Fra quelli che restano, la sequenza crescente più lunga dei vecchi posti tiene l’ordine e scivola con le parole accese, perché non può incrociare niente; gli altri spengono le parole in 0,06 secondi e viaggiano come solo audio. Una riga riaccende le parole solo quando è arrivata e nessuna parola accesa sta passando o sta per passare dove si trova; l’altezza della lista segue la stessa molla e non taglia mai una parola accesa.

Eseguire

Invio o un clic fanno partire una timeline: la testina attraversa la riga in RUN secondi, l’audio dietro di lei diventa bianco, i tasti svaniscono e una spunta si disegna con stroke-dashoffset, sotto compare cosa è stato fatto, e dopo HOLD secondi la tavolozza si chiude. Scrivendo o muovendo la scelta in quel momento la timeline si ferma e tutto torna com’era.

Un combobox vero

Il campo ha role combobox, aria-controls sulla lista e aria-activedescendant sulla riga scelta; la lista è un listbox con un group per ogni gruppo e le righe sono option con aria-selected, aria-disabled per quella spenta e aria-keyshortcuts. Un’area aria-live dice quanti comandi ci sono e cosa è stato fatto. La finestra è un dialog modale: Tab resta nel campo, Esc o un clic fuori chiudono e il fuoco torna al pulsante, con l’anello solo per chi usa i tasti.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SHOWN`	script.js	`7`	Quanti comandi mostra al massimo la tavolozza.
`RESTING`	script.js	`2`	Quanti comandi di ogni gruppo mostra a campo vuoto.
`TRAIL`	script.js	`0.32`	Quanto piano si spegne il suono di una riga lasciata dalla scelta, in secondi.
`SWEEP`	script.js	`0.16`	I secondi in cui il suono corre da sinistra a destra nella riga scelta.
`SPRING`	script.js	`[700, 50]`	La molla che porta le righe al posto nuovo: rigidità e smorzamento.
`RUN`	script.js	`0.45`	I secondi in cui la testina attraversa un comando eseguito.
`HOLD`	script.js	`0.8`	Quanto resta aperta la tavolozza a dire cosa è stato fatto, in secondi.
`COMMANDS`	script.js	`[['Clip', 'Split clip at playhead', 'S', 'Clip split at 12:48', 'split'], …]`	I comandi: gruppo, nome, scorciatoia (mod è Cmd sul Mac e Ctrl altrove), cosa dice il piede quando lo esegue, icona.
`LOCKED`	script.js	`['Publish to feed', 'Export first', 'Export the episode before publishing it']`	Un comando non ancora disponibile: il nome, la nota a destra e il perché.

Provali nel Playground

Quando usarla

Per la tavolozza dei comandi di un’app che lavora col suono (podcast, musica, video, radio), o di qualunque strumento dove si cerca un’azione scrivendo: il volume dice a colpo d’occhio quanto un comando somiglia a quello che hai scritto.

Sul telefono

La tavolozza prende la larghezza dello schermo meno i margini. Sui touch le scorciatoie spariscono (non c’è una tastiera da usare) e il loro posto va all’audio; il piede dice Tap a command to run it, le righe sono alte 44 pixel e un tocco esegue. Il campo ha testo di 17 pixel, così iPhone non ingrandisce la pagina.

Con il movimento ridotto

Niente scivola e niente cresce: le righe che cambiano posto si spengono e si riaccendono al posto nuovo, l’audio compare e scompare insieme alle parole senza alzarsi, la scelta cambia colore con una dissolvenza e la testina non corre: l’audio diventa bianco tutto insieme.

Trappole

Con le righe riordinate per punteggio, scivolando si incrociavano e le parole si sovrapponevano. Ora scivola con le parole accese solo la sequenza crescente più lunga dei vecchi posti, che non può incrociare niente; le altre righe viaggiano come solo audio sulla tela, che sta sotto le parole.
Una riga nuova accendeva le parole appena arrivata, e subito dopo una riga che scivolava le passava sopra. Ora una riga aspetta finché nessuna parola accesa occupa, o deve ancora attraversare, il tratto fra dove è e dove va.
L’altezza della lista, animata a parte, si accorciava prima che le righe salissero e tagliava per un attimo l’ultima: ora segue la stessa molla e non scende mai sotto il fondo dell’ultima parola accesa.
Le barrette più basse, larghe due pixel e alte due, sembravano una fila di puntini: il silenzio non disegna niente e il suono più basso è comunque un trattino alto almeno tre pixel e mezzo.
Il suono pieno sotto le parole rendeva difficile leggerle: sotto il nome vale un terzo e sotto i tasti niente, misurando la fine del testo vero con un Range (la casella del nome è più larga delle sue parole).
Togliendo una riga scelta senza toglierle aria-selected, rientrando ne risultavano due scelte: ora una riga che se ne va perde la scelta, e una prova a raffica controlla che ne resti sempre una sola.

Librerie

GSAP 3.15.0, Radio Canada (font variabile) 5.3.0.

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

Collaudo

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