How to use 3D Tunnel of Infinite Lines?

Simply copy the HTML and CSS snippets provided, inject them into your design blocks, and enjoy premium high-performance background motion.

MotionCanvas CSS

⌘K

https://motioncanvas.online/preview/3d-tunnel-of-infinite-lines

Scroll Down

Loading Canvas Shader...

Next-Gen Scroll Mechanics

Experience Beautiful Ambient Depth

This browser window is simulating a production webpage. As you scroll down, the ambient 3D Tunnel of Infinite Lines background dynamically zooms and pulls focus in real-time, creating beautiful, cinematic parallax depth.

Built for Ultra Performance

Modern web layouts require buttery-smooth animations. Our styles run completely on the GPU, avoiding CPU reflow and main-thread layout jank.

Focus Pull Parallax

Scroll depth controls blur intensity and lens scaling simultaneously to guide focus elegantly.

GPU-Accelerated

Uses hardware transforms and native filters, optimized for stable 120fps scrolling.

Highly Customizable

Adjust speed, maximum blur limit, zoom multipliers, and filters in real-time.

3D Tunnel of Infinite Lines

🔵 Interactive

An interactive, deep three-dimensional warp tunnel with glowing concentric lines that rotate and zoom towards the screen in real 3D parallax.

#3D#interactive#tunnel#glow#retro

Sponsor Advertisement

728 × 90 | Responsive Banner

Responsive Horizontal Leaderboard

Slot ID: ca-pub-detail-below-preview

Google AdSense Placeholder

Interactive Settings

Motion PresetsCustom Tuning

Animation Speed1.0x

Blur (Aesthetic diffusion)0px

Layer Opacity100%

Scale Zoom1.0x

Rotation Angle0°

Primary Color

#39ff14

Secondary Color

#00e5ff

Sponsor Advertisement

300 × 250 | Rectangle

Medium Rectangle Block

Slot ID: ca-pub-detail-after-customization

Google AdSense Placeholder

Quick Copy Actions

Download File Packages

Keyboard Shortcuts

Space Play/Pause

F Fullscreen

R Reset Slider

C Copy Code

Sponsor Advertisement

728 × 90 | Responsive Banner

Responsive Horizontal Leaderboard

Slot ID: ca-pub-detail-before-related

Google AdSense Placeholder

More in 3D Interactive

Loading Canvas Shader...

🔵 Interactive

3D Isometric Block Flow

Floating translucent 3D isometric cubes drifting and spinning in a true three-dimensional viewport, tilting dynamically with the cursor.

Loading Canvas Shader...

🔵 Interactive

3D Celestial Particle Vortex

Multi-layered depth-staggered star clusters rotating in opposing directions that shift with parallax 3D depth based on mouse coords.

Loading Canvas Shader...

🔵 Interactive

3D Glass Monolith

Dual premium, minimalist 3D frosted glass monoliths floating elegantly on the left and right in deep cosmic space. Features real-time symmetric tilting coordinates, fine wireframe details, and dynamic backdrop blurring.

3D Tunnel of Infinite Lines - CSS-only 3D Interactive background for React & Tailwind

Integrate the 3D Tunnel of Infinite Lines directly into your website. This asset is rendered using pure CSS and HTML keyframes. It is optimized for zero layout-shifts and runs with high-performance hardware-accelerated processing.

⚡ Performance Specifications

Render Mode: INTERACTIVE (CSS-only)
Fluidity: Locked at 60fps dynamic loop
Bundle Footprint: Zero external NPM dependencies
SEO Indexing status: 100% Crawlable static semantic HTML

🛠️ Integration Capabilities

Our templates expose inline design tokens like --color-1 and --color-2 for infinite color palettes. This template is designed to fit inside hero elements, full-screen landing pages, and interactive presentation cards.

Technical Code Reference & Syntaxes for Googlebot & Crawlers

The snippets below display the direct, unminified source code utilized for rendering this background.

