A hover effect that plays once, not forever

The footer of this site carries our name as an outline. In an early version a line of light ran along that outline whenever the footer was on screen, tied to the scroll position. Scroll a little and the light moved. Scroll back and it moved again.

It worked, and it felt wrong. Motion that never stops reads as decoration that wants attention. Motion that answers you reads as care.

Three rules we set

1. The light plays only when a pointer arrives, or when the link gets keyboard focus.
2. It plays once. A pass that has started is never restarted halfway.
3. At rest, the plain outline is the finished design. Nothing is missing when the light is off.

How it works

The outline is drawn twice, one copy on top of the other. The top copy has a brighter stroke and a soft glow, and a mask hides all of it except a narrow diagonal band. The animation moves that band across the name once, then stops.

A class starts the pass and the end of the animation removes it. While the class is there, a new hover is ignored, so a restless mouse cannot make the light stutter.

giant.addEventListener('pointerenter', () => {
  if (giant.classList.contains('play')) return;
  giant.classList.add('play');
});
light.addEventListener('animationend', () => giant.classList.remove('play'));

Who never sees it

The hover version only runs on devices with a fine pointer that can hover, so a tap on a phone does not set it off by accident. With reduced motion turned on, the light layer is not drawn at all. Screen readers skip it too, because the large name is marked as decoration, and the logo link above it has a plain text label.

Why it matters

A visitor rarely notices a detail like this on purpose. They notice the opposite: the thing that blinks while they are trying to read. Restraint is a design choice, and it is one we would rather make than defend.