Spotlight Follow Background
A full-bleed radial glow that tracks the cursor with zero re-renders.
- Category
- Backgrounds
- Added
- 2026-09-01
- Deps
- none
- Updated
- 2026-09-01
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Follow the light
Move your cursor across this panel
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Spotlight Card Grid
patternsA card grid with a soft red spotlight that follows the cursor across it.
Liquid Blob Cursor Follow
backgroundsA soft blurred blob that trails the cursor with spring-smoothed lag.
Aurora Gradient Field
backgroundsSoft, hue-shifting color fields that drift behind a hero like ambient aurora light.