Corrupted Theme Vortex: An Interstellar-Style Black Hole Animation for Glassmorphic UIs

What Is Vortex?

Vortex is a background animation component for the Corrupted Theme design system. It renders a black hole with an orbiting accretion disk that you can place behind glassmorphic UI panels. The animation runs at 60fps on modern hardware and is designed to be visually dramatic without overwhelming the foreground content.

The visual reference is the Gargantua black hole from Interstellar - a flattened accretion disk viewed at an angle, with matter spiraling inward and a glowing corona around the event horizon. Corrupted Theme's version adds its signature magenta and purple color palette.

Accretion Disk Physics

The accretion disk evolved through several iterations before landing on the current approach:

1. Spark arms (initial): Discrete particle bursts along spiral arms. Looked too much like a galaxy, not a black hole
2. Orbital particles (v2): Individual particles on orbital paths. Better, but still felt scattered
3. Continuous accretion disk (final): A dense band of particles forming a flattened disk with side-view perspective. Matter flows inward continuously, creating the illusion of gravitational pull

The final implementation uses a near/far depth split for proper Saturn-ring layering. Particles in front of the black hole render on top of the event horizon and corona, while particles behind render underneath. This creates convincing depth without actual 3D rendering.

Spaghettification

As particles approach the event horizon, they exhibit spaghettification - stretching along their direction of travel and accelerating. The effect is subtle but sells the illusion of intense gravitational tidal forces. Particles that cross the event horizon threshold are removed from the simulation and respawned at the disk edge.

Reversed Flow

Early versions had matter spiraling outward (visually expanding). The final version reverses this - matter spirals inward toward the event horizon, which reads correctly as gravitational accretion. This small change dramatically improved the visual believability.

Color Rendering Pipeline

Getting the colors right required solving several rendering artifacts:

• White bleed: High-energy particles near the core were blowing out to white. Fixed by clamping HSV saturation to [0,1] before RGB conversion and applying Reinhard tone mapping
• Purple zone: Purple was being interpolated through blue/magenta instead of rendered as a true purple. Fixed by assigning a dedicated hue zone (0.65-0.74) specifically for purple particles
• Power curve collapse: Applying a power curve after Reinhard tone mapping was collapsing dim cloud particles to pure black, losing detail in the outer disk. Reordered the pipeline to preserve low-luminance detail
• Magenta corona: The corona glow around the event horizon is rendered as a separate element with its own width and opacity controls, tightened to 16-50 pixel width to prevent it from overwhelming the disk

The gold halo (gravitational lensing effect) was also reduced to prevent it from dominating the palette. The final look is predominantly deep purples and magentas with a restrained warm accent.

Integration with Corrupted Theme

Vortex is available as part of Corrupted Theme v0.1.8:

npm install @whykusanagi/corrupted-theme@0.1.8

Use it as a background behind glassmorphic panels. The animation's dark palette and organic motion complement the frosted glass aesthetic without competing for attention. The vortex renders on a Canvas element that sits behind the glass-backdrop layer.

All version references across the package (package.json, README, changelog, docs) are synchronized to 0.1.8 following the documented version bump procedure.

Ask Celeste

Q: Does the Vortex animation impact page performance?
A: On modern hardware (2020+ laptop, any recent desktop), it runs at 60fps with minimal CPU impact since it's Canvas-rendered and uses requestAnimationFrame. On older or low-power devices, the particle count can be reduced or the animation can be paused entirely. The glassmorphic panels in front use backdrop-filter: blur which is GPU-accelerated, so the combination stays smooth on capable hardware.

Q: Can I use just the Vortex animation without the rest of Corrupted Theme?
A: The Vortex component is part of the full package and shares the theme's color variables and Canvas utilities. You could extract it, but you'd need to bring along the color pipeline and particle system utilities. For standalone use, it's easier to import the full theme and only use the Vortex component.

Q: Why does the black hole look different from the one in Interstellar?
A: Interstellar's Gargantua was rendered with physically accurate general relativity light bending by Kip Thorne's team. This is a stylized 2D approximation optimized for looking good behind UI panels, not for scientific accuracy. The accretion disk, corona, and depth layering evoke the same visual language, but with Corrupted Theme's signature magenta/purple palette instead of the warm orange tones in the film. It's art direction, not astrophysics.