Loading shader
A ray-traced black hole seen from just above its glowing disk. Gravity bends the far side of the disk over the top and a thin ring of light around the edge, while the disk turns slowly in the dark.
space, heavy, MIT, v1.0.0
This is the code for the shader exactly as it is set above. It updates as you change the controls.
Props of the BlackHole React component. The JavaScript version takes the same names in its settings object.
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string, string, string] | ["#000000", "#9a4614", "#f2a873", "#fff4e8"] | Space, Disk, outer, Disk, middle, Disk, core. Hex colours. |
| speed | number | 1 | Speed. Range 0 to 3. |
| scale | number | 1 | How large the hole appears. Range 0.4 to 2. |
| intensity | number | 1 | How brightly the disk burns. Range 0.3 to 2.5. |
| tilt | number | 4 | How far above the disk the view is, in degrees. Range 2 to 30. |
| x | number | 0.34 | Moves the hole left or right. Range -0.5 to 0.5. |
| y | number | 0.15 | Moves the hole down or up. Range -0.5 to 0.5. |
| seed | number | 11 | 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. |
Heavy. Cost 3 of 3.
Many samples per pixel. Best in a contained area such as a hero or a card, or with maxDpr set to 1.