Spotlight surface
A pointer-lit surface with the same accent for keyboard focus and a static reduced-motion treatment.
POINTER / FOCUS
A useful detail
Move across the surface, or focus its action, to bring this reference into view.
Implementation
1"use client";2 3import { useRef, type CSSProperties, type HTMLAttributes } from "react";4 5export type SpotlightSurfaceProps = HTMLAttributes<HTMLDivElement> & {6 /** Radius of the decorative light in pixels. */7 spotlightSize?: number;8 /** Disables the decoration; children keep their own interaction semantics. */9 disabled?: boolean;10};11 12/** Pointer light behind real content, with the same centered cue on child focus. */13export function SpotlightSurface({14 children,15 spotlightSize = 260,16 disabled = false,17 className = "",18 style,19 onPointerMove,20 onPointerLeave,21 onPointerCancel,22 onFocusCapture,23 ...divProps24}: SpotlightSurfaceProps) {25 const surfaceRef = useRef<HTMLDivElement>(null);26 const size = Number.isFinite(spotlightSize)27 ? Math.max(80, Math.min(1000, spotlightSize))28 : 260;