React Vortex Background

Swirling particle systems that create hypnotic depth and organic movement. Build mesmerizing React vortex effects with simplex noise algorithms, canvas rendering, customizable parameters, and TypeScript support for Next.js applications with shadcn/ui.

Framer Motion

React

Simplex Noise

Canvas API

Creating hypnotic swirling experiences?

Join our Discord community for help from other developers.

Most particle effects feel artificial. Rigid. Mathematical in the worst way. But nature swirls with organic unpredictability—galaxies spiral, water whirlpools, smoke curls. This React component recreates that natural chaos using simplex noise algorithms that make hundreds of particles dance in mesmerizing, never-repeating patterns.

Organic particle vortex systems

Watch particles swirl with natural, unpredictable movement powered by simplex noise:

Loading component...

'use client';import { cn } from "@/lib/utils";import React, { useEffect, useRef } from "react";import { createNoise3D } from "simplex-noise";import { motion } from "framer-motion";interface VortexProps {  children?: any;  className?: string;  containerClassName?: string;  particleCount?: number;  rangeY?: number;  baseHue?: number;  baseSpeed?: number;  rangeSpeed?: number;  baseRadius?: number;  rangeRadius?: number;  backgroundColor?: string;}export const Vortex = (props: VortexProps) => {  const canvasRef = useRef<HTMLCanvasElement>(null);  const containerRef = useRef(null);  const particleCount = props.particleCount || 700;  const particlePropCount = 9;  const particlePropsLength = particleCount * particlePropCount;  const rangeY = props.rangeY || 100;  const baseTTL = 50;  const rangeTTL = 150;  const baseSpeed = props.baseSpeed || 0.0;  const rangeSpeed = props.rangeSpeed || 1.5;  const baseRadius = props.baseRadius || 1;  const rangeRadius = props.rangeRadius || 2;  const baseHue = props.baseHue || 220;  const rangeHue = 100;  const noiseSteps = 3;  const xOff = 0.00125;  const yOff = 0.00125;  const zOff = 0.0005;  const backgroundColor = props.backgroundColor || "#000000";  let tick = 0;  const noise3D = createNoise3D();  let particleProps = new Float32Array(particlePropsLength);  let center: [number, number] = [0, 0];  const HALF_PI: number = 0.5 * Math.PI;  const TAU: number = 2 * Math.PI;  const TO_RAD: number = Math.PI / 180;  const rand = (n: number): number => n * Math.random();  const randRange = (n: number): number => n - rand(2 * n);  const fadeInOut = (t: number, m: number): number => {    let hm = 0.5 * m;    return Math.abs(((t + hm) % m) - hm) / hm;  };  const lerp = (n1: number, n2: number, speed: number): number =>    (1 - speed) * n1 + speed * n2;  const setup = () => {    const canvas = canvasRef.current;    const container = containerRef.current;    if (canvas && container) {      const ctx = canvas.getContext("2d");      if (ctx) {        resize(canvas, ctx);        initParticles();        draw(canvas, ctx);      }    }  };  const initParticles = () => {    tick = 0;    // simplex = new SimplexNoise();    particleProps = new Float32Array(particlePropsLength);    for (let i = 0; i < particlePropsLength; i += particlePropCount) {      initParticle(i);    }  };  const initParticle = (i: number) => {    const canvas = canvasRef.current;    if (!canvas) return;    let x, y, vx, vy, life, ttl, speed, radius, hue;    x = rand(canvas.width);    y = center[1] + randRange(rangeY);    vx = 0;    vy = 0;    life = 0;    ttl = baseTTL + rand(rangeTTL);    speed = baseSpeed + rand(rangeSpeed);    radius = baseRadius + rand(rangeRadius);    hue = baseHue + rand(rangeHue);    particleProps.set([x, y, vx, vy, life, ttl, speed, radius, hue], i);  };  const draw = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => {    tick++;    ctx.clearRect(0, 0, canvas.width, canvas.height);    ctx.fillStyle = backgroundColor;    ctx.fillRect(0, 0, canvas.width, canvas.height);    drawParticles(ctx);    renderGlow(canvas, ctx);    renderToScreen(canvas, ctx);    window.requestAnimationFrame(() => draw(canvas, ctx));  };  const drawParticles = (ctx: CanvasRenderingContext2D) => {    for (let i = 0; i < particlePropsLength; i += particlePropCount) {      updateParticle(i, ctx);    }  };  const updateParticle = (i: number, ctx: CanvasRenderingContext2D) => {    const canvas = canvasRef.current;    if (!canvas) return;    let i2 = 1 + i,      i3 = 2 + i,      i4 = 3 + i,      i5 = 4 + i,      i6 = 5 + i,      i7 = 6 + i,      i8 = 7 + i,      i9 = 8 + i;    let n, x, y, vx, vy, life, ttl, speed, x2, y2, radius, hue;    x = particleProps[i];    y = particleProps[i2];    n = noise3D(x * xOff, y * yOff, tick * zOff) * noiseSteps * TAU;    vx = lerp(particleProps[i3], Math.cos(n), 0.5);    vy = lerp(particleProps[i4], Math.sin(n), 0.5);    life = particleProps[i5];    ttl = particleProps[i6];    speed = particleProps[i7];    x2 = x + vx * speed;    y2 = y + vy * speed;    radius = particleProps[i8];    hue = particleProps[i9];    drawParticle(x, y, x2, y2, life, ttl, radius, hue, ctx);    life++;    particleProps[i] = x2;    particleProps[i2] = y2;    particleProps[i3] = vx;    particleProps[i4] = vy;    particleProps[i5] = life;    (checkBounds(x, y, canvas) || life > ttl) && initParticle(i);  };  const drawParticle = (    x: number,    y: number,    x2: number,    y2: number,    life: number,    ttl: number,    radius: number,    hue: number,    ctx: CanvasRenderingContext2D  ) => {    ctx.save();    ctx.lineCap = "round";    ctx.lineWidth = radius;    ctx.strokeStyle = `hsla(${hue},100%,60%,${fadeInOut(life, ttl)})`;    ctx.beginPath();    ctx.moveTo(x, y);    ctx.lineTo(x2, y2);    ctx.stroke();    ctx.closePath();    ctx.restore();  };  const checkBounds = (x: number, y: number, canvas: HTMLCanvasElement) => {    return x > canvas.width || x < 0 || y > canvas.height || y < 0;  };  const resize = (    canvas: HTMLCanvasElement,    ctx?: CanvasRenderingContext2D  ) => {    const { innerWidth, innerHeight } = window;    canvas.width = innerWidth;    canvas.height = innerHeight;    center[0] = 0.5 * canvas.width;    center[1] = 0.5 * canvas.height;  };  const renderGlow = (    canvas: HTMLCanvasElement,    ctx: CanvasRenderingContext2D  ) => {    ctx.save();    ctx.filter = "blur(8px) brightness(200%)";    ctx.globalCompositeOperation = "lighter";    ctx.drawImage(canvas, 0, 0);    ctx.restore();    ctx.save();    ctx.filter = "blur(4px) brightness(200%)";    ctx.globalCompositeOperation = "lighter";    ctx.drawImage(canvas, 0, 0);    ctx.restore();  };  const renderToScreen = (    canvas: HTMLCanvasElement,    ctx: CanvasRenderingContext2D  ) => {    ctx.save();    ctx.globalCompositeOperation = "lighter";    ctx.drawImage(canvas, 0, 0);    ctx.restore();  };  useEffect(() => {    setup();    window.addEventListener("resize", () => {      const canvas = canvasRef.current;      const ctx = canvas?.getContext("2d");      if (canvas && ctx) {        resize(canvas, ctx);      }    });  }, []);  return (    <div className={cn("relative h-full w-full", props.containerClassName)}>      <motion.div        initial={{ opacity: 0 }}        animate={{ opacity: 1 }}        ref={containerRef}        className="absolute h-full w-full inset-0 z-0 bg-transparent flex items-center justify-center"      >        <canvas ref={canvasRef}></canvas>      </motion.div>      <div className={cn("relative z-10", props.className)}>        {props.children}      </div>    </div>  );};

Built for React applications with TypeScript and Next.js. Uses HTML5 Canvas with simplex noise algorithms for organic particle movement that never repeats exactly. 700+ particles create depth and complexity while maintaining smooth 60fps performance. Customizable colors, speeds, and densities let you create anything from subtle ambience to hypnotic centerpieces.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/vortex.json

npx shadcn@latest add https://www.shadcn.io/registry/vortex.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/vortex.json

bunx shadcn@latest add https://www.shadcn.io/registry/vortex.json

Usage

import { Vortex } from "@/components/ui/vortex";

export default function CosmicHero() {
  return (
    <div className="h-screen w-full overflow-hidden">
      <Vortex
        backgroundColor="black"
        particleCount={700}
        baseHue={220}
        rangeHue={100}
        baseSpeed={0.0}
        rangeSpeed={1.5}
        className="flex items-center justify-center w-full h-full"
      >
        {/* Your content floats above the vortex */}
        <div className="text-center text-white z-10">
          <h1 className="text-6xl font-bold mb-4">
            Enter the Vortex
          </h1>
          <p className="text-xl opacity-80">
            Where chaos becomes beauty
          </p>
        </div>
      </Vortex>
    </div>
  );
}

Why most particle systems look fake

Most developers use basic math with Math.sin() and Math.cos() for particle movement. It creates perfect circles and predictable patterns that scream "computer generated." Others use random values, but pure randomness looks chaotic, not organic. Some try physics simulations, but they're performance-heavy and still feel mechanical.

This React component uses simplex noise—the algorithm behind natural terrain generation and procedural textures. Each particle follows noise-generated paths that curve and flow like real fluid dynamics. The result is movement that feels alive, organic, never exactly repeating. Canvas rendering with advanced compositing creates glow effects that make particles blend naturally.

Features

Simplex noise algorithms creating organic, never-repeating particle movement patterns
Advanced particle physics with customizable speed, radius, and movement range parameters
Canvas-based rendering using advanced compositing modes for realistic glow effects
Dynamic color system supporting HSL-based hue ranges for vibrant color variations
High particle density supporting 700+ particles with smooth 60fps performance
Content overlay integration allowing text and UI elements to float above the vortex
Responsive container adaptation automatically adjusting to window and container changes
Framer Motion integration providing smooth entrance and exit animations
Performance optimized using requestAnimationFrame and efficient canvas operations
TypeScript definitions for all particle parameters and visual customizations
shadcn/ui compatible with proper z-index management and theme integration

API Reference

Vortex

Main component for simplex noise-powered particle vortex systems.

Prop	Type	Default	Description
`particleCount`	`number`	`700`	Total particles (300-1200 recommended range)
`rangeY`	`number`	`800`	Vertical movement boundary in pixels
`baseHue`	`number`	`220`	Starting hue value (0-360, 220=blue, 120=green)
`rangeHue`	`number`	`100`	Hue variation range from base (creates color spread)
`baseSpeed`	`number`	`0.0`	Minimum particle speed (0=still, negative=reverse)
`rangeSpeed`	`number`	`1.5`	Speed variation range (higher=more speed diversity)
`baseRadius`	`number`	`1`	Minimum particle size in pixels
`rangeRadius`	`number`	`2`	Size variation range (creates depth through scaling)
`backgroundColor`	`string`	`"#000020"`	Canvas background color (hex, rgb, or CSS colors)
`className`	`string`	-	Additional CSS classes for the container element
`children`	`ReactNode`	-	Content to overlay above the vortex effect

Simplex Noise Algorithms

The vortex uses multi-dimensional simplex noise for organic movement:

// Noise-based particle movement
const noiseX = simplex.noise3D(x * 0.01, y * 0.01, time * 0.1);
const noiseY = simplex.noise3D(x * 0.01 + 1000, y * 0.01, time * 0.1);

// Natural spiral tendency with noise variation
particle.x += Math.cos(angle) * speed + noiseX * turbulence;
particle.y += Math.sin(angle) * speed + noiseY * turbulence;

Color System Configuration

// Blue cosmic theme (default)
baseHue={220} rangeHue={100} // Blues to purples

// Green nature theme
baseHue={120} rangeHue={60}  // Greens to yellow-greens

// Warm sunset theme
baseHue={30} rangeHue={90}   // Oranges to reds

// Full spectrum rainbow
baseHue={0} rangeHue={360}   // All colors

// Monochrome variations
baseHue={220} rangeHue={20}  // Subtle blue variations

Performance Guidelines

// Subtle ambience (great performance)
particleCount={300} rangeSpeed={1.0}

// Balanced experience (recommended)
particleCount={700} rangeSpeed={1.5} // Default settings

// Dense immersive effect
particleCount={1000} rangeSpeed={2.0}

// Maximum intensity (test on target devices)
particleCount={1200} rangeSpeed={2.5}

Common gotchas

Simplex noise dependency: This component requires the simplex-noise package (~15kb). If you don't use noise elsewhere in your project, consider the bundle size impact.

Canvas performance scaling: Very high particle counts (1000+) can impact performance on older devices. The organic movement calculations are more expensive than simple linear motion.

Color hue mathematics: Hue values wrap around at 360 degrees. A baseHue of 350 with rangeHue of 50 will create colors from red (350°) through purple to blue (40°).

Content layering complexity: The component creates its own positioning context. Overlaid content needs to be properly structured within the Vortex children for correct z-index behavior.

Background color visibility: On light themes, the default dark background might not match your design. Always set backgroundColor to match your theme.

Mobile device considerations: The complex noise calculations can drain battery faster on mobile. Consider reducing particleCount or rangeSpeed for mobile users.

Explore other organic and hypnotic background components for React applications:

Organic particle vortex systems

Installation

Usage

Why most particle systems look fake

Features

API Reference

Vortex

Simplex Noise Algorithms

Color System Configuration

Performance Guidelines

Common gotchas

You might also like

Particles

Spiral Animation

Gradient Animation

Aurora

Noise

Shooting Stars

Questions developers actually ask

On this page

React Vortex Background

Reactvortex

Particles

Spiral Animation

Gradient Animation

Aurora

Noise

Shooting Stars

Why does this use simplex noise instead of regular random movement?

How do I optimize performance for mobile devices?

How do I create specific color themes?

How do I properly position content over the vortex?

Can I pause or slow down the animation?

Can I layer multiple vortex components?

On this page