Spotlight Follow Background
A full-bleed radial glow that tracks the cursor with zero re-renders.
DOM + CSS0 deps1 file · 2 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef } from "react";
function alphaHex(hex: string, alpha: number): string {
// Validate before concatenating — this value is interpolated into a
// multi-layer gradient, where an unvalidated string can append another
// layer. Also fixes "#fff" producing the invalid "#fff7f".
const safe = /^#[0-9a-f]{6}$/i.test(hex) ? hex : "#2563eb";
const a = Math.round(Math.min(1, Math.max(0, alpha)) * 255)
.toString(16)
.padStart(2, "0");
return `${safe}${a}`;
}
export function SpotlightFollowBackground({
radius = 260,
color = "#2563eb",
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
Spotlight Follow Background writes pointer coordinates directly to two CSS custom properties via ref.style.setProperty inside a native pointermove listener, entirely bypassing React state — moving the mouse a thousand times never triggers a single re-render, which is the whole performance story here: cost is one native event listener and a browser-composited radial-gradient repaint, not React reconciliation. It differs from this library's other cursor-driven pieces by covering the full panel as a single ambient light source rather than following the pointer as a solid shape, which is what makes it read as a background rather than a cursor effect. The glow sits on its own dark base layer, so foreground copy uses a fixed light color and stays legible whether the spotlight is centered under it or off to one side. The caveat: because it only reacts to real pointer input, it renders as a static centered glow until the visitor actually moves their mouse, which is worth knowing if the hero needs to feel alive on load with no interaction yet.
