Agent Radiance Cascades

The static ten-dot Agent mark becomes a selectable loading field with capture-quality controls: every gray-to-white dot is both an HDR emitter and an occluder, feeding a jump-flooded distance field and six top-down radiance cascades.

Open fullscreen

"use client";
 
import { useEffect, useRef } from "react";
 
import { createRenderer } from "./renderer";
 
export function Example() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
 
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const renderer = createRenderer({ canvas });
    void renderer.ready;
    return () => renderer.dispose();
  }, []);
 
  return (
    <div className="relative h-full w-full overflow-hidden bg-black">
      <canvas ref={canvasRef} className="block h-full w-full" />
      <div
        className={
          "pointer-events-none absolute bottom-[18px] left-1/2 z-[2] " +
          "-translate-x-1/2 text-[10px] font-medium uppercase tracking-[.16em] text-white/45"
        }
      >
        radiance cascade loading field
      </div>
    </div>
  );
}