Building an Animated 404 Ring
This is a write-up of the animated ring I built for a 404 page. It's a single component that renders an SVG "portal" — a set of concentric rings with drifting particles, a slow wobble, and a parallax response to the cursor. The page is server-rendered, so the component also has to be SSR-safe and reasonably cheap to run. Here's how each part works.
Generating the geometry
The rings, particles, and orbital markers are generated from their index rather than placed by hand. The particles use the golden angle so they distribute evenly around the circle without clustering:
const GOLDEN_ANGLE = 2.399963;
const particles = Array.from({ length: 12 }, (_, i) => {
const angle = i * GOLDEN_ANGLE;
const isDrift = i < 8;
const radius = isDrift ? 60 + (i / 8) * 120 : [170, 135, 95][i % 3];
return {
cx: 200 + Math.cos(angle) * radius,
cy: 200 + Math.sin(angle) * radius,
// size, delay, and duration also derived from i
};
});
Each particle is offset by ~137.5° from the previous one, which gives even angular coverage. The first eight drift across an expanding radius; the rest sit on the ring radii. Sizes, delays, and durations come from small modulo offsets on the index so the particles don't animate in sync.
The important property here is that there's no Math.random(). Because the page is server-rendered, a random layout would differ between the server and the client and cause a hydration mismatch. Deriving everything from the index keeps the two outputs identical.
Parallax from layered transforms
The ring is a stack of six SVG groups: a background gradient, three ring systems, an orbital field, the particles, and the "404" text. Each group translates by the pointer offset times a different factor:
<g style:transform="translate({px * 12}px, {py * 12}px)">…</g> <!-- outer rings -->
<g style:transform="translate({px * 26}px, {py * 26}px)">…</g> <!-- inner rings -->
<g style:transform="translate({px * 32}px, {py * 32}px)">…</g> <!-- "404" text -->
The larger the factor, the more the layer moves, which reads as the layer sitting closer to the viewer. The "404" (×32) moves most; the outer rings (×12) least. The SVG is flat, but the differing translate amounts give it a sense of depth as the cursor moves.
px and py are the smoothed pointer position, scaled by an intensity prop so the effect can be turned up or down per usage.
Smoothing and wobble
Tracking the cursor directly looks abrupt, so the pointer values are eased toward a target each frame:
const SMOOTHING = 0.06;
pointerX += (targetX - pointerX) * SMOOTHING;
pointerY += (targetY - pointerY) * SMOOTHING;
That's an exponential approach — each frame closes 6% of the remaining distance — so the ring follows the cursor with a slight lag instead of snapping to it.
On top of the parallax, the rings scale slightly using a wobble value built from three sine waves at unrelated frequencies:
ringWobble =
(Math.sin(time * 0.7) * 0.008 +
Math.sin(time * 1.3) * 0.005 +
Math.sin(time * 2.1) * 0.003) *
wobbleEnergy;
The three frequencies don't share a common period, so the motion doesn't visibly repeat. wobbleEnergy scales the whole thing and is itself driven by how far the cursor is from the center (0.5 + distance * 0.5), so the rings stay calmer near the middle and move more toward the edges.
Three rendering modes
The interface lives in has three visual modes — glass, flat, and retro — set with a data-physics attribute on the page. The SVG markup is identical in all three; the differences are handled in scoped CSS, so the component doesn't branch in JavaScript.
Glass applies an SVG turbulence filter and a glow:
[data-physics='glass'] .portal-ring .ring-outer-system {
filter: var(--portal-warp-glass) drop-shadow(0 0 12px var(--accent));
}
<filter id="warp-glass">
<feTurbulence type="fractalNoise" baseFrequency="0.12" numOctaves="3" result="noise" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="10" />
</filter>
feTurbulence generates a noise field and feDisplacementMap offsets each pixel of the rings by it, which produces a slight warp. Flat uses the same filter with a lower frequency and no glow. Retro removes the filter entirely, switches the animation timing to steps() so the motion is stepped, dashes the strokes, and renders "404" in a monospace font.
One detail worth noting: the filter IDs are generated per instance (from a stable, SSR-safe id) and passed into the CSS through a custom property. That lets the stylesheet reference a filter whose ID it doesn't know ahead of time, and keeps multiple rings on a page from colliding.
CSS for ambient motion, JS for interaction
Most of the motion — the rings spinning, the particles drifting, the arcs drawing, an occasional glitch flash — is CSS @keyframes. The JavaScript only handles the pointer parallax and the wobble.
That split has two practical benefits: the animation runs without JavaScript, so it works on touch devices and before hydration; and the only code that has to run on the main thread is the part that actually responds to the cursor.
Keeping the JS bounded
A requestAnimationFrame loop tracking the pointer can waste work if it isn't constrained, so the component limits when it runs.
It only animates while it's on screen, using an IntersectionObserver to start and stop:
new IntersectionObserver(([entry]) => {
isVisible = entry.isIntersecting;
if (!isVisible) stopAnimation();
});
The loop also stops itself once motion has settled, instead of running every frame indefinitely:
function animate() {
// ease pointer + wobble toward their targets…
if (shouldContinueAnimating()) {
frameId = requestAnimationFrame(animate);
}
}
shouldContinueAnimating() returns false once the pointer and wobble are within a small epsilon of their targets, so the loop sleeps when nothing is moving and the next pointer event restarts it. The bounding rect is cached and only re-measured on scroll or resize, which avoids a layout read on every pointer event.
Accessibility
The SVG is aria-hidden, since it's decorative; the page heading carries the actual "page not found" message. Under prefers-reduced-motion, the rAF loop never starts and the CSS animations are replaced with a static state, so the ring renders without movement.
That's the whole component: generated geometry, layered parallax, eased pointer input, three CSS-driven rendering modes, and a render loop that only runs when it needs to.
