Event Horizon

What is Event Horizon?

Event Horizon ray-marches a Schwarzschild black hole. For every pixel it integrates a light ray backwards through curved spacetime using velocity-Verlet integration, which is symplectic and so keeps the orbits stable instead of letting them spiral in from numerical drift. The accretion disk is shaded as a Novikov-Thorne disk: Keplerian angular velocity, Doppler beaming on the approaching side, gravitational redshift near the horizon. Gravitational lensing lifts a second, inverted image of the disk above and below the shadow, and the dust behind it is fbm noise with domain rotation to suppress grid artefacts. Rotation speed, disk intensity, tilt and chromatic aberration are exposed as parameters. This is the heaviest effect in the library — the fragment shader steps every ray — so it wants a real GPU and reads best as a full-bleed hero rather than a small decorative tile.

Event Horizon is a free WebGL web effect in the TappyPrism library. Physics-based black hole with raytraced gravitational lensing, volumetric accretion disk, and Doppler beaming. It is rendered on the GPU by a fragment shader, so it costs almost nothing on the CPU and works well as a full-screen background. It ships as a single self-contained HTML file (event-horizon.html) with zero dependencies — no npm package, no framework, no build step. It exposes 5 live parameters — Rotation Speed, Disk Intensity, Tilt, Rotate, Chromatic — adjustable in the browser or at runtime.

Parameters

How to add Event Horizon to your page

1. Download the standalone file event-horizon.html and copy its source into your project.
2. Or embed it as a background iframe:

   <iframe src="https://prism.tappypotato.com/fx/event-horizon.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Event Horizon"></iframe>

3. Tune it at runtime with postMessage:

   iframe.contentWindow.postMessage({ type: 'param', name: 'ROTATION_SPEED', value: 0.3 }, '*');

Frequently asked questions

What is Event Horizon?

Event Horizon ray-marches a Schwarzschild black hole. For every pixel it integrates a light ray backwards through curved spacetime using velocity-Verlet integration, which is symplectic and so keeps the orbits stable instead of letting them spiral in from numerical drift. The accretion disk is shaded as a Novikov-Thorne disk: Keplerian angular velocity, Doppler beaming on the approaching side, gravitational redshift near the horizon. Gravitational lensing lifts a second, inverted image of the disk above and below the shadow, and the dust behind it is fbm noise with domain rotation to suppress grid artefacts. Rotation speed, disk intensity, tilt and chromatic aberration are exposed as parameters. This is the heaviest effect in the library — the fragment shader steps every ray — so it wants a real GPU and reads best as a full-bleed hero rather than a small decorative tile. Event Horizon is a free WebGL web effect in the TappyPrism library. Physics-based black hole with raytraced gravitational lensing, volumetric accretion disk, and Doppler beaming. It is rendered on the GPU by a fragment shader, so it costs almost nothing on the CPU and works well as a full-screen background. It ships as a single self-contained HTML file (event-horizon.html) with zero dependencies — no npm package, no framework, no build step. It exposes 5 live parameters — Rotation Speed, Disk Intensity, Tilt, Rotate, Chromatic — adjustable in the browser or at runtime.

How do I add Event Horizon to my website?

Download the standalone file at https://prism.tappypotato.com/fx/event-horizon.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/event-horizon.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Event Horizon"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'ROTATION_SPEED', value: 0.3 }, '*').