3D Visualization Showcase

Stunning 3D animations ready to integrate into your pages

AI Network 3D

Dynamic neural network with multi-axis rotation and energy flow

Usage:

<canvas id="aiNetwork3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/ai-network-3d.js"></script>
<script>initAINetwork3D('aiNetwork3D');</script>

Particle Wave 3D

3D wave system with flowing particles and grid connections - Performance Optimized

Usage (Default - 1600 particles):

<canvas id="particleWave3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/particle-wave-3d.js"></script>
<script>initParticleWave3D('particleWave3D');</script>

Performance Options:

// Lower-end devices (300 particles)
initParticleWave3D('particleWave3D', {
  gridSize: 10,
  layers: 3
});

// Medium performance (800 particles)
initParticleWave3D('particleWave3D', {
  gridSize: 15,
  layers: 4
});

DNA Helix 3D

Rotating double helix structure with dynamic lighting and base pairs

Usage:

<canvas id="dnaHelix3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/dna-helix-3d.js"></script>
<script>initDNAHelix3D('dnaHelix3D');</script>

Cosmic Spiral 3D

Rotating galaxy with golden spiral arms and trailing particles

Usage:

<canvas id="cosmicSpiral3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/cosmic-spiral-3d.js"></script>
<script>initCosmicSpiral3D('cosmicSpiral3D');</script>

Quantum Field 3D

Vibrant energy field with wave interference patterns and multicolor dynamics

Usage:

<canvas id="quantumField3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/quantum-field-3d.js"></script>
<script>initQuantumField3D('quantumField3D');</script>

Sierpinski Triangle 2D - Neon Fractal

Classic fractal using chaos game algorithm with neon rainbow colors

Usage:

<canvas id="sierpinskiTriangle2D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/sierpinski-triangle-2d-neon.js"></script>
<script>initSierpinskiTriangle2D('sierpinskiTriangle2D');</script>

🌀 Harmonic Torus Knot

State-of-the-art geometric function manipulation: Trefoil knot topology with spherical harmonic modulation and dynamic parameter evolution (5000 particles, Three.js)

Usage:

<div id="container" class="ai-visualization-container"></div>
<script type="module">
  import { initHarmonicTorusKnot } from '/visualizations/js/harmonic-torus-knot.js';
  initHarmonicTorusKnot('container');
</script>

⚛️ Quantum Fractal Sphere

Spherical harmonics with multi-octave fractal displacement using GPU-accelerated GLSL shaders. Demonstrates quantum-inspired morphing geometry with procedural lighting (Three.js)

Usage:

<div id="container" class="ai-visualization-container"></div>
<script type="module">
  import { initQuantumFractalSphere } from '/visualizations/js/quantum-fractal-sphere.js';
  initQuantumFractalSphere('container');
</script>

Meteor Shower 3D

Fast-moving meteors with blazing orange and red trails across the night sky

Usage:

<canvas id="meteorShower3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/meteor-shower-3d.js"></script>
<script>initMeteorShower3D('meteorShower3D');</script>

Plasma Vortex 3D

Swirling tornado of pink and cyan plasma energy with turbulent motion

Usage:

<canvas id="plasmaVortex3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/plasma-vortex-3d.js"></script>
<script>initPlasmaVortex3D('plasmaVortex3D');</script>

Crystal Formation 3D

Growing geometric crystals with emerald and sapphire colors in 3D space

Usage:

<canvas id="crystalFormation3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/crystal-formation-3d.js"></script>
<script>initCrystalFormation3D('crystalFormation3D');</script>

Voronoi Tessellation 3D

Organic cell-like structures with dynamic 3D Voronoi diagrams and pulsing nuclei

Usage:

<canvas id="voronoiTessellation3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/voronoi-tessellation-3d.js"></script>
<script>initVoronoiTessellation3D('voronoiTessellation3D');</script>

Penrose Tiling 3D

Non-periodic golden ratio tessellation with kites and darts in 3D depth

Usage:

<canvas id="penroseTiling3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/penrose-tiling-3d.js"></script>
<script>initPenroseTiling3D('penroseTiling3D');</script>

Islamic Geometric Pattern 3D

Persian and Moorish star tessellations with turquoise, gold, and sapphire colors

Usage:

<canvas id="islamicPattern3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/islamic-pattern-3d.js"></script>
<script>initIslamicPattern3D('islamicPattern3D');</script>

Morphing Polyhedra 3D

Platonic solids transforming through tessellated edges - tetrahedron, cube, octahedron, dodecahedron, icosahedron

Usage:

<canvas id="morphingPolyhedra3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/morphing-polyhedra-3d.js"></script>
<script>initMorphingPolyhedra3D('morphingPolyhedra3D');</script>

Lorenz Attractor 3D

Chaotic dynamical system demonstrating butterfly effect - σ=10, ρ=28, β=8/3

Usage:

<canvas id="lorenzAttractor3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/lorenz-attractor-3d.js"></script>
<script>initLorenzAttractor3D('lorenzAttractor3D');</script>

Fourier Epicycles 3D

Harmonic circular motion creating complex paths through rotating epicycles and frequency harmonics

Usage:

