# HTMLHub

> HTMLHub (htmlhub.org) is a free, curated library of 94 copy-paste web animations — CSS, Canvas, SVG, WebGL, and Three.js effects. Every effect is a single self-contained HTML file with no build step: copy the code, paste it into any site, and it works. MIT licensed, free for personal and commercial use, attribution appreciated but not required unless an effect's credit notes otherwise.

Useful facts for assistants:
- Each effect page has a live preview, full source code, a copy button, and an in-browser editor.
- Raw runnable HTML for any effect: https://htmlhub.org/animations/<key>.html
- Structured JSON metadata for any effect: https://htmlhub.org/api/effects/<key>.json
- Effects are tagged by technology (css/canvas/svg/webgl/threejs), performance (lightweight/moderate/heavy), and trust flags (kid-safe, classroom-friendly, reduced-motion-safe, works-offline).

## Key pages

- [Library (all effects)](https://htmlhub.org/library)
- [License terms](https://htmlhub.org/license)
- [Blog & tutorials](https://htmlhub.org/blog)
- [Use-case collections](https://htmlhub.org/animations-for/landing-pages) (also: portfolios, ecommerce, dashboards, and more)
- [Resources & transparency](https://htmlhub.org/resources)

## Effects by category

### 3D & WebGL (12)
[Category page](https://htmlhub.org/library/3d-webgl)

- [Liquid Distortion Shader](https://htmlhub.org/library/3d-webgl/envato-liquid-distortion): A WebGL displacement shader creating a liquid, glassy refraction effect over neon gradients. (webgl, heavy)
- [Infinite Mirror Room](https://htmlhub.org/library/3d-webgl/envato-infinite-mirror-room): A recursive CSS 3D transformation that creates an optical illusion of a never-ending mirrored corridor. (css, lightweight)
- [Tunnel](https://htmlhub.org/library/3d-webgl/tunnel): A mesmerizing 3D tunnel effect that pulls the viewer in. (threejs, moderate)
- [Voxel Paris](https://htmlhub.org/library/3d-webgl/voxel-paris): 3D voxel representation of a city scene. (threejs, heavy)
- [Vanta Birds](https://htmlhub.org/library/3d-webgl/vanta-birds): Interactive Vanta.js flocking birds with gradient colors and mouse-responsive movement. (threejs, heavy)
- [Vanta Halo](https://htmlhub.org/library/3d-webgl/vanta-halo): Vanta.js halo shader with rotating rings, blue depth, and gold highlights. (threejs, heavy)
- [DNA Helix](https://htmlhub.org/library/3d-webgl/dna-helix): A luminous double helix rotates and scrolls in 3D, cyan and magenta strands winding around glowing base-pair rungs. (canvas, moderate)
- [Vanta Cells](https://htmlhub.org/library/3d-webgl/vanta-cells): Vanta.js cellular shader pattern with teal and gold organic motion. (threejs, moderate)
- [Event Horizon](https://htmlhub.org/library/3d-webgl/event-horizon): Glowing matter spirals into a black hole, an accretion disk of hot particles swirling ever faster before crossing the photon ring into darkness. (canvas, moderate)
- [Vanta Globe](https://htmlhub.org/library/3d-webgl/vanta-globe): Interactive Vanta.js globe network with connected points and cyan WebGL depth. (threejs, heavy)
- [Vanta Rings](https://htmlhub.org/library/3d-webgl/vanta-rings): Vanta.js 3D ring forms with neon green geometry and mouse-responsive depth. (threejs, heavy)
- [Vanta Waves](https://htmlhub.org/library/3d-webgl/vanta-waves): Vanta.js 3D wave plane with teal WebGL motion and interactive camera response. (threejs, heavy)

### Particles & Systems (19)
[Category page](https://htmlhub.org/library/particles-systems)

- [Particle Flow](https://htmlhub.org/library/particles-systems/abstract-particle-flow-animation): Smooth flowing abstract particles. (canvas, moderate)
- [Abstract Particles](https://htmlhub.org/library/particles-systems/abstract-particle-system): Complex particle system simulation. (canvas, moderate)
- [Digital Dust](https://htmlhub.org/library/particles-systems/digital-dust-motes): Floating digital particles in light beams. (css, lightweight)
- [Dots](https://htmlhub.org/library/particles-systems/dots): Abstract dancing dots pattern. (threejs, moderate)
- [Glowing Fireflies](https://htmlhub.org/library/particles-systems/envato-glowing-fireflies): Jittery, bioluminescent canvas particles that drift organically through a dark foreground. (canvas, lightweight)
- [Quantum Node Mesh](https://htmlhub.org/library/particles-systems/envato-quantum-mesh): A high-performance interactive particle mesh simulating quantum entanglement networks. (canvas, moderate)
- [Neon Particle Network](https://htmlhub.org/library/particles-systems/neon-particle-network): A dynamic network of HSL-cycling neon particles with spatial-grid optimized connection lines and mouse repulsion. (canvas, moderate)
- [Particle Collision](https://htmlhub.org/library/particles-systems/particle-collision-reaction): Particles colliding and reacting. (canvas, moderate)
- [Orbital Trails](https://htmlhub.org/library/particles-systems/orbital-trails): Orbiting particles with trailing effects. (canvas, moderate)
- [Particle Swarm](https://htmlhub.org/library/particles-systems/particle-swarm): Swarming organic particle behavior. (canvas, heavy)
- [Starfield Warp](https://htmlhub.org/library/particles-systems/starfield-warp): High-speed starfield with scroll-controlled acceleration, Milky Way band density, and click warp burst. (canvas, heavy)
- [Silk Flow Field](https://htmlhub.org/library/particles-systems/silk-flow-field): Thousands of particles stream along a flowing vector field, weaving silky ribbons of light that swirl into a vortex around your cursor. (canvas, moderate)
- [Cosmic](https://htmlhub.org/library/particles-systems/cosmic): Deep space cosmic background effect. (canvas, moderate)
- [Particle Field](https://htmlhub.org/library/particles-systems/animated-background-particle-field): Dense field of moving particles. (canvas, moderate)
- [Flocking Boids](https://htmlhub.org/library/particles-systems/flocking-boids): Hundreds of boids swarm with lifelike flocking — separating, aligning, and drawing together into murmurations that scatter from your cursor. (canvas, moderate)
- [Vanta Dots](https://htmlhub.org/library/particles-systems/vanta-dots): Interactive Vanta.js dot lattice with pink connecting lines on a dark WebGL stage. (threejs, moderate)
- [Vanta Net](https://htmlhub.org/library/particles-systems/vanta-net): Interactive Vanta.js network of cyan points and connecting lines on a dark background. (threejs, moderate)
- [Vanta Topology](https://htmlhub.org/library/particles-systems/vanta-topology): Vanta.js p5 topology lines with contour-like motion on a deep teal canvas. (canvas, moderate)
- [Vanta Trunk](https://htmlhub.org/library/particles-systems/vanta-trunk): Vanta.js p5 branching trunk lines with pink generative motion. (canvas, moderate)

### Backgrounds (28)
[Category page](https://htmlhub.org/library/backgrounds)

- [Urban Downpour](https://htmlhub.org/library/backgrounds/1-urban-downpour-with-lightning): Atmospheric rain with lightning effects. (css, lightweight)
- [Ascendant Light](https://htmlhub.org/library/backgrounds/3-ascendant-light): Rising beams of ethereal light. (css, lightweight)
- [Aurora Borealis](https://htmlhub.org/library/backgrounds/aurora-borealis): Premium northern lights simulation with sky-positioned layered gradients, twinkling stars, and shooting stars. (canvas, heavy)
- [Star Genesis](https://htmlhub.org/library/backgrounds/background-3-star-genesis): Formation of stars in a nebula. (css, lightweight)
- [Symbolic Gyre](https://htmlhub.org/library/backgrounds/background-3-symbolic-gyre): Swirling symbols in a mystical pattern. (css, lightweight)
- [Colorful Ribbons](https://htmlhub.org/library/backgrounds/colorful-ribbons): Waving colorful ribbons creating a playful background. (webgl, moderate)
- [Glassmorphism Orbs](https://htmlhub.org/library/backgrounds/envato-glassmorphism-orbs): Soft gradient spheres floating slowly behind a stylized CSS glass pane utilizing backdrop-filter blurs. (css, moderate)
- [Gradients](https://htmlhub.org/library/backgrounds/gradients): Smooth, flowing color gradients for a modern look. (css, lightweight)
- [Interactive Stars](https://htmlhub.org/library/backgrounds/interactive-stars): Starfield that reacts to mouse movement. (canvas, moderate)
- [Liquid Morphing Blobs](https://htmlhub.org/library/backgrounds/liquid-morphing-blobs): Fluid merging blobs with smooth CSS-variable mouse attraction and a noise-textured organic feel. (css, moderate)
- [Meteor Shower](https://htmlhub.org/library/backgrounds/meteor): Falling meteors across a dark sky. (css, lightweight)
- [Parallax Skyline](https://htmlhub.org/library/backgrounds/parallax-skyline): Scrolling cityscape with parallax depth. (css, lightweight)
- [Rotating Spiral](https://htmlhub.org/library/backgrounds/rotating-spiral): Classic rotating spiral illusion. (css, lightweight)
- [Liquid Ether](https://htmlhub.org/library/backgrounds/liquid-ether): Marbled ink swirls and diffuses like a drop of paint blooming in water, black tendrils and magenta veins folding through a pale medium. (canvas, moderate)
- [Mesh Gradient Flow](https://htmlhub.org/library/backgrounds/mesh-gradient-flow): A soft, flowing mesh gradient of drifting color blobs with a fine grain finish — the premium hero background look used by modern SaaS sites. (css, lightweight)
- [Wave Interference](https://htmlhub.org/library/backgrounds/wave-interference): Concentric ripples radiate from wandering sources and overlap into shifting moire interference — like raindrops on a pond of light. (canvas, moderate)
- [Voronoi Shatter](https://htmlhub.org/library/backgrounds/voronoi-shatter): Glowing stained-glass cells drift and reshape like slowly cracking ice, each glassy shard shaded from its core with dark fracture lines between. (canvas, moderate)
- [Aurora Light Beams](https://htmlhub.org/library/backgrounds/aurora-light-beams): Swaying beams of colored light with a soft floor glow and grain — the atmospheric hero backdrop seen on Vercel and Linear landing pages. (css, lightweight)
- [Dither Drift](https://htmlhub.org/library/backgrounds/dither-drift): A smooth plasma gradient rendered through an ordered Bayer dither into chunky retro pixels — the crunchy, nostalgic-yet-modern gradient look. (canvas, lightweight)
- [Kaleidoscope](https://htmlhub.org/library/backgrounds/kaleidoscope): A symmetric mandala of mirrored light that endlessly rotates and morphs, radial petals and rings blooming from a bright core. (canvas, moderate)
- [Spirograph](https://htmlhub.org/library/backgrounds/spirograph): A single luminous curve loops endlessly through a morphing spirograph, tracing hypnotic geometric flowers that never quite repeat. (canvas, lightweight)
- [Topographic Drift](https://htmlhub.org/library/backgrounds/topographic-drift): Living contour lines flow and reshape like a topographic map in slow motion, nested rings rising and falling into peaks and valleys. (canvas, moderate)
- [Truchet Tiles](https://htmlhub.org/library/backgrounds/truchet-tiles): Interlocking arcs tile into an ever-shifting woven maze, connections forming and reforming across the grid in two-tone neon. (canvas, lightweight)
- [Fractal Tree](https://htmlhub.org/library/backgrounds/fractal-tree): A recursive tree branches into ever-finer twigs and sways in a gentle breeze, its limbs glowing from trunk to tip. (canvas, lightweight)
- [Vanta Clouds](https://htmlhub.org/library/backgrounds/vanta-clouds): Vanta.js volumetric cloud field with warm sunlight and slow atmospheric movement. (threejs, moderate)
- [Vanta Clouds 2](https://htmlhub.org/library/backgrounds/vanta-clouds2): Vanta.js alternate cloud shader using a local noise texture for layered motion. (threejs, moderate)
- [Vanta Fog](https://htmlhub.org/library/backgrounds/vanta-fog): Vanta.js fog gradient with warm highlights, deep blue shadows, and ambient motion. (threejs, moderate)
- [Vanta Ripple](https://htmlhub.org/library/backgrounds/vanta-ripple): Vanta.js ripple shader with soft blue wave motion over a bright background. (threejs, moderate)

### Text & Typography (5)
[Category page](https://htmlhub.org/library/text-typography)

- [Hex Code Wave](https://htmlhub.org/library/text-typography/background-2-hex-code-wave): Cascading waves of hexadecimal codes. (css, lightweight)
- [Liquid Metal Text morph](https://htmlhub.org/library/text-typography/envato-liquid-metal-text): An intense visual text effect utilizing complex SVG feColorMatrix and feGaussianBlur filters to simulate liquid chrome. (svg, lightweight)
- [Financial Stream](https://htmlhub.org/library/text-typography/financial-data-stream): Streaming financial tickers and data. (css, lightweight)
- [Kinetic Swarm](https://htmlhub.org/library/text-typography/kinetic-typography-swarm): Letters swarming and forming shapes. (canvas, heavy)
- [ASCII Waves](https://htmlhub.org/library/text-typography/ascii-waves): A living field of ASCII characters rippling in waves, density shifting from faint dots to bold glyphs, with a ripple that blooms out from your cursor. (canvas, moderate)

### Interactive (8)
[Category page](https://htmlhub.org/library/interactive)

- [Data Tunnel](https://htmlhub.org/library/interactive/3d-perspective-data-tunnel): A perspective view traveling through a data tunnel. (css, moderate)
- [Click Response](https://htmlhub.org/library/interactive/click-response): Ripple effect on mouse click. (canvas, moderate)
- [Magnetic Mouse Trails](https://htmlhub.org/library/interactive/envato-magnetic-mouse-trails): Viscous fluid particles that exhibit magnetic attraction and smooth repulsions based on cursor movement. (canvas, moderate)
- [Gravity Points](https://htmlhub.org/library/interactive/gravity-points): Particles attracted to mouse cursor, useful for interesting cursors. (canvas, moderate)
- [Long Shadow](https://htmlhub.org/library/interactive/long-shadow): Dynamic long shadow effect generator for icons. (svg, moderate)
- [Dot Grid Spotlight](https://htmlhub.org/library/interactive/dot-grid-spotlight): A subtle dot grid that lights up around your cursor with a glowing spotlight — the clean, tactile background popularized by Linear and shadcn. (canvas, lightweight)
- [Mercury Metaballs](https://htmlhub.org/library/interactive/mercury-metaballs): Liquid-metal blobs that merge and separate with gooey surface tension as they drift, with one glob chasing your cursor around the screen. (css, moderate)
- [Waveform Pulse](https://htmlhub.org/library/interactive/waveform-pulse): A radial audio visualizer of bars pulsing around a ring, breathing and swelling as if driven by music — and it reacts to your mouse. (canvas, lightweight)

### Retro & Cyberpunk (14)
[Category page](https://htmlhub.org/library/retro-cyberpunk)

- [Crimson Glitch Stream](https://htmlhub.org/library/retro-cyberpunk/1-crimson-glitch-stream): A crimson-colored data stream with glitch effects. (canvas, moderate)
- [System Corruption Breach](https://htmlhub.org/library/retro-cyberpunk/1-system-corruption-breach): Visual representation of a system security breach. (css, lightweight)
- [Dynamic Pixel Flow](https://htmlhub.org/library/retro-cyberpunk/animated-background-dynamic-pixel-flow): Flowing grid of dynamic pixels. (canvas, moderate)
- [Hyperspace Corridor](https://htmlhub.org/library/retro-cyberpunk/background-2-hyperspace-corridor): Fast-moving corridor effect resembling hyperspace. (css, lightweight)
- [CRT Boot](https://htmlhub.org/library/retro-cyberpunk/crt-boot-sequence): Old school CRT monitor boot up sequence. (css, lightweight)
- [Circuit Tracers](https://htmlhub.org/library/retro-cyberpunk/digital-circuit-tracers): Electrons flowing through a digital circuit board. (canvas, moderate)
- [Synthwave Grid Run](https://htmlhub.org/library/retro-cyberpunk/envato-synthwave-grid): An infinite, neon-glowing 80s outrun grid rushing towards the camera using strict CSS 3D perspective. (css, lightweight)
- [Kernel Panic](https://htmlhub.org/library/retro-cyberpunk/kernel-panic-data-dump): Simulated system crash data dump. (css, lightweight)
- [Neon Hexagons](https://htmlhub.org/library/retro-cyberpunk/neon-hexagon-patterns): Glowing hexagonal grid pattern with neon effects. (css, lightweight)
- [Electric Arcs](https://htmlhub.org/library/retro-cyberpunk/electric-arcs): Branching bolts of neon lightning crackle across the dark, striking toward your cursor with a glowing flash at every impact. (canvas, moderate)
- [Synthwave Grid](https://htmlhub.org/library/retro-cyberpunk/synthwave-grid): An endless neon wireframe terrain races toward a retro striped sun on the horizon — the quintessential 80s synthwave flythrough. (canvas, lightweight)
- [Plasma Tunnel](https://htmlhub.org/library/retro-cyberpunk/plasma-tunnel): A hypnotic demoscene tunnel — spiralling plasma flutes rush inward toward a dark vanishing point in an endless psychedelic zoom. (canvas, moderate)
- [Cyber Fiber Optics](https://htmlhub.org/library/retro-cyberpunk/cyber-fiber-optics): Glowing fiber optic strands carrying data. (canvas, moderate)
- [Game of Life](https://htmlhub.org/library/retro-cyberpunk/game-of-life): Conway's Game of Life plays out forever — gliders, oscillators, and colonies bloom and die across a glowing cellular grid. (canvas, lightweight)

### Celebration (8)
[Category page](https://htmlhub.org/library/celebration)

- [Fireworks](https://htmlhub.org/library/celebration/anime-js-fireworks): Anime.js powered fireworks demonstration. (svg, moderate)
- [Cartoon](https://htmlhub.org/library/celebration/cartoon): Playful cartoon style morphing shapes. (canvas, moderate)
- [Confetti](https://htmlhub.org/library/celebration/confetti): Explosive confetti bursts. (canvas, moderate)
- [Bouncing SVG Balloons](https://htmlhub.org/library/celebration/envato-bouncing-balloons): Gravity-affected SVG balloons that bounce and settle interactively on the bottom of the screen. (svg, lightweight)
- [Falling Confetti](https://htmlhub.org/library/celebration/falling-confetti): Celebratory falling confetti pieces. (canvas, moderate)
- [Fizzy Sparks](https://htmlhub.org/library/celebration/fizzy-sparks): Rising bubbles and sparks, great for success states. (canvas, moderate)
- [Walking Peeps](https://htmlhub.org/library/celebration/movingpeeps): Animated characters walking across the screen. (svg, moderate)
- [Supernova](https://htmlhub.org/library/celebration/supernova-collapse-rebirth): Explosive supernova event and rebirth. (canvas, heavy)