Le colonne di colore
Hover, SVG
NuovaGratis
Torna alla libreria
La lente sul banco ottico
Nello stile minimal, per un ottico inventato: un banco ottico a linee sottili con una F, una lente e uno schermo. Il mouse fa scorrere la lente; cinque raggi blu partono dalla F, si piegano nella lente e arrivano allo schermo, dove la F appare capovolta e sfocata quanto vuole la formula delle lenti. In due posti è nitida, grande o piccola: lì i raggi si incontrano in un punto, la lente scatta in posizione e anche il titolo va 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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The lens on the optical bench</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 aria-label="Focale opticians: move the lens along the bench until the letter on the screen is sharp.">
<!-- an optical bench: a letter F, a lens you slide with the mouse and a screen. The rays are worked out with the
thin lens formula; the letter on the screen is upside down and blurred by how far it is from focus -->
<svg class="scene" data-scene aria-hidden="true">
<defs>
<filter id="defocus" x="-60%" y="-60%" width="220%" height="220%" color-interpolation-filters="sRGB">
<feGaussianBlur data-blur stdDeviation="0" />
</filter>
</defs>
<path class="axis" data-axis d="" />
<path class="rail" data-rail d="" />
<g data-rays></g>
<text class="letter" data-object>F</text>
<path class="screen" data-screen d="" />
<g filter="url(#defocus)"><text class="letter letter--image" data-image>F</text></g>
<g class="lens" data-lens>
<path class="lens__glass" data-glass d="" />
<path class="lens__stand" data-stand d="" />
<path class="focal" data-focal d="" />
<text class="tiny" data-f1>f</text>
<text class="tiny" data-f2>f</text>
</g>
<text class="readout" data-readout></text>
</svg>
<header class="top">
<span class="top__name">Focale</span>
<span class="top__note">Opticians since 1962</span>
</header>
<div class="caption" data-caption>
<p class="caption__title" data-title>Two places are sharp.</p>
<p class="caption__note" data-note>Slide the lens. One makes it large, one makes it small.</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.
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 lente sul banco ottico» da Animorio e adattala al mio sitoCosa fa
La pagina di un ottico inventato, Focale: in alto il nome e, a destra, Opticians since 1962. In mezzo un banco ottico disegnato con linee sottili: l’asse a puntini, sotto una rotaia con le tacche, a sinistra una F grande in piedi sull’asse, a destra uno schermo, una riga verticale nera. Fra loro una lente biconvessa di due archi sottili sul suo piedino, con i due fuochi segnati da una tacca e una f in corsivo. Dalla cima della F partono cinque raggi blu elettrico: arrivano alla lente, si piegano e proseguono fino allo schermo. Sullo schermo c’è la F capovolta, ingrandita o rimpicciolita, sfocata quanto il cono di raggi è largo quando ci arriva. Il mouse fa scorrere la lente lungo il banco, con un po’ di peso e una molla leggera; la sfocatura, i raggi e la F capovolta cambiano insieme. In due posti la F è nitida: vicino alla F è grande più del doppio, vicino allo schermo è piccola. Lì i raggi si incontrano in un punto solo, la lente scatta dolcemente in posizione, sopra lo schermo compare in blu sharp con l’ingrandimento, e il titolo sotto, Two places are sharp., va a fuoco anche lui e prende peso. Lontano da quei posti il titolo torna sfocato. Lasciata sola, la lente va da sola da un posto nitido all’altro e si ferma un momento in ognuno.
Come funziona
La formula delle lenti
Con la lente a distanza dₒ dalla F e lo schermo a distanza D dalla F, l’immagine si forma a dᵢ con 1/f = 1/dₒ + 1/dᵢ. I posti nitidi sono quelli in cui dᵢ = D − dₒ: dₒ = D/2 ± √(D²/4 − D·f), due soluzioni finché f è meno di un quarto del banco. Lì l’ingrandimento è (D − dₒ)/dₒ, uno l’inverso dell’altro.
Un raggio è una pendenza
Ogni raggio parte dalla cima della F, arriva alla lente all’altezza y e ne esce con pendenza hₒ/dₒ − y/dᵢ: è la retta che passa per il punto immagine (o che sembra venirne, se la F sta dentro il fuoco e 1/dᵢ è negativo). Così bastano cinque altezze sulla lente per avere il cono di luce, senza casi speciali.
La sfocatura è il cono
Dove il cono arriva allo schermo è largo 2·a·|1 − (D − dₒ)/dᵢ|, con a la mezza altezza della lente. Un quarto di quella misura diventa lo stdDeviation di un feGaussianBlur, applicato a un gruppo senza trasformazioni, così è in pixel dello schermo. La F capovolta è la stessa lettera scalata di −(D − dₒ)/dₒ attorno al piede: è il raggio centrale che decide quanto è grande.
Il peso della lente
La lente segue il mouse con una molla scritta a mano (K = 140, smorzamento SPRING), integrata a piccoli passi nel ticker di GSAP: arriva, va un filo oltre e si posa. Se la meta è a meno di DETENT pixel da un posto nitido, la meta diventa quel posto: la lente scatta lì come una ghiera con la tacca. Il titolo prende blur, peso e spaziatura dalla stessa nitidezza.
Da sola e col movimento ridotto
Senza mouse una timeline che si ripete sposta la meta fra cinque posti del banco, con una pausa di PAUSE secondi nei due nitidi; tre secondi dopo l’ultimo movimento del mouse (o subito dopo che è uscito) riparte da lì. Con il movimento ridotto non c’è molla e non c’è giro da sola: la lente sta nel posto nitido grande e col mouse si sposta senza oscillare.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LETTER | script.js | 'F' | La lettera sul banco: una F, perché mostra come si gira l’immagine. |
FOCAL | script.js | 0.2 | La lunghezza focale, in parte del banco (sotto 0.25 i posti nitidi sono due). |
RAYS | script.js | 5 | Quanti raggi partono dalla cima della lettera (da 1 a 9). |
SPRING | script.js | 0.75 | Come la lente segue il mouse: 1 = senza oscillare, meno = un po’ di dondolio. |
DETENT | script.js | 16 | A quanti pixel da un posto nitido la lente ci scatta dentro (0 = mai). |
PAUSE | script.js | 1.4 | I secondi in cui la lente, da sola, si ferma in ogni posto nitido. |
Quando usarla
Nella prima pagina di un ottico, di un negozio di occhiali o di lenti a contatto, di un fotografo o di un laboratorio di stampa; come illustrazione di un servizio di visita della vista o di una pagina di scienza; ovunque serva l’idea di «trovare il punto giusto».
Sul telefono
Le stesse animazioni con le misure adattate: il banco prende tutta la larghezza, la F è un po’ più grande in proporzione e la lente si sposta trascinando il dito di lato; da sola fa lo stesso giro fra i due posti nitidi.
Con il movimento ridotto
La lente sta ferma nel posto nitido grande, con la F capovolta nitida e il titolo a fuoco; col mouse si sposta subito, senza molla e senza oscillare, e la sfocatura segue.
Trappole
- Un filtro di sfocatura messo sul testo capovolto e scalato lavorerebbe nelle sue coordinate e sfocherebbe di più quando la F è grande: il filtro va su un gruppo senza trasformazioni, la scala sul testo dentro.
- La dissolvenza d’entrata sulla F capovolta lasciava la sua opacità ferma al valore letto all’inizio (quella di una F sfocata), anche quando poi tornava nitida: l’entrata anima il gruppo, l’opacità della lettera resta del disegno.
- Con i tre raggi dei libri (parallelo, centrale, per il fuoco) quello per il fuoco andrebbe all’indietro quando la F sta dentro la focale: cinque raggi presi su cinque altezze della lente funzionano sempre e mostrano anche il cono.
Librerie
GSAP 3.15.0, Newsreader (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,1 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.
