Word colour sweep
When to use
Use when a headline is already on screen and one word is the point. The accent runs word by word in reading order, lifting each from dim to white as it passes, and stays on the target word. Every device directs the eye; this one names its target in the markup.
The code
<h1>every device directs the eye</h1>
<style>h1 { color: var(--dim); } h1 span { display: inline-block; white-space: pre; }</style>
<script type="module">
import { EASE } from '../../core/motion/presets.js';
const h1 = document.querySelector('h1');
const words = h1.textContent.split(' ').map((w, i, a) =>
Object.assign(document.createElement('span'), { textContent: i < a.length - 1 ? w + ' ' : w }));
h1.replaceChildren(...words);
const css = getComputedStyle(document.documentElement);
const dim = css.getPropertyValue('--dim'), ink = css.getPropertyValue('--ink'), accent = css.getPropertyValue('--accent');
const beat = 150, step = 140; // ms; step is faster than reading (about 250 ms a word), so the sweep leads the eye
words.forEach((s, i) => {
const last = i === words.length - 1;
s.animate([{ color: dim }, { color: accent, offset: 0.25 }, { color: last ? accent : ink }],
{ duration: 520, delay: beat + i * step, easing: EASE.land, fill: 'both' });
});
</script>Easing
Each ease is a pair of After Effects handles from core/motion/presets.js. Every curve as CSS.
| Ease | Leaving a key | Arriving at a key |
|---|---|---|
land | 12% influence, speed 4.8 | 75% influence, speed 0 |
Notes
Three colours, in this order: --dim (#5c5b63 on #16151a, readable but quiet), --ink for what has been read, --accent for one word at a time. The target is the only word that stays accent. A step slower than 250 ms follows the reader instead of leading; a step under 100 ms is a flicker. For a target in the middle of the line, sweep to it and stop: the words after it stay dim.
Looks (ground, type, radius, accent) live in demo/demo.css; this snippet keeps neutral tokens.
Sound
Sound: none; the colour points the eye without a sound.
