Vandoko Grid Tunnel

A perspective tunnel rendered entirely as inline SVG paths — vanishing point at 72%/38%, 18 chaotic terrain contour lines layered over 20 fanning perspective lines, all masked with horizontal + vertical gradient fades so the edges blend seamlessly. Strokes consume var(--border) for the perspective grid and an interpolated oklch lightness ramp on the contours for depth.

Server-component friendly: no "use client", no canvas, no animation, no JavaScript on the client. Drop it behind any hero as an absolutely-positioned background layer.

Decorative hero background. Registry consumers may use this for marketing surfaces. The registry's own landing chose a typographic frame over an active background to honor the prestige read; this block remains a first-class export for consumers who want a quieter, motion-free hero layer.

Installation

Usage

import { VdkGridTunnel } from "@/components/vdk-grid-tunnel";

export default function HeroSection() {
  return (
    <section className="relative min-h-[36rem] overflow-hidden bg-background">
      <VdkGridTunnel opacity={0.5} />
      <div className="relative z-10 flex h-full items-center justify-center">
        <h1 className="text-6xl font-bold">Future. Now. UI.</h1>
      </div>
    </section>
  );
}

Props

Features

• Server component — Pure SVG, no "use client", no client JS bundle weight
• Brand-tokened strokes — Perspective grid uses var(--border); contour lines use an interpolated oklch lightness ramp
• Deterministic noise — Sin-hash pseudo-random keeps the contour shape stable across renders (no hydration mismatch risk)
• Cliff drop-off — Terrain contours bend on the right ~73-87% of width to mimic a perspective edge
• Fade mask — Horizontal + vertical gradient mask so edges blend into the host background
• Zero dependencies — Only React

Lineage

Modifications

• Extracted from vandoko-ai-site TerrainGrid component
• Re-tokened: contour-line hsl(240, 4%, L%) → oklch(L 0.012 285) for brand-palette alignment
• Re-tokened: perspective-line literal #27272a → var(--border) for theme-respect
• Mask gradient ids namespaced (vdk-tg-*) to prevent collisions with multi-instance renders
• Added default export