HTML & Inline CSS Snippet (Vanilla)

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Tunnel of Infinite Lines</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #09090b;
    }
    
    .tunnel-container {
      width: 100%;
      height: 100%;
      background: #020205;
      overflow: hidden;
      position: relative;
      perspective: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .tunnel-scene {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transform: rotateX(calc(var(--mouse-y, 0) * -22deg)) rotateY(calc(var(--mouse-x, 0) * 22deg));
      transition: transform 0.15s ease-out;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .tunnel-ring {
      position: absolute;
      width: 350px;
      height: 350px;
      border: 2px solid var(--color-1, #39ff14);
      border-radius: 50%;
      box-shadow: 0 0 25px var(--color-1, rgba(57, 255, 20, 0.45)), inset 0 0 25px var(--color-1, rgba(57, 255, 20, 0.45));
      transform-style: preserve-3d;
      animation: tunnel-zoom 6s linear infinite;
      opacity: 0;
    }
    
    .ring-1 { animation-delay: 0s; }
    .ring-2 { 
      animation-delay: -1.5s; 
      border-color: var(--color-2, #00e5ff); 
      box-shadow: 0 0 25px rgba(0, 229, 255, 0.45), inset 0 0 25px rgba(0, 229, 255, 0.45); 
    }
    .ring-3 { animation-delay: -3s; }
    .ring-4 { 
      animation-delay: -4.5s; 
      border-color: var(--color-2, #00e5ff); 
      box-shadow: 0 0 25px rgba(0, 229, 255, 0.45), inset 0 0 25px rgba(0, 229, 255, 0.45); 
    }
    
    @keyframes tunnel-zoom {
      0% {
      transform: translateZ(-600px) rotate(0deg);
      opacity: 0;
      }
      15% {
      opacity: 0.95;
      }
      85% {
      opacity: 0.95;
      }
      100% {
      transform: translateZ(250px) rotate(180deg);
      opacity: 0;
      }
    }
  </style>
</head>
<body>

  <div class="tunnel-container">
    <div class="tunnel-scene">
    <div class="tunnel-ring ring-1"></div>
    <div class="tunnel-ring ring-2"></div>
    <div class="tunnel-ring ring-3"></div>
    <div class="tunnel-ring ring-4"></div>
    </div>
  </div>

  
  <script>
    // Throttled interactive cursor coordinates mapping
    (function() {
      document.documentElement.style.setProperty('--mouse-x', '0');
      document.documentElement.style.setProperty('--mouse-y', '0');

      let targetX = 0, targetY = 0;
      let currentX = 0, currentY = 0;

      window.addEventListener('mousemove', (e) => {
        targetX = (e.clientX / window.innerWidth) - 0.5;
        targetY = (e.clientY / window.innerHeight) - 0.5;
      });

      window.addEventListener('mouseleave', () => {
        targetX = 0;
        targetY = 0;
      });

      function update() {
        currentX += (targetX - currentX) * 0.08;
        currentY += (targetY - currentY) * 0.08;
        
        document.documentElement.style.setProperty('--mouse-x', currentX.toFixed(4));
        document.documentElement.style.setProperty('--mouse-y', currentY.toFixed(4));
        
        requestAnimationFrame(update);
      }
      requestAnimationFrame(update);
    })();
  </script>
  
</body>
</html>

React Component Wrapper (TSX)

import React, { useEffect, useRef } from 'react';

export default function 3DTunnelofInfiniteLinesBackground() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let targetX = 0, targetY = 0;
    let currentX = 0, currentY = 0;
    let frameId: number;

    const handleMouseMove = (e: MouseEvent) => {
      targetX = (e.clientX / window.innerWidth) - 0.5;
      targetY = (e.clientY / window.innerHeight) - 0.5;
    };

    const handleMouseLeave = () => {
      targetX = 0;
      targetY = 0;
    };

    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseleave', handleMouseLeave);

    const updateCoordinates = () => {
      currentX += (targetX - currentX) * 0.08;
      currentY += (targetY - currentY) * 0.08;

      if (containerRef.current) {
        containerRef.current.style.setProperty('--mouse-x', currentX.toFixed(4));
        containerRef.current.style.setProperty('--mouse-y', currentY.toFixed(4));
      }
      frameId = requestAnimationFrame(updateCoordinates);
    };
    
    frameId = requestAnimationFrame(updateCoordinates);

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('mouseleave', handleMouseLeave);
      cancelAnimationFrame(frameId);
    };
  }, []);

  return (
    <div 
      ref={containerRef} 
      style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}
    >
      <style dangerouslySetInnerHTML={{ __html: `
        .tunnel-container {
          width: 100%;
          height: 100%;
          background: #020205;
          overflow: hidden;
          position: relative;
          perspective: 500px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .tunnel-scene {
          position: absolute;
          width: 100%;
          height: 100%;
          transform-style: preserve-3d;
          transform: rotateX(calc(var(--mouse-y, 0) * -22deg)) rotateY(calc(var(--mouse-x, 0) * 22deg));
          transition: transform 0.15s ease-out;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .tunnel-ring {
          position: absolute;
          width: 350px;
          height: 350px;
          border: 2px solid var(--color-1, #39ff14);
          border-radius: 50%;
          box-shadow: 0 0 25px var(--color-1, rgba(57, 255, 20, 0.45)), inset 0 0 25px var(--color-1, rgba(57, 255, 20, 0.45));
          transform-style: preserve-3d;
          animation: tunnel-zoom 6s linear infinite;
          opacity: 0;
        }
        
        .ring-1 { animation-delay: 0s; }
        .ring-2 { 
          animation-delay: -1.5s; 
          border-color: var(--color-2, #00e5ff); 
          box-shadow: 0 0 25px rgba(0, 229, 255, 0.45), inset 0 0 25px rgba(0, 229, 255, 0.45); 
        }
        .ring-3 { animation-delay: -3s; }
        .ring-4 { 
          animation-delay: -4.5s; 
          border-color: var(--color-2, #00e5ff); 
          box-shadow: 0 0 25px rgba(0, 229, 255, 0.45), inset 0 0 25px rgba(0, 229, 255, 0.45); 
        }
        
        @keyframes tunnel-zoom {
          0% {
          transform: translateZ(-600px) rotate(0deg);
          opacity: 0;
          }
          15% {
          opacity: 0.95;
          }
          85% {
          opacity: 0.95;
          }
          100% {
          transform: translateZ(250px) rotate(180deg);
          opacity: 0;
          }
        }
      ` }} />
      
      {/* HTML Structure */}
      <div 
        style={{ width: '100%', height: '100%' }}
        dangerouslySetInnerHTML={{ __html: `
          <div class="tunnel-container">
            <div class="tunnel-scene">
            <div class="tunnel-ring ring-1"></div>
            <div class="tunnel-ring ring-2"></div>
            <div class="tunnel-ring ring-3"></div>
            <div class="tunnel-ring ring-4"></div>
            </div>
          </div>
        ` }}
      />
    </div>
  );
}

