Words that melt into each other
Text, Scroll, SVG
NewFree
Back to the library
The plug that connects on scroll and lights the sentence
Scroll inside the preview
A minimal-style scroll animation on black: a thin cable draws itself in as you scroll, with a loop of slack, and the plug rides its tip up to the socket under the sentence. A last bit of scroll clicks it in, the current runs up an amber hairline and the words switch on one after another.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!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
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
23 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The plug that connects on scroll and lights the sentence” from Animorio and fit it into my siteWhat it does
A black page with the name of a made-up studio of hand-made lamps, Halden, at the top and the sentence ‘Light starts with a click.’ in the middle, in dim grey. Under the sentence there is a socket drawn in thin lines, with its two slots at the bottom and a small unlit indicator. As you scroll the stage stays still and a thin cable comes in from the bottom left corner: it draws itself along the floor, makes a loop of slack and climbs towards the socket. The plug rides its tip, with its two prongs, turning with the cable and lagging a little on the bends; the cable sways gently on its own. Under the socket the plug stops a hair short. A last bit of scroll clicks it in: it goes a little past and settles, the socket gives a pixel and the cable shivers once along its whole length. The indicator turns amber, the current runs up an amber hairline to the sentence and the words switch on one after another, white, with a warm glow that settles, each with a one-pixel hop. The line below appears and at the bottom right ‘Lamp off’ becomes ‘Lamp on’. Scrolling back up unplugs it, the current goes out and the sentence turns grey again.
How it works
One path for the cable
The cable is an SVG path made of five cubic curves: the floor, the loop and the climb. The last handles stand straight under the socket, so the plug always arrives upright. It is drawn with stroke-dasharray and stroke-dashoffset, and the path is rebuilt every frame because the cable sways.
The plug on the tip
The plug sits at the point the drawing has reached (getPointAtLength) and turns with the bit of cable just behind it; the rotation runs on a spring, so on the bends its head lags a little.
The click
When the scroll passes PLUG_AT a timeline starts: the plug climbs the last 15 pixels with back.out(3.2), the socket gives a pixel and comes back on an elastic spring, and the cable shivers with an amplitude that dies away in 1.3 seconds. Then the current climbs with the same dash trick and the words switch on one by one. Scrolling back up plays the timeline backwards, faster.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
SLACK | script.js | 1 | How much slack the cable has, and how big its loop is: 0 is almost straight. |
SWAY | script.js | 1 | How much the cable sways on its own. |
LINE | script.js | 1.4 | How thick the cable is, in pixels. |
PLUG_AT | script.js | 0.6 | How far down the page the plug clicks in (0 to 1). |
STAGGER | script.js | 0.12 | The pause between one word switching on and the next, in seconds. |
RIDE | script.js | 1 | How much scroll the whole thing takes: 2 is twice as long. |
When to use it
For the opening of a lamp shop, a lighting studio or a product that switches on: a sentence that only lights up once the plug is in, as you scroll.
On phones
The same animation with the sizes adapted: the sentence wraps over more lines and sits higher, the loop is smaller and the whole path is rebuilt if the window changes size, even halfway along the cable.
With reduced motion
Nothing moves and the scroll is not smoothed: the plug is already in the socket, the current and the words are on, and the page fades in.
Pitfalls
- With the last handles askew the plug reached the socket sideways: now the last two stand on the socket’s vertical.
- Taken straight from the cable, the rotation jumped on the loop; on a spring it turns smoothly.
- The click runs on a timeline, not on the scrub: following the scroll, the plug could stop halfway into the socket.
Libraries
GSAP 3.15.0, ScrollTrigger 3.15.0, Lenis 1.3.26, Hanken Grotesk (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 6.3 KB; the libraries: GSAP + ScrollTrigger 45 KB, Lenis 5.3 KB.
Testing
Tested on 24 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