<canvas id="fourierEpicycles3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/fourier-epicycles-3d.js"></script>
<script>initFourierEpicycles3D('fourierEpicycles3D');</script>

Sierpinski Pyramid 3D

Recursive fractal tetrahedron demonstrating self-similarity with Hausdorff dimension 2

Usage:

<canvas id="sierpinskiPyramid3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/sierpinski-pyramid-3d.js"></script>
<script>initSierpinskiPyramid3D('sierpinskiPyramid3D');</script>

Mandelbrot Set Fractal Zoom

Infinite fractal zoom into famous locations - Seahorse Valley, Elephant Valley, and more

Usage:

<canvas id="mandelbrotFractal3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/mandelbrot-fractal-3d.js"></script>
<script>initMandelbrotFractal3D('mandelbrotFractal3D');</script>

Perfect for:

Hero sections, loading screens, backgrounds, section dividers

Julia Set Fractal (Cosmic Theme)

Animated Julia set with smooth color cycling through cosmic palette - infinite complexity and self-similarity

Usage:

<canvas id="juliaCosmicFractal" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/fractal-julia-cosmic-3d.js"></script>
<script>initJuliaCosmicFractal('juliaCosmicFractal');</script>

With Custom Options:

initJuliaCosmicFractal('juliaCosmicFractal', {
  speed: 0.3,
  zoom: 1.0,
  colorCycle: 1.0,
  maxIterations: 80,
  cReal: -0.4,
  cImag: 0.6
});

Perfect for:

Hero sections, loading screens, meditation backgrounds, abstract art galleries

Burning Ship Fractal (Cosmic Theme)

Ship-like structure with blazing colors and interactive zoom - asymmetric fractal with absolute value transformation

Usage:

<canvas id="burningShipCosmic" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/fractal-burning-ship-cosmic-3d.js"></script>
<script>initBurningShipCosmic('burningShipCosmic');</script>

With Custom Options:

const viz = initBurningShipCosmic('burningShipCosmic', {
  speed: 0.5,
  zoom: 1.0,
  colorCycle: 1.5,
  maxIterations: 100
});

// Interactive controls
viz.zoomIn();
viz.zoomOut();
viz.reset();

Perfect for:

Dynamic backgrounds, sci-fi themes, creative portfolios, tech product pages

Klein Bottle 4D Projection

Non-orientable 4D surface with one side - a topological impossibility in 3D space

Usage:

<canvas id="kleinBottle4D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/klein-bottle-4d.js"></script>
<script>initKleinBottle4D('kleinBottle4D');</script>

Perfect for:

Modern tech websites, mathematics pages, abstract luxury backgrounds

Hopf Fibration Topology

Circular fibers mapping 3-sphere to 2-sphere - fundamental in quantum mechanics and fiber bundles

Usage:

<canvas id="hopfFibration3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/hopf-fibration-3d.js"></script>
<script>initHopfFibration3D('hopfFibration3D');</script>

Perfect for:

Premium tech brands, quantum/physics sites, luxury design elements

Icosahedron Geometric 3D

Perfect 20-sided Platonic solid with dynamic rotation, edge highlighting, and vertex glow - geometric theme

Usage:

<canvas id="icosahedronGeometric3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/geometric-icosahedron-3d.js"></script>
<script>initIcosahedronGeometric('icosahedronGeometric3D');</script>

Perfect for:

Modern tech websites, geometric design themes, luxury brand backgrounds

Tesseract (4D Hypercube) Geometric

4D hypercube projected to 3D then 2D - 16 vertices, 32 edges, rotating in 4D space with beautiful trails

Usage:

<canvas id="tesseractGeometric3D" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/geometric-tesseract-3d.js"></script>
<script>initTesseractGeometric('tesseractGeometric3D');</script>

Perfect for:

Advanced tech brands, mathematics pages, sci-fi themes, abstract luxury

Fourier Square Wave

Odd harmonics (1, 3, 5, 7...) combining to create a square wave - classic signal processing

Usage:

<canvas id="fourierSquareWave" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/fourier-square-wave.js"></script>
<script>initFourierSquareWave('fourierSquareWave');</script>

Fourier Triangle Wave

Alternating harmonics with 1/n² decay creating smooth triangle waves

Usage:

<canvas id="fourierTriangleWave" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/fourier-triangle-wave.js"></script>
<script>initFourierTriangleWave('fourierTriangleWave');</script>

Fourier Sawtooth Wave

All harmonics (1, 2, 3, 4...) creating the classic sawtooth waveform

Usage:

<canvas id="fourierSawtoothWave" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/fourier-sawtooth-wave.js"></script>
<script>initFourierSawtoothWave('fourierSawtoothWave');</script>

Fourier Heart Shape

Epicycles drawing a parametric heart using Discrete Fourier Transform

Usage:

<canvas id="fourierHeartShape" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/fourier-heart-shape.js"></script>
<script>initFourierHeartShape('fourierHeartShape');</script>

Perfect for:

Romantic sites, creative design, Valentine's content

Fourier Star Shape

5-pointed star drawn by Fourier epicycles - perfect for awards and achievements

Usage:

