Nastro che accelera con lo scorrimento
Scroll, Testo, Hover
Gratis
Torna alla libreria
La parola sotto la pellicola
Nello stile minimal: una pagina di righe sottili con una parola nascosta dentro, e sopra una pellicola nera piena di fessure. Il puntatore la fa scorrere e la gira: storta, fra le fessure corrono larghe bande di moiré; dritta, scatta a registro e la parola si accende chiara e prende peso.
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 word under the film</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the page of fine lines with a word hidden in it, and the film of slits that reads it, on one canvas -->
<canvas class="page" data-page role="img" aria-label="A page of fine lines and a dark film of slits: held level over the page, the film shows a hidden word"></canvas>
<!-- the mark: a small grate of grey lines, and a darker one between them that turns with the film -->
<header class="mark" data-label>
<svg class="mark__grate" viewBox="0 0 16 16" aria-hidden="true">
<g class="mark__back">
<rect x="0" y="1.0" width="16" height="1"/>
<rect x="0" y="4.2" width="16" height="1"/>
<rect x="0" y="7.4" width="16" height="1"/>
<rect x="0" y="10.6" width="16" height="1"/>
<rect x="0" y="13.8" width="16" height="1"/>
</g>
<g class="mark__film" data-mark-film>
<rect x="2" y="2.6" width="12" height="1"/>
<rect x="2" y="5.8" width="12" height="1"/>
<rect x="2" y="9.0" width="12" height="1"/>
<rect x="2" y="12.2" width="12" height="1"/>
</g>
</svg>
<span class="mark__name" data-rise>Scrim</span>
</header>
<!-- the hint: what to do, and what to do once the film moves -->
<p class="hint" data-label>
<span class="hint__roll">
<span class="hint__line">Move the pointer to slide the film.</span>
<span class="hint__line">Hold it level, and the word appears.</span>
</span>
</p>
<!-- the reading: how far the film is turned, then in register -->
<p class="readout" data-label>
<span class="readout__roll">
<span class="readout__line" data-tilt>tilt 0.0°</span>
<span class="readout__line readout__line--on">in register</span>
</span>
</p>
<!-- the hidden word, for screen readers -->
<p class="sr" data-said></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.
18 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 «La parola sotto la pellicola» da Animorio e adattala al mio sitoCosa fa
Una pagina color carta con al centro un rettangolo di righe orizzontali quasi nere, sottili e fitte, tutte alla stessa distanza. Dentro le lettere di una parola (Latent) le righe sono spostate in giù di mezzo passo: da lontano la pagina è un grigio uniforme e la parola si intuisce appena, come una filigrana. In un angolo c'è il marchio inventato Scrim, con una piccola grata accanto; in basso una riga dice cosa fare e a destra una lettura tecnica dice di quanti gradi è girata la pellicola. All'apertura le righe si tirano dalla riga di mezzo verso l'alto e verso il basso, ognuna aprendosi dal centro ai lati; poi da destra entra una pellicola nera, girata e un po' sollevata, che scivola al centro, si raddrizza con un'ultima oscillazione e si posa. La pellicola ha fessure sottili alla stessa distanza delle righe: quando è dritta e a registro ogni fessura cade su una riga fuori dalle lettere e fra due righe dentro le lettere, quindi la pellicola sembra nera e la parola si accende chiara a strisce. In quel momento i quattro segni d'angolo della pellicola diventano rossi e si allungano con un piccolo rimbalzo, la lettura passa a «in register» con un rotolo e la parola prende peso. Muovendo il puntatore la pellicola lo segue sui lati con una molla; più il puntatore sta in alto o in basso sulla pagina, più la pellicola gira (in una fascia in mezzo resta dritta). Appena è storta, le fessure incrociano le righe e larghe bande chiare e scure di moiré corrono sulla pellicola, più strette quanto più è girata; la parola si legge ancora a tratti, come un negativo. Andando veloci la pellicola si inclina dietro la mano e si solleva di un pelo: le fessure si allargano rispetto alle righe e le bande corrono dall'altra parte. Tornando nella fascia di mezzo la pellicola si raddrizza oscillando, e nell'ultima frazione di grado scatta a registro come su un fermo. Quando il puntatore se ne va, torna al centro e si rimette a registro. Anche la piccola grata del marchio gira con la pellicola.
Come funziona
La pagina con la parola dentro
Su un canvas nascosto lo script disegna le righe: una ogni PITCH pixel, spesse LINE volte il passo, con passo e spessore arrotondati ai pixel veri dello schermo (e il passo pari, così anche mezzo passo è un pixel intero). Poi scrive la parola su un secondo canvas, che fa da maschera: con destination-out toglie le righe dentro le lettere, e su un terzo canvas, con destination-in, tiene solo dentro le lettere le stesse righe spostate di mezzo passo. Le due metà insieme sono la pagina, ridipinta solo quando la parola cambia peso.
La pellicola a fessure
La pellicola è un unico tracciato di rettangoli neri: fra una fessura e l'altra c'è una barra larga il passo meno la riga. Si disegna a ogni fotogramma con translate, rotate e scale intorno al suo centro, che sta sempre a un numero intero di passi dalla prima riga: dritta e alla sua misura, ogni fessura cade esattamente su una riga. Fuori dalle lettere si vede la riga scura, dentro le lettere la carta: la parola si legge chiara sul nero.
Le molle e il moiré
Tre molle smorzate, calcolate in passi di un centoventesimo di secondo: la posizione segue il puntatore sui lati, la rotazione segue l'altezza del puntatore (dritta nella fascia LEVEL, fino a TILT gradi ai bordi), la scala segue la velocità (LIFT). Il moiré non si disegna: nasce da solo dalle due griglie. Girate di un angolo piccolo fanno bande larghe circa il passo diviso l'angolo; con la scala diversa le bande corrono di traverso.
Il fermo del registro
A un quarto di grado dal dritto la molla della rotazione diventa più rigida e quasi smorzata, come un fermo: la pellicola scatta a zero con un'ultima oscillazione piccola, e quando è abbastanza vicina si mette esattamente a zero, così le fessure stanno nitide sulle righe. Se resta dritta e alla sua misura per un attimo è a registro: GSAP colora e allunga i segni d'angolo con back.out, fa rotolare la lettura e porta il peso della parola da WEIGHT meno 300 a WEIGHT, ridipingendo la pagina a passi di dieci.
L'entrata, il riposo e l'uscita
L'entrata è una timeline GSAP: le righe si tirano dalla riga di mezzo, la pellicola arriva da destra girata e sollevata (la timeline muove i bersagli, le molle aggiungono il ritardo e l'assestamento). Quando niente si muove più il canvas non si ridisegna. Quando il puntatore esce, i bersagli tornano al centro e a zero; col dito si trascina, e staccandolo succede lo stesso.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORD | script.js | 'LATENT' | La parola nascosta nella pagina. Meglio corta e in maiuscolo: si legge a strisce. |
PITCH | script.js | 6 | La distanza fra una riga della pagina e la successiva, in pixel. Sul telefono diventa un po' più piccola da sola. |
LINE | script.js | 0.36 | Quanto sono spesse le righe e le fessure, come parte di PITCH: più spesse, la parola si accende più chiara ma la pagina è più scura. |
TILT | script.js | 7 | Di quanti gradi gira la pellicola col puntatore in cima o in fondo alla pagina. Più gradi, bande di moiré più strette. |
LEVEL | script.js | 0.24 | La fascia in mezzo alla pagina dove la pellicola resta dritta e a registro, come parte della sua altezza. |
SWING | script.js | 0.35 | Quanto la pellicola oscilla oltre il dritto prima di fermarsi (0 = per niente). |
LIFT | script.js | 0.025 | Quanto si solleva la pellicola quando la mano va veloce: diventa più grande di un pelo e le fessure si allargano rispetto alle righe. |
WEIGHT | script.js | 760 | Il peso della parola quando la pellicola è a registro, da 300 a 900: fuori registro è più leggera di 300. |
Quando usarla
In apertura di un sito che vuole una prima pagina silenziosa con una sorpresa da cercare: uno studio di grafica o di stampa, una mostra di fotografia, un'etichetta, il lancio di un prodotto che tiene nascosto il nome. La parola nascosta può essere un nome, una data o un invito.
Sul telefono
La stessa animazione con le misure adattate: la pagina prende quasi tutta la larghezza, le righe sono un po' più fitte, la parola sceglie da sola il taglio del carattere che la fa più grande e la pellicola resta dentro lo schermo con i suoi segni d'angolo. Il dito è il puntatore: trascinandolo la pellicola scorre e gira, staccandolo torna al centro e a registro.
Con il movimento ridotto
Niente si sposta e niente gira: la pagina è già tirata e la pellicola compare in dissolvenza al centro, già a registro, con la parola chiara e i segni d'angolo rossi. Il puntatore non la muove.
Trappole
- Una molla della rotazione morbida (per avere l'oscillazione) si ferma a pochi centesimi di grado dal dritto, e su una pellicola larga 750 pixel bastano 0,02 gradi per spostare le fessure di un quarto di pixel ai bordi: la parola diventava a chiazze. Vicino al dritto la molla diventa un fermo rigido e poi si mette esattamente a zero.
- Con le righe della pagina nere come la pellicola il moiré era fortissimo ma la pagina sembrava un blocco scuro; con righe grigio chiaro la pagina era leggera ma nelle miniature la parola non si leggeva più (grigio a strisce su nero a strisce, a distanza diventano quasi lo stesso grigio, e gli spazi fra le lettere sembravano altre lettere). Un grigio quasi nero, caldo, a poco più di un terzo del passo, tiene la pagina appena più leggera della pellicola e la parola chiara anche piccola.
- Il pilota automatico e la mano non stanno mai ferme del tutto: con la scala legata a qualsiasi velocità la pellicola non andrebbe mai a registro. Il sollevamento parte solo sopra i 600 pixel al secondo, e l'inclinazione dietro la mano sopra i 320.
- La parola nascosta non sparisce del tutto: dove le righe si spostano di mezzo passo i bordi verticali delle lettere fanno un piccolo gradino, e da vicino la parola si intuisce. È il comportamento vero di queste immagini nascoste; righe più fitte la nascondono di più.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,5 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
