L’indice che si mette a fuoco

Testo, TransizioniGSAP, Solo CSS, CanvasMediaPeso compresso: Demo 6,6 KBGSAP 28 KBGratisScarica lo zip

L’indice dei progetti di un portfolio: una colonna che scorre e tiene il progetto attuale al centro, scuro, mentre gli altri sbiadiscono; a ogni cambio i dati, la tavolozza e la copertina si sfocano e tornano a fuoco.

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 index that comes into focus</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the project index of a made-up designer. On the right the projects stand in a column that slides so the current
       one is always in the middle, sharp and dark, and the others fade; on the left the facts of the project and its
       palette, in the middle its cover. At every change the facts and the cover blur out and come back in focus -->
  <main class="indice" data-indice>
    <header class="testata">
      <p class="firma">KAI VERO<sup>&reg;</sup></p>
      <p class="sopra">Index</p>
    </header>

    <aside class="fatti" data-fatti aria-live="polite">
      <dl>
        <div><dt>Role</dt><dd data-campo="ruolo">Design, art direction</dd></div>
        <div><dt>Launch</dt><dd data-campo="anno">March 2019</dd></div>
        <div><dt>Recognition</dt><dd data-campo="premi">Type Directors Club</dd></div>
      </dl>
      <div class="tavolozza">
        <p class="tavolozza__nome">Palette</p>
        <div class="tavolozza__campioni" data-campioni></div>
      </div>
    </aside>

    <figure class="copertina" data-copertina>
      <canvas class="copertina__tela" data-tela aria-hidden="true"></canvas>
    </figure>

    <div class="colonna" data-colonna>
      <ol class="voci" data-voci>
        <li class="voce" data-ruolo="Design, art direction" data-anno="March 2019" data-premi="Type Directors Club" data-palette="#f6efe6 #ff4b3e #181818" data-forma="luna">
          <button type="button"><span class="voce__tipo">Brand &middot; editorial</span><span class="voce__nome">Paper Moons</span><span class="voce__frase">A lunar calendar printed on tracing paper.</span></button>
        </li>
        <li class="voce" data-ruolo="Design, development lead" data-anno="June 2020" data-premi="Site of the Day" data-palette="#e9e4da #181818 #ff4b3e" data-forma="solchi">
          <button type="button"><span class="voce__tipo">Label &middot; website</span><span class="voce__nome">Low Tide Records</span><span class="voce__frase">A record label that only releases at high tide.</span></button>
        </li>
        <li class="voce" data-ruolo="Product design" data-anno="January 2021" data-premi="Product of the Week" data-palette="#eef0f6 #3b5bdb #0b1b5b" data-forma="griglia">
          <button type="button"><span class="voce__tipo">Product &middot; launch</span><span class="voce__nome">Field Notes Co.</span><span class="voce__frase">Notebooks with a ruler printed on the spine.</span></button>
        </li>
        <li class="voce" data-ruolo="App design" data-anno="May 2022" data-premi="App of the Month" data-palette="#1d1b18 #f2b705 #f4f2ec" data-forma="onde">
          <button type="button"><span class="voce__tipo">Travel &middot; app</span><span class="voce__nome">Sunday Ferry</span><span class="voce__frase">Timetables for a ferry that runs once a week.</span></button>
        </li>
        <li class="voce" data-ruolo="Design, illustration" data-anno="September 2023" data-premi="Honourable mention" data-palette="#f3f1ea #2f9e44 #1b4d2a" data-forma="foglie">
          <button type="button"><span class="voce__tipo">Studio &middot; website</span><span class="voce__nome">Greenhouse 9</span><span class="voce__frase">A plant nursery with a room for every season.</span></button>
        </li>
        <li class="voce" data-ruolo="Campaign, motion" data-anno="April 2024" data-premi="Poster of the Year" data-palette="#191919 #e64980 #f59f00" data-forma="cerchi">
          <button type="button"><span class="voce__tipo">Music &middot; campaign</span><span class="voce__nome">Neon Choir</span><span class="voce__frase">Posters for a choir that sings in car parks.</span></button>
        </li>
        <li class="voce" data-ruolo="Brand identity" data-anno="October 2025" data-premi="Website of the Day" data-palette="#f1ede4 #1971c2 #f59f00" data-forma="righe">
          <button type="button"><span class="voce__tipo">Hospitality &middot; brand</span><span class="voce__nome">Blue Hour Hotel</span><span class="voce__frase">Rooms named after the minutes after sunset.</span></button>
        </li>
        <li class="voce" data-ruolo="Archive design" data-anno="February 2026" data-premi="In progress" data-palette="#efe9df #e8590c #181818" data-forma="scala">
          <button type="button"><span class="voce__tipo">Archive &middot; collection</span><span class="voce__nome">Orange Steps</span><span class="voce__frase">Every staircase of a hill town, one a day.</span></button>
        </li>
      </ol>
    </div>

    <p class="aiuto">Scroll, use the arrows or pick a project</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.

