Warp Tunnel

Use it like any other component. Choose a theme with preset; any prop you pass as well overrides the preset.

import { WarpTunnel } from '@/components/effects/warp-tunnel/warp-tunnel'

// 1. A pinned stage: the tunnel stays on screen while a tall wrapper scrolls past, and the scroll flies you through it.
export function Journey() {
  return (
    <section data-warp-track className="relative h-[500vh]">
      <div className="sticky top-0 h-screen">
        <WarpTunnel preset="Solar" className="absolute inset-0" />
        <h2 className="relative z-10 grid h-full place-items-center text-6xl text-white">Take the long way in.</h2>
      </div>
    </section>
  )
}

// 2. Drive it yourself: a number from 0 (the entrance) to 1 (the light). Jumps become a short warp.
export function Scrubbed({ value }: { value: number }) {
  return (
    <div className="relative h-96">
      <WarpTunnel preset="Abyss" progress={value} />
    </div>
  )
}

// 3. A calm hero: no scroll input, just a slow drift and a pointer that steers the vanishing point.
export function Hero() {
  return (
    <div className="relative h-[70vh]">
      <WarpTunnel preset="Synth" scrollDriven={false} speed={0.6} />
    </div>
  )
}

// Presets: Hyperspace, Solar, Abyss, Synth, Paper. Any prop you pass (colorA, twist, shape...) overrides the preset.
// scrollDriven reads, in order: scrollTarget, the nearest [data-warp-track] ancestor, the nearest scrollable ancestor, the page.
// The stage above is <WarpTunnelShowcase />, also exported: a scrollable stage with an Auto-fly switch.

<WarpTunnel preset="Solar" speed={1} />

• Hyperspace
• Solar
• Abyss
• Synth
• Paper

• Scroll flies you through. With scrollDriven on, the scroll position of a track (a tall element you pin the effect inside), a scroll container or the page becomes the flight progress, 0 at the entrance and 1 at the light. Progress is eased, and how fast it changes is what stretches the particles and ribs into streaks, widens the aberration and fans out the rays; when you stop they relax over about a second. Scrolling back flies in reverse.
• With no input it drifts forward slowly, so it is never frozen. The pointer steers the vanishing point and the tunnel bends toward it, the far end more than the near walls. Set progress to take over from scroll (a slider, a timeline, your own state); set scrollDriven to false for a pure ambient background.
• It sizes to its parent and sits behind your content: give the parent a height, then put your content above it with position and z-index. Pin it with position: sticky inside a tall data-warp-track wrapper for the classic scroll story.
• It pauses while off screen and in a background tab, lowers its resolution automatically if frames run slow (the particle layers and the chromatic aberration are the first things dropped), and draws one composed still frame, with a little streak, under prefers-reduced-motion.
• Without WebGL, and before the first frame, you see a CSS poster of the same tunnel in the same colours. The Paper preset (and any light background) switches to ink on cream: the three colours become pigments that darken the page instead of lighting it.

See all effects