I dorsi sullo scaffale

Hover, 3DGSAP, Solo CSSMediaPeso compresso: Demo 7,2 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal: uno scaffale di una piccola libreria, dorsi sottili a contorno uno accanto all’altro e l’ultimo libro appoggiato agli altri. Il dorso sotto il puntatore si inclina verso di te in 3D, come agganciato in cima da un dito, su una molla che passa il segno di un niente: si alza, mostra i bordi delle pagine e il titolo diventa arancione; i vicini oscillano appena. Il libro appoggiato si raddrizza e si rimette in fila; sotto, titolo, autore e prezzo scorrono dentro.

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>Spines on the shelf</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <header class="top">
      <span class="top__name">Sorrel Books</span>
      <span class="top__note">Second-hand poetry and essays</span>
    </header>

    <!-- one shelf of thin outlined spines. The spine under the pointer tips towards you, as if a finger hooked its top,
         and shows the edges of its pages; its neighbours lean a hair into the gap. The last book leans on the others
         and stands up when it is pointed at -->
    <section class="case" aria-label="The shelf">
      <div class="shelf" data-shelf></div>
      <div class="board" aria-hidden="true"></div>
      <div class="card" aria-live="polite">
        <span class="card__mask"><span class="card__title" data-title>Fourteen books on the shelf</span></span>
        <span class="card__mask"><span class="card__meta" data-meta>Point at a spine to take it out</span></span>
        <span class="card__mask card__mask--price"><span class="card__price" data-price></span></span>
      </div>
    </section>

    <p class="hint" data-hint>Point at a spine</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.

114 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 dorsi sullo scaffale» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo color carta c’è uno scaffale: una riga nera sottile con sotto il bordo della mensola, e sopra quattordici dorsi di libri disegnati a contorno, di spessori e altezze diverse, uno accanto all’altro, ognuno col titolo che scende lungo il dorso in Anybody stretto; alcuni hanno due fasce sottili vicino alla testa e al piede. L’ultimo libro, più basso, sta appoggiato in diagonale al vicino, in bilico su un angolo. Aprendo la pagina la mensola si allunga, i libri vengono posati uno dopo l’altro da sinistra con un piccolo rimbalzo, l’ultimo arriva dritto e poi cade nella sua inclinazione con un colpetto contro il vicino; poi il terzo libro esce da solo. Quando il puntatore passa su un dorso, il libro si alza di qualche pixel e si inclina verso chi guarda girando sul piede, con la prospettiva vera: il dorso si accorcia e sopra compaiono i bordi delle pagine, una fascia di righe sottili; passa il segno di un niente e si assesta. Il suo titolo diventa arancione e prende peso, e i due vicini oscillano appena, come se avessero sentito il colpo. Lasciandolo, il libro torna in fila con un piccolo rimbalzo. Passando sul libro appoggiato, invece, il libro si raddrizza e scivola in fila contro il vicino; lasciandolo ricade nella sua inclinazione e bussa contro il vicino. Sotto lo scaffale scorrono il titolo del libro in mano, grande, l’autore con l’anno in grigio e il prezzo a destra; a riposo la riga dice Fourteen books on the shelf.

Come funziona

I libri da una tabella

I libri sono una tabella (BOOKS): titolo, autore, anno, prezzo, spessore e altezza in pixel, e se il dorso ha le due fasce. Lo scaffale li mette in fila, sovrapposti di un pixel così i contorni non raddoppiano, e li centra; se lo spazio non basta, su uno schermo stretto toglie i libri dalla fine (il libro appoggiato resta sempre) finché la scala non scende sotto 0,82, poi scala tutto. Un titolo più lungo del suo dorso si stringe con l’asse wdth fino a 52, poi rimpicciolisce.

Un libro in 3D col CSS

Ogni libro è un elemento con transform-style preserve-3d e due facce: il dorso, e sopra di lui la testa del libro, un rettangolo profondo DEPTH pixel girato di 90 gradi all’indietro, con un gradiente a righe per i bordi delle pagine e backface-visibility hidden. Lo scaffale ha la prospettiva con l’occhio poco sotto la metà: da dritti la testa non si vede, inclinando il libro in avanti con rotationX la testa gira verso chi guarda e compare.