Next.js App Router Component (use client)

'use client';

import React, { useEffect, useRef } from 'react';

export default function 3DTunnelofInfiniteLinesBackground() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let targetX = 0, targetY = 0;
    let currentX = 0, currentY = 0;
    let frameId: number;

    const handleMouseMove = (e: MouseEvent) => {
      targetX = (e.clientX / window.innerWidth) - 0.5;
      targetY = (e.clientY / window.innerHeight) - 0.5;
    };

    const handleMouseLeave = () => {
      targetX = 0;
      targetY = 0;
    };

    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseleave', handleMouseLeave);

    const updateCoordinates = () => {
      currentX += (targetX - currentX) * 0.08;
      currentY += (targetY - currentY) * 0.08;

      if (containerRef.current) {
        containerRef.current.style.setProperty('--mouse-x', currentX.toFixed(4));
        containerRef.current.style.setProperty('--mouse-y', currentY.toFixed(4));
      }
      frameId = requestAnimationFrame(updateCoordinates);
    };
    
    frameId = requestAnimationFrame(updateCoordinates);

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('mouseleave', handleMouseLeave);
      cancelAnimationFrame(frameId);
    };
  }, []);

  return (
    <div 
      ref={containerRef} 
      className="w-full h-full relative overflow-hidden"
    >
      <style dangerouslySetInnerHTML={{ __html: `
        .tunnel-container {
          width: 100%;
          height: 100%;
          background: #020205;
          overflow: hidden;
          position: relative;
          perspective: 500px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .tunnel-scene {
          position: absolute;
          width: 100%;
          height: 100%;
          transform-style: preserve-3d;
          transform: rotateX(calc(var(--mouse-y, 0) * -22deg)) rotateY(calc(var(--mouse-x, 0) * 22deg));
          transition: transform 0.15s ease-out;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .tunnel-ring {
          position: absolute;
          width: 350px;
          height: 350px;
          border: 2px solid var(--color-1, #39ff14);
          border-radius: 50%;
          box-shadow: 0 0 25px var(--color-1, rgba(57, 255, 20, 0.45)), inset 0 0 25px var(--color-1, rgba(57, 255, 20, 0.45));
          transform-style: preserve-3d;
          animation: tunnel-zoom 6s linear infinite;
          opacity: 0;
        }
        
        .ring-1 { animation-delay: 0s; }
        .ring-2 { 
          animation-delay: -1.5s; 
          border-color: var(--color-2, #00e5ff); 
          box-shadow: 0 0 25px rgba(0, 229, 255, 0.45), inset 0 0 25px rgba(0, 229, 255, 0.45); 
        }
        .ring-3 { animation-delay: -3s; }
        .ring-4 { 
          animation-delay: -4.5s; 
          border-color: var(--color-2, #00e5ff); 
          box-shadow: 0 0 25px rgba(0, 229, 255, 0.45), inset 0 0 25px rgba(0, 229, 255, 0.45); 
        }
        
        @keyframes tunnel-zoom {
          0% {
          transform: translateZ(-600px) rotate(0deg);
          opacity: 0;
          }
          15% {
          opacity: 0.95;
          }
          85% {
          opacity: 0.95;
          }
          100% {
          transform: translateZ(250px) rotate(180deg);
          opacity: 0;
          }
        }
      ` }} />
      
      {/* HTML Structure */}
      <div 
        className="w-full h-full"
        dangerouslySetInnerHTML={{ __html: `
          <div class="tunnel-container">
            <div class="tunnel-scene">
            <div class="tunnel-ring ring-1"></div>
            <div class="tunnel-ring ring-2"></div>
            <div class="tunnel-ring ring-3"></div>
            <div class="tunnel-ring ring-4"></div>
            </div>
          </div>
        ` }}
      />
    </div>
  );
}

