Black Hole — React Animated Background
The vgpu optimized-black-hole example as a drop-in component: a baked null-geodesic G-buffer, 4×4 photon-ring AA, animated disk shading, and HDR bloom — a verbatim port of the official pipeline (MIT, Vercel).
Usage
import { BlackHole, BLACK_HOLE_PRESETS } from "@/components/BlackHole";
export function PhysicsHero() {
return (
<section style={{ position: "relative", minHeight: "100dvh" }}>
<BlackHole {...BLACK_HOLE_PRESETS.interstellar}
{...{
interactive: true,
speed: 0.75,
distance: 13.5,
diskRadius: 9,
tilt: 0.16,
brightness: 0.75,
doppler: 1.21,
centerX: 0,
centerY: 0
}}
/>
<div style={{ position: "relative", zIndex: 1, padding: "8rem 2rem" }}>
<h1>Bend spacetime, not your budget</h1>
</div>
</section>
);
}Implementation notes & API
Purpose: the most physics-accurate background in the library — the real vgpu optimized-black-hole pipeline. Bake pass integrates one null geodesic per pixel (a = -1.5·h²·x/r⁵) into a G-buffer; refine measures 4×4 photon-ring coverage; shade animates the disk (thermal ramp, shear, Doppler beaming, redshift) over a prefiltered lensed star field; bloom + ACES composite the output. Mount: full-bleed opaque layer (near-black sky + stars) in a sized container; it owns its own canvas and resize handling. centerX/centerY frame the hole in NDC -1..1 (the example's desktop defaults are 0.8/0.3). Props: distance (camera orbit, horizon=1), diskRadius, fov, tilt (elevation rad), brightness, turbulence, density, doppler, stars (tint spread), roll, centerFade, bloom. Performance: the expensive bake runs once per geometry change; animation only re-shades (the example's core trick). Still the heaviest component here — one instance per page, desktop-first. Pointer: interactive={true} leans the scene yaw toward the cursor (the example's mouseYaw), applied per-frame without re-baking. Guardrails: WebGPU required with graceful fallback; SSR renders an inert canvas; prefers-reduced-motion bakes one static frame.
| 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 |