3D Warp Speed Tunnel

This is a 3D Warp Speed Tunnel. It renders a four-sided grid tunnel utilizing CSS 3D transforms, through which animated gradient “beams” travel infinitely. Its function is to provide an immersive, spatial background for hero sections or focal cards, establishing a strong sense of velocity and technological depth.

Specs

• Weight: ~5 KB (Dependencies: GSAP, dat.gui).
• Performance: High. The 3D architecture is built with hardware-accelerated CSS properties (perspective, transform-style: preserve-3d, rotateX). The beams animate via CSS @keyframes on the translate property, avoiding layout thrashing.
• Theming / Customization: Highly customizable. The central JS CONFIG object and dat.gui panel control everything from perspective depth and motion speed to beam density and color ranges. Native CSS prefers-color-scheme: dark is implemented.
• Responsiveness: Fluid. It utilizes modern CSS Container Queries (100cqi, 100cqmax) rather than viewport units, allowing the 3D tunnel to accurately scale relative to its parent .warp container rather than the entire browser window.
• Web APIs: View Transitions API (used for the GUI perspective toggle).
• Graceful Degradation: [!] Relies heavily on modern CSS Container Queries (@container). In unsupported browsers, the tunnel walls will fail to size correctly, breaking the 3D illusion entirely.

Anatomy

• HTML: A structural .scene holding a .wrapper. Inside sits the foreground <article> card and the .warp container. The .warp holds four .warp__side divs (top, bottom, left, right).
• CSS: The architectural core. perspective: calc(var(--perspective) * 1px) defines the camera depth. The four sides use transform-origin and rotateX(-90deg) (or variants) to fold perfectly into a box shape extending into the Z-axis. Background gradients create the wireframe grid.
• JS: A particle generator. GENERATE_BEAMS() calculates random properties (hue, X-position, speed, delay) via GSAP utilities, creates DOM nodes (<div class="beam">), injects CSS variables inline, and appends them to the four tunnel sides.

Logic

The standout logic is the combination of Container Queries and inline CSS variables to drive individual particle animations.

.beam {
  width: var(--grid-size);
  left: calc(var(--x, 0) * var(--grid-size));
  /* ... */
  animation-duration: calc((var(--speed, 0) * var(--reduced, 0)) * 1s);
  animation-delay: calc((var(--delay, 0) * var(--reduced, 1)) * -1s);
}

@keyframes warp {
  0% { translate: -50% 100cqmax; }
  100% { translate: -50% -100%; }
}

Instead of writing a complex requestAnimationFrame loop in JavaScript to calculate the X/Y coordinates of every beam on every frame, JS is only used once upon initialization to assign random CSS variables (--speed, --delay, --x). The CSS engine takes over, using these variables to offset a single, universal @keyframes animation. Because the animation relies on 100cqmax (Container Query Maximum), the beams perfectly traverse the exact length of the tunnel regardless of how the user resizes the browser window.

Feel

Kinetic and encompassing. The rigid, mathematical grid provides a stable anchor, while the randomized beams rushing past the camera create a visceral sensation of forward momentum. The depth is palpable. The stark contrast between the static, legible foreground card and the chaotic 3D background anchors the user’s focus while keeping the peripheral vision highly stimulated.