47 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 «L’indice che si mette a fuoco» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

L’indice dei lavori di Kai Vero, un designer inventato, su tre colonne. A destra i progetti stanno in colonna, ognuno col suo genere, il nome e una riga: il progetto attuale è al centro, nero, e gli altri sbiadiscono man mano che si allontanano; la colonna non finisce mai. A sinistra ci sono i dati del progetto, il ruolo, l’uscita, il riconoscimento, e i suoi tre colori; in mezzo la sua copertina. Con la rotella, le frecce, trascinando o cliccando un progetto, la colonna scivola di un passo e si ferma morbida; intanto i dati, i colori e la copertina si sfocano in un attimo, cambiano mentre non si leggono e tornano a fuoco piano. All’arrivo la pagina compare, i progetti appaiono uno alla volta dal centro verso i bordi e i colori uno dopo l’altro. Se nessuno la tocca, l’indice va avanti da solo.

Come funziona

Una colonna a passi

Ogni progetto sta al centro della colonna e lo script lo sposta in su o in giù di tanti passi quanto dista dal progetto attuale, alto --passo. La distanza è presa sul giro più corto, con un modulo su tutti i progetti: così la colonna non ha fine e il primo segue l’ultimo.

La rincorsa

La rotella, i tasti e i clic spostano un obiettivo; a ogni fotogramma la colonna ne copre FOLLOW della strada che manca, come nel sito, quindi parte svelta e arriva piano. L’opacità di ogni progetto scende con la distanza fino a FADED. A fine gesto si aggancia a un progetto, e un gesto piccolo vale comunque un passo.

La sfocatura

Quando cambia il progetto al centro, i dati e la copertina vanno a blur di BLUR pixel in BLUR_OUT secondi con power2.out; dopo SWAP_AT secondi, quando non si legge più niente, lo script scrive le parole nuove, disegna la copertina e li riporta a fuoco in BLUR_IN secondi. È il trucco del sito: il testo cambia mentre è sfocato, quindi non si vede mai lo scatto.

L’arrivo

La pagina compare in 0,62 secondi; i progetti appaiono in 0,44 secondi uno ogni ENTRY_STAGGER, cominciando da quello al centro e allargandosi, e i colori della tavolozza uno ogni 0,05. Il valore d’entrata di ogni progetto moltiplica la sua opacità, così l’arrivo e la distanza dal centro lavorano insieme.

Le copertine

Le copertine sono disegnate dallo script su un canvas, con le forme e i colori di ogni progetto letti dagli attributi data- della sua voce: per un progetto nuovo basta aggiungere una voce con i suoi dati.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`FOLLOW`	script.js	`0.22`	Quanta strada copre la colonna a ogni fotogramma (nel sito 0,22).
`FADED`	script.js	`0.24`	Quanto si vedono i progetti lontani dal centro (nel sito 0,24).
`BLUR`	script.js	`8`	Di quanti pixel si sfocano i dati al cambio (nel sito 8).
`BLUR_IN`	script.js	`0.85`	Quanto ci mettono a tornare a fuoco (nel sito 0,85).
`ENTRY_STAGGER`	script.js	`0.07`	Lo stacco fra un progetto e l’altro all’arrivo (nel sito 0,07).
`AUTO`	script.js	`3.4`	I secondi di quiete prima che l’indice vada avanti da solo; 0 per mai.

Provali nel Playground

Quando usarla

Per l’elenco dei lavori di un portfolio, di uno studio o di un archivio: pochi progetti, ognuno con qualche dato e un’immagine, da scorrere uno alla volta.

Sul telefono

Uguale, su una colonna sola: la copertina in alto, i dati sotto e i progetti in fondo, che scorrono col dito o con un tocco.

Con il movimento ridotto

La colonna salta da un progetto all’altro senza scivolare e i dati cambiano senza sfocarsi; niente arrivo e niente avanzamento da solo.

Trappole

Le parole nuove vanno scritte quando la sfocatura è già forte, non subito: scritte al primo fotogramma, si vede il testo cambiare prima che si sfochi.
La sfocatura di ritorno va fermata se arriva un altro cambio prima della fine, con killTweensOf e uccidendo la chiamata in attesa: altrimenti la scrittura vecchia arriva dopo quella nuova.
La distanza dal centro va presa sul giro più corto: senza il modulo, passando dall’ultimo progetto al primo la colonna torna indietro attraverso tutti.
Il passo della colonna va letto dal CSS a ogni fotogramma (o a ogni cambio di misura): al telefono è diverso, e un numero fisso nello script sballerebbe le posizioni.

Librerie

GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0, Geist (font variabile) 5.3.0.

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

Collaudo

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