Loading shader
A black hole with a burning photon ring and a spinning disk of hot gas. Move your cursor and the stars slide behind it, bending into arcs around the hole.
space, moderate, MIT, v1.1.0
This is the code for the shader exactly as it is set above. It updates as you change the controls.
Props of the EventHorizon React component. The JavaScript version takes the same names in its settings object.
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string, string, string] | ["#03040a", "#26305e", "#ff7a3d", "#ffe7b8"] | Space, Nebula, Disk, outer, Disk, inner. Hex colours. |
| speed | number | 1 | Speed. Range 0 to 3. |
| scale | number | 1 | Higher makes the nebula and stars smaller. Range 0.5 to 2.5. |
| intensity | number | 1 | Size of the hole and the strength of the lensing. Range 0.5 to 2. |
| disk | number | 1 | Brightness and width of the accretion disk. Range 0 to 2. |
| x | number | 0 | Moves the hole left or right. Range -0.5 to 0.5. |
| y | number | 0 | Moves the hole down or up. Range -0.5 to 0.5. |
| seed | number | 7 | Seed. Range 0 to 999. |
| paused | boolean | false | Freeze the animation on the current frame. |
| maxDpr | number | 2 | Upper bound for devicePixelRatio. Lower it to save GPU time. |
| className | string | none | Classes for the canvas, for example to position it. |
| style | CSSProperties | none | Inline styles for the canvas. |
Moderate. Cost 2 of 3.
Layered noise per pixel. Fine full-screen on recent phones and laptops; on weak GPUs the resolution steps down automatically.