BackgroundsCanvasTunnel

Vortex Tunnel

A hypnotic zoom tunnel where cursor position controls the spin direction.

Effect guide

Copy the vortex tunnel animated background effect

What it is: A hypnotic zoom tunnel where cursor position controls the spin direction.

Where to use it: Use this motion pattern for hero sections, product pages, dashboards, and interactive marketing surfaces.

Supported formats: React, Vue, Vanilla JS.

Explore Animated Backgrounds

"use client";

import { useEffect, useRef } from "react";

export default function VortexTunnel() {
  const canvasRef = useRef(null);

useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
const mouseX = { current: 0.5 };
const config = {
  ringCount: 64,
  baseSpeed: 0.01,
  colorStart: 200,
  colorRange: 120,
  bgFade: 0.28
};
let frame = 0;
let tick = 0;
const particles = Array.from({ length: config.ringCount }, (_, index) => ({
  z: index / config.ringCount,
  angle: Math.random() * Math.PI * 2,
  radius: 0.1 + Math.random() * 0.42
}));

function resize() {
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}

function draw() {
  const width = canvas.width;
  const height = canvas.height;
  const centerX = width / 2;
  const centerY = height / 2;
  const spinDirection = (mouseX.current - 0.5) * 2;
  ctx.fillStyle = `rgba(6,8,16,${config.bgFade})`;
  ctx.fillRect(0, 0, width, height);

for (let index = 0; index < 12; index++) {
    const angle = (index / 12) * Math.PI * 2 + tick * spinDirection * 0.4;
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.lineTo(centerX + Math.cos(angle) * width, centerY + Math.sin(angle) * height);
    ctx.strokeStyle = `hsla(${config.colorStart + index * 8},70%,55%,0.03)`;
    ctx.lineWidth = 1;
    ctx.stroke();
  }

for (const particle of particles) {
    particle.z -= config.baseSpeed + Math.abs(spinDirection) * 0.008;
    particle.angle += spinDirection * 0.04 * (1 - particle.z);
    if (particle.z <= 0) {
      particle.z = 1;
      particle.angle = Math.random() * Math.PI * 2;
      particle.radius = 0.1 + Math.random() * 0.42;
    }

const perspective = Math.pow(1 - particle.z, 2);
    const scale = perspective * Math.min(width, height) * 0.54;
    const x = centerX + Math.cos(particle.angle) * particle.radius * scale * 2.1;
    const y = centerY + Math.sin(particle.angle) * particle.radius * scale;
    const alpha = (1 - particle.z) * 0.85;
    const size = Math.max(0.4, (1 - particle.z) * 4.5);
    const hue = config.colorStart + particle.z * config.colorRange + mouseX.current * 40;
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI * 2);
    ctx.fillStyle = `hsla(${hue},88%,68%,${alpha})`;
    ctx.fill();
  }

ctx.beginPath();
  ctx.arc(centerX, centerY, 3.5, 0, Math.PI * 2);
  ctx.fillStyle = "rgba(255,255,255,0.85)";
  ctx.fill();

tick += 0.015;
  frame = requestAnimationFrame(draw);
}

function move(event) {
  const rect = canvas.getBoundingClientRect();
  mouseX.current = (event.clientX - rect.left) / rect.width;
}

function leave() {
  mouseX.current = 0.5;
}
    resize();
    draw();
    const observer = new ResizeObserver(resize);
    observer.observe(canvas);
    canvas.addEventListener("pointermove", move);
    canvas.addEventListener("pointerleave", leave);
    return () => {
      cancelAnimationFrame(frame);
      observer.disconnect();
      canvas.removeEventListener("pointermove", move);
      canvas.removeEventListener("pointerleave", leave);
    };
  }, []);

return <canvas ref={canvasRef} style={{ width: "100%", height: "100%", display: "block" }} />;
}