Raw CSS Stylesheet Snippet

.tunnel-container {
  width: 100%;
  height: 100%;
  background: #020205;
  overflow: hidden;
  position: relative;
  perspective: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tunnel-scene {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--mouse-y, 0) * -22deg)) rotateY(calc(var(--mouse-x, 0) * 22deg));
  transition: transform 0.15s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tunnel-ring {
  position: absolute;
  width: 350px;
  height: 350px;
  border: 2px solid var(--color-1, #39ff14);
  border-radius: 50%;
  box-shadow: 0 0 25px var(--color-1, rgba(57, 255, 20, 0.45)), inset 0 0 25px var(--color-1, rgba(57, 255, 20, 0.45));
  transform-style: preserve-3d;
  animation: tunnel-zoom 6s linear infinite;
  opacity: 0;
}

.ring-1 { animation-delay: 0s; }
.ring-2 { 
  animation-delay: -1.5s; 
  border-color: var(--color-2, #00e5ff); 
  box-shadow: 0 0 25px rgba(0, 229, 255, 0.45), inset 0 0 25px rgba(0, 229, 255, 0.45); 
}
.ring-3 { animation-delay: -3s; }
.ring-4 { 
  animation-delay: -4.5s; 
  border-color: var(--color-2, #00e5ff); 
  box-shadow: 0 0 25px rgba(0, 229, 255, 0.45), inset 0 0 25px rgba(0, 229, 255, 0.45); 
}

@keyframes tunnel-zoom {
  0% {
  transform: translateZ(-600px) rotate(0deg);
  opacity: 0;
  }
  15% {
  opacity: 0.95;
  }
  85% {
  opacity: 0.95;
  }
  100% {
  transform: translateZ(250px) rotate(180deg);
  opacity: 0;
  }
}