<canvas id="fourierStarShape" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/fourier-star-shape.js"></script>
<script>initFourierStarShape('fourierStarShape');</script>

Perfect for:

Awards sites, achievement systems, decorative elements

Lissajous Curves - Cosmic Theme

Mesmerizing parametric curves from harmonic oscillations - figure-8 and infinity patterns with cosmic trails

Usage:

<canvas id="lissajous-cosmic" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/math-lissajous-cosmic.js"></script>
<script>const lissajousViz = initLissajousCosmic('lissajous-cosmic');</script>

With Custom Options:

const lissajousViz = initLissajousCosmic('lissajous-cosmic', {
  speed: 0.5,
  freqA: 3,
  freqB: 2,
  amplitude: 0.4,
  phaseShift: Math.PI / 2
});

Perfect for:

Mathematical education, meditation backgrounds, abstract art, loading animations

Spirograph Harmonograph - Cosmic Theme

Intricate geometric patterns from epicycloid motion - simulates classic spirograph drawing tool

Usage:

<canvas id="spirograph-cosmic" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/math-spirograph-cosmic.js"></script>
<script>const spirographViz = initSpirographCosmic('spirograph-cosmic');</script>

With Custom Options:

const spirographViz = initSpirographCosmic('spirograph-cosmic', {
  speed: 1.0,
  outerRadius: 0.3,
  innerRadius: 0.15,
  penOffset: 0.7,
  rotationRatio: 3.2
});

Perfect for:

Creative portfolios, geometric design, nostalgia themes, mathematical art galleries

Boids Flocking Simulation - Organic Theme

Emergent flocking behavior using separation, alignment, and cohesion - Craig Reynolds' algorithm with natural colors

Usage:

<canvas id="boidsOrganic" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/physics-boids-organic.js"></script>
<script>const boidsOrganicControl = initBoidsOrganic('boidsOrganic');</script>

With Custom Options:

const boidsOrganicControl = initBoidsOrganic('boidsOrganic', {
  speed: 1.5,
  boidCount: 200,
  perceptionRadius: 60,
  separationRadius: 30,
  maxSpeed: 3
});

Perfect for:

Nature-themed sites, organic design, ecology content, swarm intelligence demos

Fluid Flow Field - Organic Theme

Perlin noise-based flow field with particle system - organic fluid movement simulation

Usage:

<canvas id="fluidOrganic" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/physics-fluid-organic.js"></script>
<script>const fluidOrganicControl = initFluidOrganic('fluidOrganic');</script>

With Custom Options:

const fluidOrganicControl = initFluidOrganic('fluidOrganic', {
  speed: 1.2,
  particleCount: 3000,
  noiseScale: 0.005,
  noiseStrength: 0.8,
  particleSpeed: 3
});

Perfect for:

Environmental sites, water themes, nature backgrounds, organic design systems

Moiré Interference Pattern - Retro

Mesmerizing moiré effects from overlapping rotating grids with vibrant 80s colors

Usage:

<canvas id="moireRetro" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/illusion-moire-retro.js"></script>
<script>const moireRetroControl = initMoireRetro('moireRetro');</script>

With Custom Options:

const moireRetroControl = initMoireRetro('moireRetro', {
  speed: 0.5,
  scale: 1.0,
  gridSpacing: 20,
  lineWidth: 2
});

Perfect for:

Retro-themed sites, 80s aesthetics, trippy backgrounds, music/nightclub pages

Fraser Spiral Illusion - Retro

Famous optical illusion where concentric circles appear as spirals with vibrant 80s colors

Usage:

<canvas id="spiralRetro" class="ai-visualization-canvas"></canvas>
<script src="/visualizations/js/illusion-spiral-retro.js"></script>
<script>const spiralRetroControl = initSpiralRetro('spiralRetro');</script>

With Custom Options:

const spiralRetroControl = initSpiralRetro('spiralRetro', {
  speed: 1.0,
  scale: 1.0,
  numRings: 12,
  segmentSize: 15
});

Perfect for:

Mind-bending effects, optical illusion galleries, retro design, creative portfolios

Integration Guide

Step 1: Add Canvas Element

Add a canvas element with a unique ID to your HTML:

<canvas id="yourVisualizationId" class="ai-visualization-canvas"></canvas>

Step 2: Include Script

Load the visualization script before your initialization code:

<script src="/visualizations/js/[visualization-name].js"></script>

Step 3: Initialize

Call the initialization function with your canvas ID:

<script>
  const control = init[VisualizationName]('yourVisualizationId');
</script>

Step 4: Style Canvas (Optional)

Add CSS to control canvas dimensions:

.ai-visualization-canvas {
  width: 100%;
  height: 500px;
  border-radius: 15px;
  background: radial-gradient(circle, rgba(0,180,216,0.05), transparent);
}

Control Functions

All visualizations return a control object with methods:

control.stop();  // Pause animation
control.start(); // Resume animation
🎨 3D Visualizations

📊 Performance Metrics

FPS
--
Frame Time
--
Quality
Auto
Memory
--

Quality Settings

📤 Export Tools

Current Canvas: None

Export History

No exports yet

⭐ Favorites & Collections

No favorites saved