2026-02-15
The Black Hole Portal
How we built an Interstellar-inspired black hole as the signature transition on the Nash-Tek home page.
The concept
Every editorial site needs a moment that makes you stop scrolling. For Nash-Tek, that moment is the portal — a black hole inspired by Gargantua from Interstellar. It sits between the collage and sidekick beats, swallowing the scene and revealing what comes next.
Visual anatomy
The portal has three concentric elements:
- Event horizon — a true void at the center, painted as a radial gradient fading to pure black
- Photon ring — a thin cyan glow at the edge of the horizon, suggesting light bending around the singularity
- Accretion disc — a faint magenta wash orbiting the horizon, hinting at the matter spiraling inward
Optional layers include a displacement-map lensing effect (SVG feDisplacementMap)
and a wireframe overlay that flashes briefly during the transition.
The five-phase transition
The portal beat plays out in five phases, all scrubbed by scroll position:
- Approach — the portal fades in at the center of the viewport
- Lensing — background layers warp subtly toward the center
- Collapse — the event horizon expands to fill the screen
- Void — a brief full-black pause (the "moment of silence")
- Emergence — the sidekick scene fades in from the void
Reduced motion
When prefers-reduced-motion is active, all phases reduce to simple opacity
fades. The lensing filter, wireframe flash, and accretion animation are disabled
entirely. The portal still appears as a static radial gradient — recognizable
but lightweight.
The portal was introduced in S41 and refined through S43/S44.