Il titolo che si alza dalla linea
Transizioni, Testo, Immagini
NuovaGratis
Torna alla libreria
Il provino e la matita rossa
Il provino a contatto di un fotografo, nello stile minimal: dodici fotogrammi in bianco e nero della stessa spiaggia, disegnati dallo script con la grana della pellicola. Una matita grassa rossa cerchia un fotogramma con un giro solo, il segno si cancella mentre la foto si stacca dal foglio e si ingrandisce al centro con il suo titolo sotto, poi torna al suo posto e la matita ne sceglie un’altra. Cliccando si sceglie la propria.
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 contact sheet and the red pencil</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<header class="top">
<span class="top__name">Tidemark</span>
<span class="top__note">Contact sheet, low tide</span>
</header>
<!-- the contact sheet of a made-up photographer: twelve black and white frames of the same shore, drawn by the
script. A red grease pencil circles one; the frame lifts off the sheet and grows, its title rises under it,
then it goes back and the pencil chooses another. Clicking a frame chooses it -->
<section class="sheet" aria-label="Contact sheet" data-sheet>
<div class="frames" data-frames></div>
<svg class="pencil" aria-hidden="true" data-pencil><path class="pencil__loop" data-loop d="M0 0"></path></svg>
<p class="caption" aria-live="polite" data-caption>
<span class="caption__mask"><span class="caption__title" data-caption-title></span></span>
<span class="caption__mask"><span class="caption__note" data-caption-note></span></span>
</p>
</section>
<p class="hint" data-hint>Click a frame</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.
15 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 provino e la matita rossa» da Animorio e adattala al mio sitoCosa fa
Su una carta bianco caldo, in alto il nome di un fotografo inventato, Tidemark, e a destra Contact sheet, low tide. In mezzo il provino: dodici fotogrammi in bianco e nero in tre righe da quattro, ognuno con un bordo nero sottile come la pellicola. Sono tutte foto della stessa riva con la bassa marea, disegnate dallo script: un sole che sorge sull’acqua, un pontile lungo, due scogli, la nebbia del mattino, una barca lontana, il sole che tramonta, con la grana della pellicola e gli angoli più scuri. All’apertura le stampe affiorano una dopo l’altra, chiare e slavate, e prendono contrasto come in una bacinella di sviluppo. Poi una matita grassa rossa cerchia un fotogramma con un giro solo e veloce, un po’ storto, che finisce un poco fuori da dove era partito. Il segno si cancella mentre il fotogramma si stacca dal foglio e vola ingrandendosi al centro; gli altri si sbiadiscono dietro, e sotto la foto grande salgono da una fessura il titolo (per esempio Sun on the wet sand) e i dati dello scatto. Dopo un momento la foto torna in volo al suo posto, il provino si riaccende e la matita ne sceglie un’altra; il giro passa da tre fotogrammi e ricomincia. Cliccando o toccando un fotogramma si sceglie quello.
Come funziona
Dodici foto disegnate nel codice
Ogni fotogramma è un canvas 720 × 480 disegnato una volta sola: cielo e mare con due gradienti lineari, il sole con un bagliore radiale tagliato all’orizzonte, la scia del sole fatta di trattini chiari sempre più larghi verso il basso, le creste delle onde, poi a seconda della scena un pontile, gli scogli (una sagoma irregolare), una barca, la nebbia, la sabbia bagnata. Alla fine la grana: ogni pixel riceve un rumore preso da un generatore con seme, così la foto è uguale a ogni apertura, con un filo di caldo e una vignettatura.
Il giro della matita
Il segno è un path SVG sopra tutto il provino: un’ellisse un po’ più larga del fotogramma, girata di qualche grado, percorsa per 1,14 giri con il raggio che ondeggia appena e cresce verso la fine, così il tratto chiude più in fuori di dove è partito come fa la mano. Si disegna con stroke-dasharray e stroke-dashoffset portato da tutta la lunghezza (getTotalLength) a zero, e si cancella portandolo al negativo.
Il volo del fotogramma
Il fotogramma scelto va col transform di GSAP (x, y, scale con origine in alto a sinistra) dal suo posto al rettangolo grande calcolato da layout(), con la curva LIFT. Il bordo nero sta sul figlio: mentre il fotogramma cresce, il suo spessore cala in proporzione, così ingrandito resta un bordo da stampa e non una cornice spessa. Gli altri scendono a opacità 0,14.
Una catena di scelte
Ogni scelta è una timeline costruita al momento con le misure di quel momento: matita, volo, didascalia che sale da una finestra con overflow hidden, attesa (HOLD), ritorno. Alla fine chiama la prossima scelta di PICKS. Un clic ferma la catena, rimette il provino com’era e mostra il fotogramma cliccato più a lungo; un ridimensionamento fa lo stesso e riparte con le misure nuove.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PICKS | script.js | [4, 9, 1] | I fotogrammi che la matita sceglie da sola, a turno (0 è il primo, in alto a sinistra). |
HOLD | script.js | 2.4 | Quanti secondi resta grande un fotogramma scelto. |
PENCIL | script.js | 0.85 | Quanti secondi ci mette la matita a disegnare il giro. |
LIFT | script.js | 'expo.inOut' | La curva del fotogramma che vola al centro e torna. |
BIG | script.js | 0.72 | Quanta larghezza del provino prende il fotogramma grande, da 0,5 a 0,95 (sul telefono tutta). |
GRAIN | script.js | 14 | Quanta grana di pellicola hanno le foto, da 0 a 40. |
Quando usarla
Per il portfolio di un fotografo, l’archivio di un reportage, la galleria di un matrimonio o di un evento, la pagina di un laboratorio di stampa: dove le foto sono tante e se ne vuole far vedere una alla volta con un gesto da tavolo di lavoro. Le foto disegnate si possono sostituire con immagini vere dentro i canvas o con elementi img.
Sul telefono
Uguale, con misure adattate: tre colonne e quattro righe, bordi e tratto della matita un poco più sottili, e il fotogramma scelto si ingrandisce a tutta larghezza. Toccando un fotogramma lo si sceglie.
Con il movimento ridotto
Niente voli: il giro della matita compare in dissolvenza invece di disegnarsi, il fotogramma scelto si dissolve e ricompare già grande al centro, la didascalia compare in dissolvenza, e il ritorno è lo stesso al contrario. All’apertura il provino compare in dissolvenza.
Trappole
- Il bordo nero del fotogramma cresceva con lo scale: ingrandito sei volte diventava una cornice di diciotto pixel. Il suo spessore si porta con GSAP a una frazione dell’ingrandimento durante il volo e torna com’era al ritorno (anche col movimento ridotto, dove lo scale scatta in un colpo).
- Cancellato portando stroke-dashoffset alla lunghezza negativa, il giro lasciava un puntino rosso: il cappuccio tondo della fine della linea resta visibile. Dopo la cancellazione il path va a opacità 0.
- Sul telefono il fotogramma grande, al 72% di un provino stretto, era quasi piccolo come quelli del provino: lì prende tutta la larghezza.
- Il filtro dell’apertura (brightness e contrast) non si interpola fino a none: serve il valore d’arrivo scritto per intero, brightness(1) contrast(1), e clearProps alla fine.
Librerie
GSAP 3.15.0, Newsreader (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,6 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.
