Animation Library

Browse 54 free animations for your websites and projects

Category:
Technology:
Performance:
25-36 of 54
Aurora Borealis Flow preview
css
lightweight
View Page

Aurora Borealis Flow

Smooth, flowing gradient blobs simulating the Northern Lights using pure CSS.

Backgrounds #backgrounds #gradients
Bouncing SVG Balloons preview
svg
lightweight
View Page

Bouncing SVG Balloons

Gravity-affected SVG balloons that bounce and settle interactively on the bottom of the screen.

Celebration #celebration #svg
Infinite Mirror Room preview
css
lightweight
View Page

Infinite Mirror Room

A recursive CSS 3D transformation that creates an optical illusion of a never-ending mirrored corridor.

3D & WebGL #3d #mirrors
Glassmorphism Orbs preview
css
moderate
View Page

Glassmorphism Orbs

Soft gradient spheres floating slowly behind a stylized CSS glass pane utilizing backdrop-filter blurs.

Backgrounds #backgrounds #glassmorphism
Liquid Distortion Shader preview
webgl
heavy
View Page

Liquid Distortion Shader

A WebGL displacement shader creating a liquid, glassy refraction effect over neon gradients.

3D & WebGL #3d #webgl
Glowing Fireflies preview
canvas
lightweight
View Page

Glowing Fireflies

Jittery, bioluminescent canvas particles that drift organically through a dark foreground.

Particles & Systems #particles #fireflies
Magnetic Mouse Trails preview
canvas
moderate
View Page

Magnetic Mouse Trails

Viscous fluid particles that exhibit magnetic attraction and smooth repulsions based on cursor movement.

Interactive #interactive #magnetic
Liquid Metal Text morph preview
svg
lightweight
View Page

Liquid Metal Text morph

An intense visual text effect utilizing complex SVG feColorMatrix and feGaussianBlur filters to simulate liquid chrome.

Text & Typography #text #typography
Synthwave Grid Run preview
css
lightweight
View Page

Synthwave Grid Run

An infinite, neon-glowing 80s outrun grid rushing towards the camera using strict CSS 3D perspective.

Retro & Cyberpunk #retro #synthwave
Quantum Node Mesh preview
canvas
moderate
View Page

Quantum Node Mesh

A high-performance interactive particle mesh simulating quantum entanglement networks.

Particles & Systems #particles #network
Fizzy Sparks preview
canvas
moderate
View Page

Fizzy Sparks

Rising bubbles and sparks, great for success states.

Celebration #sparks #fizzy
Financial Stream preview
css
lightweight
View Page

Financial Stream

Streaming financial tickers and data.

Text & Typography #financial #data

Quick Start Guides

Get started with HTMLHub animations in minutes.

šŸ”

Find the Perfect Animation

  1. 1 Use the category filters above to narrow by type (3D, Particles, Text, etc.)
  2. 2 Filter by technology if you need pure CSS vs Canvas vs WebGL
  3. 3 Check the performance rating — lightweight is best for mobile
  4. 4 Click any card to see a live preview and source code
šŸ“‹

Use an Animation on Your Website

  1. 1 Click on an animation to open its detail page
  2. 2 Preview the effect in the live viewer
  3. 3 Click Download HTML to get the complete, standalone file
  4. 4 Copy the CSS and JS code into your project — each animation is self-contained
🧪

Test Performance Before You Ship

  1. 1 Open Chrome DevTools → Performance tab
  2. 2 Record while the animation runs for 5 seconds
  3. 3 Check that FPS stays above 50fps
  4. 4 If it drops, try a lightweight rated alternative

Source Code
Source Copied!
Loved this effect? Host your deployment globally for free on our partner networks:
Vercel Netlify Hostinger