Glacial Rift
BackgroundsSculpted ice walls frame a luminous, slowly shifting blue crevasse.
Event Horizon
A dark celestial silhouette bends warm orbital threads into a glowing disc.
LIVE PREVIEWInteract with the component
Just React. No extra dependencies.
CSS ModulesCopy the component and its CSS module into your project.
Usage
Matches your current playground settings.
jsx
import EventHorizon from "./EventHorizon";export default function Example() {return (<EventHorizonspeed={0.65}tilt={0.38}intensity={1}scale={1}grain={0.035}mouseInfluence={1}overlayOpacity={0.3}paused={false}minHeight={480}/>);}
Using Event Horizon
Use tilt to flatten the orbital disc or open its ellipse, and scale to adjust the size of the central silhouette. Keep foreground copy outside the bright rim. This is a stylised illustration rather than a physical black-hole simulation.
Copy the React file and its adjacent CSS module together. The scene uses native WebGL 2 with no external packages or assets. Pass foreground content through children and style it in your application.
Pause preserves the current frame and reduced motion disables automatic animation and pointer parallax. Hidden tabs and offscreen instances stop rendering. A static CSS fallback remains visible when WebGL is unavailable, and the canvas resumes after context restoration.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| tilt | number | No | 0.38 | Apparent opening of the elliptical disc from 0.2 to 0.75. Lower values flatten the orbit; higher values reveal more of its surface. |
| speed | number | No | 0.65 | Motion speed from 0 to 4. Zero freezes time while retaining pointer interaction. |
| intensity | number | No | 1 | Light intensity from 0.4 to 2. Adjusts the shader brightness without changing the foreground content. |
| scale | number | No | 1 | Scene magnification from 0.6 to 1.6. Higher values bring the forms closer. |
| grain | number | No | 0.035 | Film grain strength from 0 to 0.2. Zero removes the texture. |
| mouseInfluence | number | No | 1 | Mouse parallax strength from 0 to 3. Zero disables it. Touch input is ignored. |
| overlayOpacity | number | No | 0.3 | Opacity of the dark overlay, from 0 to 1. Use it to soften the scene behind foreground text. |
| paused | boolean | No | false | Freeze time and pointer animation at the current frame. Prop edits still update the scene; resuming preserves elapsed time. |
| minHeight | number | string | No | 420 | Minimum container height in pixels or a CSS length. Use style for additional sizing. |
| children | ReactNode | No | undefined | Optional foreground content above the decorative canvas. Supply your own layout and text colours. |
| className | string | No | "" | Additional CSS classes merged with the base component styles. |
| style | CSSProperties | No | undefined | Inline styles for caller-defined dimensions and visual overrides. |