Il libro appoggiato

L’ultimo libro gira sul suo angolo in basso a sinistra (transformOrigin 0% 100%) di LEAN gradi e sta tanto lontano dal vicino quanto si sposta il suo angolo in alto: altezza per il seno dell’angolo, così lo tocca. Per raddrizzarlo GSAP porta insieme la rotazione a zero e x indietro della stessa misura, e il libro scivola in fila lungo il vicino.

Le molle e i vicini

Il libro sotto il puntatore va a rotationX meno TIP e y meno LIFT con back.out (SPRING è quanto passa il segno); tornando usa un back.out più vivace per il piccolo rimbalzo. I due vicini ricevono una spinta di un grado e mezzo su rotationZ che si spegne con elastic.out. Il libro appoggiato ricade con power2.in e due tween corti che fanno il colpetto contro il vicino.

La scheda sotto lo scaffale

A ogni cambio titolo, autore e anno, prezzo scorrono dalle loro maschere con yPercent, sfalsati. Il libro sotto il puntatore si trova dalla sua posizione lungo lo scaffale (e per quello appoggiato da tutto lo spazio che occupa), in una fascia un po’ più alta dei libri; poco oltre i due capi della fila vale il libro di quel capo. Le frecce della tastiera scorrono lo scaffale.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`BOOKS`	script.js	`[['The Salt Year', 'Ines Marrow', 1974, 14, 44, 262, true], …]`	I libri: titolo, autore, anno, prezzo, spessore e altezza in pixel, due fasce sul dorso o no. L’ultimo sta appoggiato.
`CURRENCY`	script.js	`'£'`	Il segno scritto prima del prezzo.
`TIP`	script.js	`24`	Quanto si inclina un libro verso di te, in gradi.
`LIFT`	script.js	`10`	Quanto si alza mentre si inclina, in pixel.
`LEAN`	script.js	`14`	Quanto è inclinato l’ultimo libro, in gradi.
`DEPTH`	script.js	`150`	Quanto sono profondi i libri, la fascia di pagine che si vede.
`SPRING`	script.js	`1.8`	Quanto il libro passa il segno inclinandosi.
`--accent`	style.css	`#ff5a1f`	Il colore del titolo del libro in mano.

Provali nel Playground

Quando usarla

Per una libreria, una casa editrice o una biblioteca, per la pagina delle letture di un blog, per un archivio di riviste, dischi o quaderni: ogni volta che una fila di titoli si guarda meglio di costa. Cambiando BOOKS diventa qualunque collana.

Sul telefono

Le stesse animazioni a misure adattate: sullo scaffale restano meno libri, abbastanza grandi da leggere i titoli, più quello appoggiato. Toccando un dorso il libro esce e resta fuori, trascinando il dito si passa agli altri, un tocco fuori dallo scaffale lo rimette a posto.

Con il movimento ridotto

Niente si inclina e i vicini non oscillano: il libro sotto il puntatore si alza appena con un passaggio dolce e il titolo diventa arancione; il libro appoggiato si raddrizza senza rimbalzo. La scheda sotto cambia in dissolvenza e la pagina compare già composta.

Trappole

Con l’occhio della prospettiva in cima allo scaffale si vedeva la testa di ogni libro, storta in modo diverso a destra e a sinistra, e lo scaffale sembrava in disordine: l’occhio sta poco sotto la metà, e la testa compare solo nel libro inclinato.
Il libro appoggiato, raddrizzandosi sul suo angolo, restava in piedi lontano dagli altri: insieme alla rotazione torna indietro di altezza per seno dell’angolo e scivola in fila.
Misurando i titoli prima che il carattere fosse caricato, i titoli lunghi uscivano dal dorso: la misura si rifà quando document.fonts è pronto.
Sul telefono, con tutti i quattordici libri, i titoli scendevano a sette pixel: lì si tolgono libri dalla fine finché restano leggibili.

Librerie

GSAP 3.15.0, Anybody (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 7,2 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.