Standing letters with a long shadow
Text, Scroll, 3D
NewFree
Back to the library
Neon headings
Headings appear word by word as a blue glow with no letters, turning round the colour wheel; then they fill in with their colour while the glow fades.
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>Neon headings</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="page">
<header class="top">
<p class="brand">Spool</p>
<p class="top__line">Release notes</p>
</header>
<!-- every heading with data-neon lights up, word by word, when it comes on screen -->
<section class="hero">
<p class="label">Spring release</p>
<h1 class="heading heading--big" data-neon>Every frame is a block you can play with.</h1>
<p class="text">Pick one up, change it, drop it back on the timeline. Nothing is baked in until you export.</p>
<div class="actions">
<button class="replay" type="button" data-replay data-autoclic>
<span class="replay__text" data-text="Light it again">Light it again</span>
<svg class="replay__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4.5 12a7.5 7.5 0 1 0 2.2-5.3" /><path d="M4.5 4.5v4.2h4.2" /></svg>
</button>
<span class="hint">or scroll</span>
</div>
</section>
<section class="part">
<h2 class="heading" data-neon>Stack them, swap them, keep the ones that work.</h2>
<p class="text">Blocks snap to the beat of your track and remember every setting you give them.</p>
</section>
<section class="part">
<h2 class="heading" data-neon>Your brand kit rides along on every export.</h2>
<p class="text">Colours, type and logos travel with the project, so nobody starts from a blank timeline.</p>
</section>
<section class="part part--last">
<h2 class="heading" data-neon>Wide, tall or square, all in one go.</h2>
<p class="text">One project, every size your channels ask for.</p>
</section>
</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/SplitText.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.
24 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 “Neon headings” from Animorio and fit it into my siteWhat it does
A dark page of release notes for a video editor, with four headings. When a heading comes on screen its words appear one after another with no letters: only their blue glow shows, like a sign being switched on. The glow turns round the colour wheel towards violet and pink, and meanwhile, word by word, the letters fill in with a warm white while the glow fades. Scroll back up and down again and the heading lights up once more; the button at the top lights the first one again.
How it works
The words
SplitText splits each heading into words and keeps the label for screen readers. Every word starts transparent, with two blue #4cc7f0 shadows of 5 and 18 px: without the letters, only their light is left.
Round the wheel
The hue-rotate filter turns by 160° in a second, at the same pace for every word, until each one starts to fill in; while it fills, its turn goes back to zero, so the white comes out clean.
Filling in
From 0.3 seconds, one word every 0.05 seconds (the last three half as far apart again) takes its colour over two thirds of a second, and the shadow moves towards a transparent red: as it fades, the glow keeps sliding in colour.
When it starts
An IntersectionObserver with a −10% margin at the bottom lights the heading when it is really on screen; when it leaves at the bottom, that is scrolling back up, its timeline goes back to the start and lights up again on the next way down. The headings stay hidden until they are split, so the plain text never flashes.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
GLOW | script.js | #4cc7f0 | The colour of the glow the words start as. |
TURN | script.js | 160 | How far the glow turns round the colour wheel, in degrees. |
WORD, FILL_AT | script.js | 1, 0.3 | How long the turn lasts, in seconds, and when the first word starts to fill in. |
GAP | script.js | 0.05 | The delay between one word and the next, in seconds. |
MARGIN | script.js | 0px 0px -10% 0px | How far a heading has to come into the screen to light up. |
When to use it
For the headings of a dark page: release notes, a launch, an evening event, a venue’s site. It works on a light background too, but the glow shows less.
On phones
The same, with 36 px headings; the glow stays at 5 and 18 px, so on a small screen it looks softer.
With reduced motion
No glow: the headings are written in their colour straight away.
Pitfalls
- Two tweens on the same filter tread on each other: if the colour turn keeps going while the word fills in, the word is left tinted at the end. Each word has its own turn, which stops when it starts to fill in.
- hue-rotate turns the text colour too: on a warm white, 160° gives a green. That is why the turn goes back to zero while filling in.
- If the heading is split after the page has appeared, the plain text shows for a moment: it is hidden with a class on the html element, set straight away by the script.
Libraries
GSAP 3.15.0, SplitText (GSAP) 3.15.0, Mona Sans (font variabile) 5.3.0, JetBrains Mono (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 4.3 KB; the libraries: GSAP + SplitText 31 KB.
Testing
Tested on 28 September 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: Done
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.
