React Tunnel Shaders

Powered by

React

react-shaders

GPU Shaders

Need hypnotic tunnel effects for creative projects? Most developers struggle with complex 3D tunnel geometry or heavy video files. This React tunnel component uses the legendary Danilo Guanabara shader technique to create mesmerizing psychedelic tunnels with mathematical precision and minimal code.

Copy-paste TypeScript component that creates infinite tunnel effects with RGB color separation and organic distortion. Classic demoscene algorithm adapted for modern React applications. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—pure mathematical beauty.

React tunnel with classic demoscene technique

Hypnotic infinite tunnel with RGB separation and psychedelic distortion:

import { TunnelShaders } from "@/components/ui/shadcn-io/tunnel-shaders";export default function TunnelShadersDemo() {  return (    <TunnelShaders      speed={1.0}      intensity={1.0}      zoom={1.0}      distortion={1.0}      colorShift={0.5}      className="h-full w-full"    />  );}

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface TunnelShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  intensity?: number;  zoom?: number;  distortion?: number;  colorShift?: number;}const fragmentShader = `// http://www.pouet.net/prod.php?which=57245// If you intend to reuse this shader, please add credits to 'Danilo Guanabara'void mainImage( out vec4 fragColor, in vec2 fragCoord ) {    vec3 c;    float l, z = iTime * u_speed;    for(int i = 0; i < 3; i++) {        vec2 uv, p = fragCoord.xy / iResolution.xy;        uv = p;        p -= 0.5;        p.x *= iResolution.x / iResolution.y;        z += 0.07 * u_zoom;        l = length(p);        uv += p / l * (sin(z) + 1.0) * abs(sin(l * 9.0 - z - z)) * u_distortion;        c[i] = 0.01 * u_intensity / length(mod(uv, 1.0) - 0.5);    }    // Add color shifting    c = c * (1.0 + sin(iTime * u_colorShift) * 0.3);    fragColor = vec4(c / l, 1.0);}`;export const TunnelShaders = forwardRef<HTMLDivElement, TunnelShadersProps>(({  className,  speed = 1.0,  intensity = 1.0,  zoom = 1.0,  distortion = 1.0,  colorShift = 1.0,  ...props}, ref) => {  return (    <div      ref={ref}      className={cn('w-full h-full', className)}      {...props}    >      <Shader        fs={fragmentShader}        uniforms={{          u_speed: { type: '1f', value: speed },          u_intensity: { type: '1f', value: intensity },          u_zoom: { type: '1f', value: zoom },          u_distortion: { type: '1f', value: distortion },          u_colorShift: { type: '1f', value: colorShift },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});TunnelShaders.displayName = "TunnelShaders";

Original shader by Danilo Guanabara

Perfect for React 19, Next.js 15, and modern TypeScript projects. Tunnel effects rendered entirely on GPU using legendary GLSL technique with mathematical distortion. Customizable speed, intensity, zoom, distortion, and color shifting. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/tunnel-shaders.json

npx shadcn@latest add https://www.shadcn.io/registry/tunnel-shaders.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/tunnel-shaders.json

bunx shadcn@latest add https://www.shadcn.io/registry/tunnel-shaders.json

Usage

import { TunnelShaders } from "@/components/ui/tunnel-shaders";

export default function PsychedelicBackground() {
  return (
    <TunnelShaders
      speed={1.0}
      intensity={1.0}
      zoom={1.0}
      distortion={1.0}
      colorShift={0.5}
    >
      <div className="relative z-10">
        <h1>Content over tunnel</h1>
      </div>
    </TunnelShaders>
  );
}

Why tunnel animations struggle with performance

3D mesh tunnels require complex geometry and heavy rendering. Video backgrounds lack interactivity and real-time control. Most libraries use expensive ray marching that doesn't capture the elegant mathematical beauty of classic demoscene techniques.

Classic shader mathematics solve this with pure algorithmic beauty. No 3D geometry needed—just mathematical distortion and RGB channel separation. Legendary demoscene optimization creates infinite tunnel depth with minimal GPU cost.

This React tunnel component uses the famous Danilo Guanabara technique for authentic demoscene aesthetics. Mathematical distortion creates organic tunnel movement. RGB channel processing generates classic color separation effects. Pure algorithmic art with modern React integration.

React tunnel shader features

• Classic demoscene algorithm - Legendary Danilo Guanabara technique adapted for React
• Mathematical tunnel generation - Pure algorithm creates infinite tunnel without 3D geometry
• RGB channel separation - Classic color processing for authentic retro aesthetics
• Organic distortion patterns - Mathematical functions create fluid tunnel movement
• Hypnotic animation loops - Seamless infinite tunnel with mesmerizing flow
• Psychedelic color effects - Dynamic color shifting and intensity modulation
• Minimal GPU cost - Elegant algorithm optimized for maximum visual impact
• Customizable parameters - Control speed, intensity, zoom, distortion, and colors
• Demoscene authenticity - Faithful adaptation of classic shader art techniques
• Infinite tunnel depth - Mathematical precision creates endless tunnel illusion
• TypeScript React component - Full IDE support with prop definitions
• Next.js compatible - Works with App Router and modern React patterns
• shadcn/ui integration - Consistent with Tailwind CSS design systems
• Copy-paste installation - No vendor lock-in, you own the shader code
• Creative project perfect - Ideal for artistic, experimental, or psychedelic themes

API Reference

TunnelShaders

Main container component for the hypnotic tunnel effect.

GPU tunnel troubleshooting

Tunnel too dim: Increase intensity to 1.5+ for brighter, more vivid tunnel effects. Classic algorithm creates authentic brightness that may appear subtle.

Movement too slow/fast: Adjust speed for comfortable tunnel flow. 0.5 creates meditative, slow movement. 2.0+ creates intense, rapid tunnel rushing.

Not enough distortion: Increase distortion to 2.0+ for more organic, fluid tunnel movement. Higher values create more psychedelic, flowing effects.

Colors too static: Boost colorShift to 1.5+ for more dynamic color cycling. RGB separation and color modulation create classic demoscene aesthetics.

Tunnel too shallow: Increase zoom to 1.5+ for faster depth progression. Creates more dramatic tunnel depth and rushing sensation.

Mobile performance issues: GPU tunnel calculation is optimized but intensive. Consider lowering intensity to 0.8 on mobile devices for smoother performance.

GPU compatibility: Tunnel effects require GPU for real-time mathematical calculation. Provide CSS gradient fallbacks for older devices without sufficient processing power.

More React shader components

Explore other GPU-accelerated shader components for Next.js applications:

React tunnel effect FAQ