motion effects

16 hand-coded CSS fade-in animations with live demos — pure-opacity hero fade with staggered delays, clip-path inset reveal, blur defocus, staggered grid cascade, scroll-triggered IntersectionObserver reveal, directional slide-fade up, scale-up zoom-in, scale-down zoom-in, rotateX perspective tilt, word-by-word split, skew sweep, radial clip-path mask reveal, greyscale-to-color saturate, rotateY flip card, glitch flash multi-step, and cascade letter drop. 13 pure CSS + 3 with a tiny vanilla JS snippet — no framework. animation-fill-mode forwards, prefers-reduced-motion honoured, MIT licensed.

16 hand-coded CSS gradient animations with live demos — aurora mesh hero background, diagonal sweeping linear gradient, radial glow split, dark-mode subtle mesh pulse, glow-on-hover accent button, animated gradient border card, metallic shimmer skeleton loader, neon flowing underline link, infinite gradient text animation, hover-reveal text fill, glassmorphism moving backdrop, retro vaporwave cyberpunk mesh, liquid lava lamp blob, striped progress bar loader, file upload streaming state, and animated toggle switch track glow. 4 pure CSS + 12 with a small vanilla JS snippet — no framework. Modern @property typed-angle + conic-gradient + animation-timeline techniques, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, MIT licensed.

20 hand-coded CSS image hover effects with live demos — zoom-in card, hover reveal text overlay, e-commerce product image swap, grid blur overlay, slide-up caption, grayscale-to-color, color tint overlay, neumorphic image card, glassmorphism overlay, glowing neon border, clip-path morphing, 3D tilt perspective, shining glare sweep, split transition, ripple animation, spinning avatar border, fullscreen background swap, masonry zoom, icon reveal centre, and 3D card flip. 18 pure CSS + 2 with a tiny vanilla JS snippet — no framework. Modern @property + animation-timeline techniques, prefers-reduced-motion honoured, CLS-safe via aspect-ratio, WCAG 2.2 AA compliant, MIT licensed.

25 hand-coded CSS text animations with live demos — typewriter, gradient text, glitch, neon glow, clip-path reveal, letter spacing, wave, shimmer, fade-up stagger, 3D flip, SVG stroke draw, bouncing letters, blur reveal, perspective rotation, text-shadow pulse, morphing text, liquid fill, word scramble, split-text explosion, holographic chrome, decryption, elastic bounce, cursor blink, mask wipe, and kinetic typography. 16 pure CSS (no JavaScript) + 9 with a tiny vanilla JS snippet — no framework. Modern @property + animation-timeline + variable-font techniques, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, MIT licensed.

20 hand-coded CSS text gradient effects with live demos — hero title, Web3 neon glow, corporate logo, bold minimalist, hover transition, gradient button, active nav link, animated moving gradient, cyberpunk neon, metallic gold, glassmorphism contrast, pastel soft, vertical gradient, radial gradient, rainbow multi-colour, text stroke outline, @supports fallback pattern, Tailwind utility recipe, multiline paragraph, and dark-mode vs light-mode gradient swap via light-dark(). 18 pure CSS + 2 with a tiny vanilla JS snippet — no framework. Modern @property + animation-timeline + light-dark() techniques, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, MIT licensed.

14 hand-coded CSS typewriter effects with live demos — canonical pure-CSS steps() + ch cursor, multi-line stagger, infinite word-swap loop, neon terminal prompt, clip-path reveal mask, SVG stroke-dashoffset handwriting, gradient highlight sweep, variable-font weight morph, per-character split stagger, vanilla-JS character injection, Matrix-rain scramble decode, RGB-channel glitch-on-type, syntax-highlighted code-editor typewriter, and scroll-triggered word reveal. 9 pure CSS (no JavaScript) + 5 with a tiny vanilla JS snippet — no framework. Modern @property + steps() techniques, prefers-reduced-motion honoured, MIT licensed.