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.

designanimationdevlog

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:

  1. Event horizon — a true void at the center, painted as a radial gradient fading to pure black
  2. Photon ring — a thin cyan glow at the edge of the horizon, suggesting light bending around the singularity
  3. 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:

  1. Approach — the portal fades in at the center of the viewport
  2. Lensing — background layers warp subtly toward the center
  3. Collapse — the event horizon expands to fill the screen
  4. Void — a brief full-black pause (the "moment of silence")
  5. 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.