Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
La spina che si attacca allo scroll e accende la frase
Scorri dentro l’anteprima
Animazione di scroll nello stile minimal, su nero: un cavo sottile si disegna scendendo, con un ricciolo di filo lento, e la spina ne segue la punta fino alla presa sotto la frase. Con un ultimo tratto di scroll la spina entra con uno scatto, la corrente sale lungo un filo ambra e le parole si accendono una dopo l’altra.
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>Halden Lamps</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/hanken-grotesk@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up studio of hand-made lamps, Halden. The stage sticks while you scroll: a thin cable draws itself in from
the bottom corner with a loop of slack, the plug rides its tip and climbs into the socket under the sentence.
It clicks in, the current runs up a hairline and the words switch on one after another. The cable, the plug and
the socket are drawn by the script -->
<main>
<section class="corsa" data-corsa>
<div class="palco" data-palco>
<header class="testa">
<a class="marchio" href="#" data-entra>Halden</a>
<p class="testa__nota" data-entra>Lamps made by hand</p>
</header>
<div class="frase" data-frase>
<h1 class="titolo" data-titolo aria-label="Light starts with a click.">
<span class="parola" data-parola>Light</span>
<span class="parola" data-parola>starts</span>
<span class="parola" data-parola>with a</span>
<span class="parola" data-parola>click.</span>
</h1>
</div>
<p class="sotto" data-sotto>Small runs of brass and linen lamps, wired in our workshop.</p>
<svg class="tela" data-tela aria-hidden="true">
<path class="filo-corrente" data-corrente d="M0 0"/>
<path class="cavo" data-cavo d="M0 0"/>
<g class="spina" data-spina>
<path class="spina__rebbio" d="M-4.5 -16 V-27"/>
<path class="spina__rebbio" d="M4.5 -16 V-27"/>
<rect class="spina__corpo" x="-10" y="-16" width="20" height="24" rx="4"/>
<path class="spina__riga" d="M-5 -6 H5 M-5 -1 H5"/>
<path class="spina__collo" d="M-3.5 8 L-2.5 15 H2.5 L3.5 8"/>
</g>
<g class="presa" data-presa>
<rect class="presa__corpo" x="-27" y="-18" width="54" height="36" rx="7"/>
<path class="presa__fessura" d="M-4.5 11 V18 M4.5 11 V18"/>
<path class="presa__spia" data-spia d="M-9 -6 H9"/>
</g>
</svg>
<p class="cenno" data-entra><span>Scroll</span><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 3v13M4.5 10.5 10 16l5.5-5.5"/></svg></p>
<p class="stato" data-entra>Lamp <span class="stato__parola" data-stato>off</span></p>
</div>
</section>
<footer class="piede">
<p>Halden lamps are wired, tested and boxed by the two people who designed them.</p>
</footer>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.
23 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 spina che si attacca allo scroll e accende la frase» da Animorio e adattala al mio sitoCosa fa
Una pagina nera con in alto il nome di un laboratorio di lampade fatte a mano inventato, Halden, e al centro la frase «Light starts with a click.» in grigio spento. Sotto la frase c’è una presa disegnata a linee sottili, con le due fessure in basso e una piccola spia spenta. Scorrendo il palco resta fermo e un cavo sottile entra dall’angolo in basso a sinistra: si disegna lungo il pavimento, fa un ricciolo di filo lento e risale verso la presa. In punta c’è la spina, coi due rebbi, che gira seguendo il cavo con un piccolo ritardo sulle curve; il cavo intanto ondeggia appena per conto suo. Arrivata sotto la presa la spina si ferma un soffio prima. Con un ultimo tratto di scroll entra con uno scatto: va un po’ oltre e si assesta, la presa cede di un pixel, il cavo vibra una volta lungo tutta la sua lunghezza. La spia della presa diventa ambra, la corrente sale lungo un filo ambra fino alla frase e le parole si accendono una dopo l’altra, bianche, con un alone caldo che si posa, ognuna con un saltello di un pixel. Compare la riga sotto e in basso a destra «Lamp off» diventa «Lamp on». Tornando su la spina si stacca, la corrente si spegne e la frase torna grigia.
Come funziona
Un tracciato solo per il cavo
Il cavo è un path di SVG fatto di cinque curve cubiche: il pavimento, il ricciolo e la salita. Le ultime maniglie stanno dritte sotto la presa, così la spina arriva sempre in piedi. Si disegna con stroke-dasharray e stroke-dashoffset, e il tracciato si ricalcola a ogni fotogramma perché il cavo ondeggia.
La spina sulla punta
La spina si mette nel punto del cavo a cui è arrivato il disegno (getPointAtLength) e gira secondo il tratto di cavo appena prima; la rotazione va su una molla, così sulle curve la testa resta un poco indietro.
Lo scatto
Quando lo scroll passa PLUG_AT parte una timeline: la spina sale degli ultimi 15 pixel con back.out(3.2), la presa cede di un pixel e torna con una molla elastica, il cavo vibra con un’ampiezza che si spegne in 1,3 secondi. Poi la corrente sale con lo stesso trucco del tratteggio e le parole si accendono una alla volta. Tornando su la timeline va all’indietro, più veloce.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SLACK | script.js | 1 | Quanto filo lento ha il cavo, e quanto è grande il ricciolo: 0 è quasi dritto. |
SWAY | script.js | 1 | Quanto ondeggia il cavo da solo. |
LINE | script.js | 1.4 | Lo spessore del cavo, in pixel. |
PLUG_AT | script.js | 0.6 | A che punto della pagina la spina entra nella presa (da 0 a 1). |
STAGGER | script.js | 0.12 | La pausa fra una parola che si accende e la successiva, in secondi. |
RIDE | script.js | 1 | Quanto scroll serve per tutto: 2 è il doppio. |
Quando usarla
Per l’apertura del sito di un negozio di lampade, di uno studio di illuminazione o di un prodotto che si accende: la frase che si legge solo quando la spina è dentro, scorrendo.
Sul telefono
La stessa animazione con le misure adattate: la frase va su più righe e più in alto, il ricciolo del cavo è più piccolo e tutto il tracciato si ricalcola se la finestra cambia misura, anche a metà del cavo.
Con il movimento ridotto
Niente si muove e lo scroll non è ammorbidito: la spina è già nella presa, la corrente e le parole sono accese, e la pagina compare in dissolvenza.
Trappole
- Con le maniglie finali storte la spina arrivava di traverso alla presa: ora le ultime due stanno sulla verticale della presa.
- La rotazione presa dal cavo, senza molla, scattava sulle curve del ricciolo; con la molla gira morbida.
- Lo scatto va su una timeline e non sullo scrub: se seguisse lo scroll, la spina potrebbe restare a metà dentro la presa.
Librerie
GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Hanken Grotesk (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,3 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 24 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.
