127 Components
Wormhole Tunnel
BackgroundsStructured hyperspace wormhole tunnel on Canvas 2D featuring concentric polygonal energy rings and longitudinal warp ribs scaling from an interactive Lissajous vanishing point.
Warp Velocity
Wormhole Conduit
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/wormhole-tunnel.json"
Props
TypeScript props supported by <WormholeTunnel />.
| Prop | Type | Default | Description |
|---|---|---|---|
| ringCount | number | 28 | Number of concentric depth rings rendered along the wormhole. |
| speed | number | 1.0 | Forward traversal velocity multiplier. |
| baseHue | number | 195 | Starting HSL hue angle in degrees (0-360). |
| hueShift | number | 90 | Total hue shift across the depth of the tunnel. |
| twist | number | 1.2 | Helical rotational twist factor along the tunnel axis. |
| interactive | boolean | true | Whether pointer movement bends the wormhole vanishing point. |
| children | React.ReactNode | — | Optional foreground UI rendered inside the wormhole container. |
| className | string | — | Additional CSS classes for the root container. |
Key Features
- Exponential 3D perspective projection of concentric geodesic rings and longitudinal ribs
- Pointer-reactive vanishing throat that smoothly falls back to an organic Lissajous oscillation
- Continuous helical twist and spectral HSL hue shifting from throat to outer aperture
- Interactive HUD with Cherenkov Cyan, Hyperdrive Magenta, and Chrono Gold presets
Keyboard & Accessibility
- Canvas is marked aria-hidden so screen readers bypass decorative tunnel geometry
- Interactive speed and twist sliders allow reducing motion velocity on demand