Radiant Dots — React Animated Background
A constellation of light. Each dot emits and occludes, sending soft illumination through a real radiance-cascade field.
Usage
import { RadiantDots } from "@/components/RadiantDots";
export function LightField() {
return <div style={{ height: 520 }}><RadiantDots interactive
{...{
interactive: true,
layout: "orbit",
motion: "wave",
color: "#eff5ff",
intensity: 1,
speed: 0.7,
animate: true
}}
/></div>;
}Implementation notes & API
Real multi-pass radiance cascades adapted from Vercel's MIT Agent Radiance Cascades example. Original orbit/grid layouts replace the Agent mark. Jump flood -> signed distance field -> up to six cascades -> HDR presentation. The working field is capped at 320px; updates are capped at 30fps. layout chooses orbit/grid; motion chooses wave/chase/pulse; color sets emitters; intensity sets exposure; speed sets tempo. interactive illuminates dots near the pointer. animate=false freezes time. Offscreen, hidden-tab and reduced-motion states suspend continuous rendering. Decorative effect only. If used as a loading indicator, provide a separate accessible status in your own DOM.
| Property | Type | Notes / default |
|---|---|---|
interactive | boolean | false in the library; enabled in this preview |
fallback | ReactNode | Shown when the renderer is unavailable |
className / style | string / CSSProperties | Applied to the outer container |