Animation Snippets — Free HTML CSS JS Animation Effects

Animation communicates state, guides attention, and adds personality to an interface. The right motion makes a product feel premium and alive. The wrong motion creates distraction and perceived slowness. This is the largest collection in the library — 21 animation effects covering text, backgrounds, cursors, interactive patterns, and abstract visuals.

Every snippet uses CSS keyframes and vanilla JavaScript. No GSAP, no Framer Motion, no Three.js, no Particles.js. Pure browser APIs only.

Text animations: Gradient Text uses background-clip: text with a 300% background-size gradient that animates background-position — the gradient sweeps across the text, not the element. Typewriter uses a character-append loop with a variable delay, producing a realistic typing effect with a blinking cursor. Text Scramble uses requestAnimationFrame to decode from a random 90-character pool one frame at a time, revealing each correct character progressively. Wave Text staggers each letter with a custom CSS animation-delay. Glitch Text uses multiple text-shadow values that shift with a CSS keyframe for a distorted cyberpunk appearance. Stagger List animates each list item into view with an incrementing animation-delay.

Background effects: Aurora Background uses three radial-gradient orbs with mix-blend-mode: screen and a slow CSS drift animation. mix-blend-mode: screen adds colour values together, creating bright, glowing overlap regions between orbs. Floating Particles runs on Canvas 2D with a mouse repel force: each particle calculates its distance from the mouse and adds a repel vector when within the trigger radius. Connection lines between close particles fade their alpha based on distance. Matrix Rain renders falling character streams in Canvas columns.

Cursor effects: Custom Cursor replaces the default cursor with a dot and a lag ring. The ring uses linear interpolation (lerp): rx += (mx - rx) × 0.12 per frame — moving 12% of the remaining distance to the cursor each frame. This creates the signature smooth-follow feel. Context-aware classes (.clicking, .link) change the cursor appearance over interactive elements. Spotlight creates a radial gradient that follows the cursor, revealing content in a cone of light.

Interactive effects: 3D Card Tilt calculates rotateX and rotateY from the normalised mouse offset within the card. The glow element follows the cursor position. Dark Mode Toggle switches a :root CSS variable and saves preference to localStorage. Scroll Snap Gallery implements a horizontal card carousel using scroll-snap-type: x mandatory.

Abstract visuals: Fireworks creates particles on click with polar coordinate trajectories, gravity physics, and alpha fade. Liquid Blob animates a morphing SVG path between keyframes. Analog Clock draws a real-time clock face on Canvas.