CSS Animations & Motion Effects — Free Code Collections
Motion makes interfaces feel alive. This collection covers the full range of CSS animations and motion effects — from subtle hover transitions to full scroll-triggered sequences, built with pure CSS wherever possible.
Loaders & Spinners
4 collections
20 CSS Loading Animations
20 hand-coded CSS loading animations for real product contexts — e-commerce checkout, video streaming buffering, AI chat thinking dots, fintech transactions, package delivery, healthcare, music vinyl, boarding passes, restaurant kitchens, weather radar, and real estate. Drop-in ready, scoped, prefers-reduced-motion guarded.
15 CSS Shimmer Skeleton Cards
15 production-ready CSS shimmer skeleton cards for loading states — Instagram-style profile cards, e-commerce product grids, data tables, SaaS dashboard widgets, blog article lists, social comment sections, search results, mobile feeds, form inputs, hero banners, chat bubbles, masonry galleries, dropdown notifications, and a dark-mode toggle skeleton. GPU-accelerated transform-only shimmer, zero-CLS placeholders, WCAG accessible with aria-busy + role='status'.
25 CSS Spinners
25 hand-coded CSS spinners covering every production loading-spinner pattern developers reach for — neon arc with glowing leading-edge dot, dual counter-rotate ring spinner, dot chase orbit (Material Design indeterminate pattern), gradient conic sweep, heartbeat pulse, audio equalizer wave bars, stacked ring helix, morphing square-to-circle, comet trail with fading tail, DNA double helix, folding cube 3D grid (SpinKit's signature pattern), ripple pulse ring (concentric circles), clock tick sweep, infinity loop stroke, bouncing elastic dots, spiral galaxy, glassmorphism loader (backdrop-filter pattern), cyberpunk segmented ring (gamer/Web3 aesthetic), breathing circle, particle scatter burst, retro TV static noise loader, liquid blob morphing, progress arc fill (determinate variant), matrix rain column (cyberpunk vertical), and aurora orb. All <strong>100% pure CSS</strong> — zero JavaScript, zero libraries (no react-spinners, no react-loading-skeleton, no SpinKit copy, no loading.io snippet). Every spinner uses CSS <code>@keyframes</code> animating <code>transform</code> + <code>opacity</code> only (GPU-accelerated, INP-safe — no layout thrash). Every demo includes proper <code>role="status"</code> + <code>aria-live="polite"</code> markup so screen readers announce loading state correctly, respects <code>prefers-reduced-motion</code>, uses scoped <code>.sp-NN__*</code> class names so multiple spinners coexist on the same page without style bleed, MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, WordPress — zero framework dependencies.
20 CSS Loaders
20 hand-coded CSS loaders covering every production loading-indicator pattern developers reach for — spinning ring loader (the canonical Material Design pattern), dot chase loader, skeleton screen loader (Facebook/LinkedIn/YouTube content-shimmer pattern), progress bar loader with shimmer, bouncing balls loader, DNA double-helix loader, glitch flicker loader, heartbeat pulse loader, circular progress with percentage, liquid fill loader, neon arc spinner, cube flip 3D loader, audio wave bars loader, morphing square loader, orbit planet loader, typing dots indicator (chat/messaging pattern), staircase step loader, infinity loop loader, gradient conic spinner (Instagram-stories pattern), and particle burst loader. All <strong>100% pure CSS</strong> — zero JavaScript, zero libraries (no react-loading-skeleton, no react-spinners, no SpinKit copy, no loading.io snippet). Every loader uses CSS <code>@keyframes</code> animation on <code>transform</code> + <code>opacity</code> only (GPU-accelerated, INP-safe — no layout thrash). Every demo includes proper <code>role="status"</code> + <code>aria-live="polite"</code> markup so screen readers announce "loading" state correctly. Every demo respects <code>prefers-reduced-motion</code>, uses scoped <code>.ld-NN__*</code> class names so multiple loaders coexist on the same page without style bleed, MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, WordPress — zero framework dependencies.
Text & Typing Effects
6 collections
30 CSS Text Animations
30 hand-coded CSS text animation demos — every topic ships 2–3 side-by-side variants so you can pick the exact treatment for your surface. Covers typewriter, gradient wave, staggered letter reveal, wavy keyframes, split reveal overflow-hidden, 3D flip, hover underline stretch, hover glitch, variable-font weight morph on hover, text fill on hover left-to-right, perspective tilt on mousemove, hover scatter-gather letters, sparkle particle highlight, scroll-driven reveal timeline, marquee horizontal scroll, sticky-scroll opacity fade, text-path curve scroll, multi-layer parallax, neon flicker, liquid fill, 3D extrude shadow, stroke drawing, metallic shimmer, spotlight mask, rainbow sweep, smoky dissipate blur, holographic foil, and rotating text wheel. Modern @property + animation-timeline + variable-font + view-timeline techniques, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, framework-agnostic, MIT licensed.
30 CSS Text Hover Effects
30 hand-coded CSS text hover effect demos covering the full HOVER-triggered text-interaction surface tier-1 SaaS marketing (Stripe / Linear / Vercel / Framer / Cursor / v0), editorial (NYT / Kinfolk / Substack), portfolio + agency creative (Awwwards SOTD), luxury e-commerce (Farfetch / MatchesFashion), premium fintech dashboards, and gaming / Web3 hover states reach for in 2026: 4-variant animated underlines (LTR / center-out / slide-thru / native text-decoration), text fill + liquid fill with @property fill %, text color reveal via background-clip crossfade, strike-through hover with e-commerce + todo + sold-out nav variants, text swap / flip up (2-storey elevator + 3D rolodex prism), glitch RGB-split with attr(data-text) clones + clip-path steps() slices, neon glow / flicker with 5-layer text-shadow ignition, shimmer / metallic gold gradient sweep, 3D pop / lift with 7-layer text-shadow staircase, split-letter staggered wave with calc(var(--i)*45ms) delay, mask / spotlight cursor-tracked photo-in-text with radial mask, reveal hidden text / spoiler with filter:blur + :has(:checked), blur to focus with row-hover defocus + focus-visible mirror, magnetic cursor-tracking with elastic snap-back, letter-spacing expansion with margin-right phantom-space fix, typography outline / stroke → fill pour, scramble / matrix with setInterval + ch min-width lock, animated border / encased text with corner trace + conic-gradient orbit, elastic / rubber-band squash-stretch bounce, variable font weight morph with bold-ghost width reservation, rainbow oklch longer-hue gradient flow with seamless -300% loop, rotational / perspective tilt driven by 4 quadrant sibling zones, smoke / dissolve particle per-letter drift, fire / heat wave upward text-shadow + skew haze, text-shadow direction driven by cursor vector math, marquee text speed-up on hover with WAAPI updatePlaybackRate, duotone / riso split with two attr(data-text) clones + complementary inset() clips, tooltip reveal with attr(data-tip) + intent delay + aria-describedby, SVG distorted wave / ripple via feTurbulence + feDisplacementMap + SMIL, mask clip-path reveal with diagonal wipe polygon + circle bloom + 12-point blinds. 25 truly Pure CSS + 5 with a tiny optional vanilla JS snippet (spotlight cursor, magnetic cursor, scramble ticker, text-shadow vector, marquee playback rate). Every text-hover effect is scoped under a unique .cth-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, mirrors every :hover with :focus-visible for keyboard users (WCAG 2.1.1), and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
20 CSS Neon Text Effects
20 hand-coded CSS neon text effects for SaaS hero CTAs, Twitch/streaming overlays, cyberpunk retail signage, 80s synthwave portfolios, and dark-mode fintech dashboards — neon glow button hover, flashing sign, realistic flickering tube, hollow text-stroke outline, LED 7-segment clock, animated @property hue rotation, low-INP compositor motion, Tailwind utility, glitch, on/off toggle, gradient-flow terminal. Layered text-shadow + box-shadow, WCAG-friendly, copy-paste ready.
16 CSS Glitch Text Effects
16 production CSS glitch text effect designs with live demos and copy-paste code — cyberpunk RGB-split chromatic aberration, hover-triggered burst, retro VHS scanlines with chromatic distortion, Matrix-style character scramble decryption, 404 error broken-data corruption, ambient micro-glitch loop for marketing surfaces, sci-fi HUD terminal flicker, spooky horror twitching text with blood-glow, multi-line synchronized paragraph glitch, synthwave neon glow snap, intro-load reveal animation, hacker terminal build-fail scramble, canvas noise overlay blend, split color-channel chromatic drift, plus two AI-era concepts: LLM token-stream hallucination correction and Diffusion-model decode crystallization. Every glitch scoped under .gt-NN, copy-paste ready.
20 CSS Text Gradient Effects
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 CSS Typewriter Effect Designs
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.
Hover & Interaction
7 collections
26 CSS Link Effects
26 hand-coded CSS link and text hover effects covering every real-world pattern: animated underlines, gradient text with background-clip, border-draw traces, slide-in fills, liquid text fill, glowing halos, wavy squiggles, character morphs, dotted focus rings, encircled outlines, chevron arrows, terminal cursors, neon flickers, heartbeat pulses, sweep reveals, letter push staggers, marker highlighters, background slides, crosshair brackets, glitch splits, ink bleeds, magnetic cursor pulls, caret trails, brutalist shadows, 3D text flips, and typewriter type-on reveals. Copy-paste HTML and CSS, WCAG 2.2 accessible focus-visible, prefers-reduced-motion guarded, framework-agnostic.
36 CSS Button Hover Effects
36 hand-coded CSS button hover effects — 8 brand-new premium micro-interactions (magnetic ripple attraction, cyberpunk holographic glitch grid, frosted glassmorphism shimmer glow, SVG organic blob morph, dual-line intersection border draw, isometric tactile 3D depress, infinite sliding kinetic marquee, chroma conic border spin), 27 shipped classics (liquid fill, neon pulse, glitch slice, ripple wave, 3D press, cursor spotlight, and more), plus a Liquid Glass add-to-cart CTA with SVG displacement ripple that warps the frosted surface on click (Apple iOS 26 / macOS Tahoe aesthetic). Each title packages 2-3 side-by-side sub-variant designs — 90+ total button designs in one collection. Ready-to-ship for SaaS CTAs, fintech premium tiers, e-commerce checkout, gaming portals, and web3 dashboard button micro-interactions. Real semantic <button>, keyboard-operable with :focus-visible ring, animates transform / opacity / filter / clip-path only (CLS 0, INP-safe), prefers-reduced-motion respected, decorative layers aria-hidden. Namespaced scoped CSS drops into Tailwind v4 with zero collision. MIT licensed.
20 CSS Animated Buttons
20 hand-coded CSS animated buttons — neon glow, ripple, 3D press, liquid fill, jelly bounce, shine sweep, animated border, moving gradient CTA, text flip, submit success state, add-to-cart progress, download icon, hamburger-to-close, toggle switch, loading spinner inside button, next/prev arrow nav, and ghost button background reveal. Half pure CSS, half lightweight JS for production interactions.
20 CSS Image Hover Effects
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.
30 CSS Hover Effects
30 hand-coded CSS hover effects covering every production interactive pattern shipping today — text hover (underline draw, glitch, letter-spacing expand, gradient reveal, split text, neon glow), button hover (magnetic liquid, border draw, shimmer shine, fill wipe, 3D press, ripple), card hover (3D tilt, flip, glassmorphism, spotlight, slide reveal, stack lift), image hover (zoom-pan, color channel split, distortion, duotone, curtain reveal, Ken Burns), navigation hover (underline slide, highlight fill, strikethrough link, inline word swap), and pointer-tracking effects (cursor dot trail, magnetic pull). 24 demos are 100% pure CSS using <code>:hover</code> + GPU-accelerated <code>transform</code> / <code>opacity</code> transitions; 6 use ~30-60 lines of vanilla JavaScript for pointer-coordinate tracking. All respect <code>prefers-reduced-motion</code>, use scoped <code>.hv-NN__*</code> class names so multiple effects coexist on the same page without style bleed, ship INP-safe (no layout-triggering animations), MIT-licensed. Drop into React, Vue, Astro, Svelte, Rails ERB, plain HTML, or WordPress — zero framework dependencies.
12 CSS Ripple Effects
12 hand-coded CSS ripple animations covering every production pattern shipping today — interactive water-surface click ripples with multi-ring concentric expansion, vanilla Material Design ink button ripple, animated pond background with bubble particles, neon glow ripple, pure-CSS ripple loading spinner, sonar ping for live status indicators, heartbeat pulse for medical and fitness UIs, ripple card hover effect, sound wave visualiser (no Web Audio API required), liquid drop animation, ripple-driven login form, and aurora borealis ripple background. All GPU-accelerated via transform + opacity only (no layout thrashing, 60fps on mid-tier mobile), respect prefers-reduced-motion, use scoped .rpl-NN__* class names so multiple can coexist on the same page, and ship MIT-licensed with zero framework dependencies. 6 demos are 100% pure CSS, 6 use vanilla JavaScript for click coordinates / particle spawning / live state.
33 CSS Card Hover Effects
33 hand-coded CSS card hover effects with live demos — multi-axis 3D tilt with parallax, glowing gradient glassmorphic border, image zoom with content slide-up, front-to-back 3D flip, sibling de-emphasis with :has(), minimalist elevation, plus 27 more (elastic lift, conic-gradient border, holographic foil, neon sign, glitch RGB split, magnetic float, blueprint reveal, aurora drift and more). 26 pure CSS + 7 with a small vanilla JS snippet for cursor tracking. prefers-reduced-motion respected, scoped class names, MIT-licensed.
Keyframe Animations
9 collections
22 CSS Transitions
22 hand-coded CSS transition patterns covering the transition property and its longhands, timing functions including linear() springs and cubic-bezier, delay choreography that reverses on exit, compositor-thread transforms, scale without layout shift, gradient interpolation via registered custom properties, border and outline transitions without reflow, transition-behavior allow-discrete for display none, focus-within parent state, height auto with interpolate-size, @starting-style entry transitions, view-transition names and pseudo elements, data-attribute state machines, transform-origin underlines, @property interpolation, :has() sibling transitions, backdrop-filter cost, index-driven staggered delay, transition all versus explicit property lists, interruption and reverse playback, discrete property behaviour, and a reduced-motion strategy. 19 demos are pure CSS; 3 use vanilla JavaScript.
25 CSS Number Counter Animations
25 animated number counters for SaaS landing pages, dashboard KPIs, e-commerce sales tickers, fundraising progress meters, product launch countdowns, fitness rings, stock tickers, ESG impact dashboards, and gamified milestone widgets. Copy the HTML, CSS, and requestAnimationFrame count-up JS — no libraries, no build step.
30 CSS Shake Animations
30 hand-coded CSS shake animation demos — each topic ships 2–3 side-by-side variants so you can pick the exact treatment for your surface. Covers invalid-input error shakes, form-submit failure shakes, password wrong-attempt recoil, login box shake, hover attention wiggles, buy-now CTA shake, notification bell ring, shopping cart wiggle on add-to-cart, lock icon shake, alert badge shake, heart-icon pulse-and-shake, trash-icon drag-over shake, horizontal + vertical + skew + aggressive + gentle-continuous + elastic + 3D shake styles, hit-damage shake for browser games, and full screen shake. Modern @property + linear() spring easing + :user-invalid + :has() techniques throughout, prefers-reduced-motion honoured, WCAG 2.2 AA compliant, framework-agnostic, MIT licensed.
16 CSS Bounce Animations
16 hand-coded CSS bounce animation templates built as real-world use cases — landing-page scroll-down arrow, animate.css-style bounce-in entrance modal, Stripe payment success checkmark, Sonner/Radix toast notification, chat typing dots (wave), button hover bounce, SaaS pricing card hover lift, Shopify Add-to-Cart cart-icon shake, notification badge pop, dark-mode toggle switch elastic snap, physics ball with squash-and-stretch, weightless floating badge, bouncing letters wave, Stripe checkout form error alert shake, DVD screensaver viewport bounce, and Tailwind <code>animate-bounce</code> customization. Every bounce animates <strong>only <code>transform</code> and <code>opacity</code></strong> — never <code>margin-top</code>, <code>top</code>, <code>width</code>, or <code>height</code>, which trigger the layout+paint pipeline every frame and tank INP scores. 12 pure CSS + 4 with vanilla JS (modal open/close, toast auto-cycle, cart bounce class toggle, error state toggle). Every demo respects <code>prefers-reduced-motion</code> with a tier-appropriate fallback — arrivals show settled state, interactions swap for instant color change, playful demos disable entirely. Scoped under <code>.bn-NN</code>, MIT-licensed.
16 CSS Pulse Animations
16 hand-coded CSS pulse animation templates built as real-world use cases — landing-page CTA button pulse, mobile FAB ripple, video play overlay halo, e-commerce Add-to-Cart hover-triggered double pulse, notification bell badge, live status dot, ECG heartbeat waveform, DevOps server status ring, recording indicator, map pin drop, skeleton loader shimmer, form submitting state, load-more staggered dots, wishlist heart cardiac rhythm, voice search mic listening pulse, and security scan overlay. Every pulse animates <strong>only <code>transform</code>, <code>opacity</code>, and <code>box-shadow</code></strong> — the three GPU-compositor-safe properties that keep 60fps on real mobile hardware without triggering layout reflow. Animating raw <code>width</code>, <code>height</code>, <code>margin</code>, or <code>padding</code> would tank INP scores; every demo here avoids that trap. 13 pure CSS + 3 with vanilla JS (form submit state, load-more trigger, voice listening). All respect <code>prefers-reduced-motion</code> — medical/status indicators keep a static readable state, decorative pulses disable entirely. Scoped under <code>.pl-NN</code>, MIT-licensed.
18 CSS Slide In Animation Templates
18 hand-coded CSS slide-in animation templates covering the full modern web-app playbook — restaurant menu cards, e-commerce product grids, SaaS pricing tables, insurance quote forms, real estate property listings, doctor appointment slot pickers, fintech dashboard KPI cards with count-up, legal firm testimonials, bank mortgage loan calculators with sliders, hotel search results, online course cards, job listings, CRM contact grids, fitness class schedules, startup landing heroes, newsletter modals, GDPR cookie banners, and terminal-styled 404 error pages. Every template ships with industry-appropriate palette, typography, and real content — copy-paste directly into your restaurant, healthcare, fintech, real estate, or SaaS project without stripping out generic styling. 15 pure CSS + 3 with tiny vanilla JS. Compliance callouts embedded (TILA, GDPR, ABA Rule 7.1, state salary transparency laws). MIT licensed, prefers-reduced-motion honoured, accessibility-tested.
16 CSS Fade In Animation Designs
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.
30 CSS Keyframe Animations
30 hand-coded CSS @keyframes animations covering every production motion pattern shipping today — loading spinners (6 variants), typewriter text effect, bouncing ball, pulse-glow buttons, morphing blobs, particle burst, ocean waves, 3D flip cards, neon flicker, skeleton loading shimmer, glitch text, solar-system orbit, liquid-fill progress, stagger list reveal, fire animation, ripple click, floating elements, infinite-scroll ticker (marquee replacement), countdown timer, path drawing, spotlight, spring bounce, confetti explosion (no canvas), breathing meditation pulse, typewriter-delete loop, aurora borealis background, card stack reveal, kinetic typography, morphing progress steps, and animated gradient mesh background. All 30 are 100% pure CSS — zero JavaScript, zero libraries, zero dependencies. GPU-accelerated via transform + opacity (compositor-thread, 60fps on mid-tier mobile, INP-friendly). Each demo uses scoped .kf-NN__* class names + prefixed @keyframes names so all 30 coexist on the same page. Respects prefers-reduced-motion. MIT-licensed.
20 CSS Rotate Animations
20 hand-coded CSS rotation patterns that treat rotation as the subject rather than a side effect of another component. Covers the canonical infinite keyframe spin and why it needs linear timing, hover tilts that reverse cleanly, the transform rotate property against the modern independent rotate property, 180-degree disclosure toggles, 3D cube faces with perspective and preserve-3d, rotateY coverflow, scroll-driven angles on animation-timeline, hue-rotate colour cycling, the composition-order trap where rotate and translate swap results, meshed gear trains with correct tooth ratios, a turntable at 33 and a third rpm, gauge needles pivoting at their base, fan blades, orbital motion, text set around a circle, fanned card decks, transform-origin as a full reference, animation-play-state pause and resume, and reduced-motion safe rotation.
Background & Scroll
9 collections
20 CSS Scroll Animations
20 hand-coded CSS scroll animation patterns covering animation-timeline with scroll() and view(), named scroll timelines, view timeline subject and scroller, animation-range start and end, scroll-timeline-axis for horizontal scrollers, the four view ranges cover contain entry and exit, timeline-scope across DOM branches, non-root scroll containers, sticky pinned scrubbing, fill-mode and why animation-duration is ignored, scroll-driven 3D transforms, divergent ranges for depth, the IntersectionObserver fallback contract, rootMargin and threshold semantics, scroll-snap interaction, SVG stroke-dashoffset drawing, reduced-motion strategy, main-thread cost, @supports gating, and debugging a timeline that does not run. 17 demos are pure CSS; 3 use vanilla JavaScript.
22 CSS Parallax Effects
22 hand-coded CSS parallax patterns — pure-CSS scroll-timeline multi-layer hero, animation-timeline view element-enter parallax, scroll-driven SVG path draw, split-screen dual-axis, backdrop-filter blur cross-fade, scroll-linked typography scale, mouse-position card grid, 3D perspective layers, pinned-scene product showcase, chapter-marker storytelling, aurora gradient, plus classic multi-layer landscape, sticky sections, horizontal scroll, image grid, text overlay, mouse card tilt, zoom-in depth, and backdrop blur transition.
25 CSS Background Animations
25 hand-coded CSS background animations for SaaS hero sections, developer tool documentation, agency portfolios, gaming and Web3 landing pages, seasonal e-commerce campaigns, and dark-mode dashboards. Covers full-screen gradient shifts, animated mesh gradients, aurora borealis glow, cursor spotlight follow, interactive water ripples, dot grid and diagonal stripe patterns, SVG grain and noise texture overlays, topographic contour lines, layered SVG waves, plasma and lava lamp fluids, bokeh light blur, particle constellation networks, matrix digital rain, synthwave 3D perspective grids, starfield warp speed, CRT scanline overlays, fog and mist drift, morphing organic blobs, floating glassmorphism orbs, halftone dot patterns, starry night skies, floating geometric shapes, rising bubbles, and falling snow. 20 are pure CSS with zero JavaScript; the 5 that need it use vanilla canvas or pointer tracking with no dependencies. Every background animates compositor-only properties so it never blocks the main thread, is scoped under a .bga-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
18 CSS Scroll Progress Bar
18 hand-coded CSS scroll progress bar designs for blog article readers, SaaS onboarding wizards, e-commerce checkout flows, documentation sites, image carousels, and long-form landing pages. Top fixed reading bar with animation-timeline: scroll(), sticky header with integrated glassmorphic progress bar, floating radial SVG progress ring with @property registered angle, percentage counter tooltip, back-to-top button with circular morph, gradient multi-color bar, vertical side-docked line, container-scoped inside a div, multi-section TOC tracker with IntersectionObserver scrollspy, step-segmented section-by-section bar, horizontal carousel scroll bar with snap points, e-commerce checkout step progress on scroll, signup onboarding form scroll progress with localStorage save-and-restore, Tailwind CSS @theme + arbitrary values recipe, custom ::-webkit-scrollbar with progress indicator, rainbow hue-rotating bar, cyberpunk neon glow dark mode bar, and ultra-thin 2px minimalist micro progress line. All 18 use animation-timeline: scroll() where supported with rAF scroll listener fallback for Safari + Firefox — no jank, no library, no scroll-listener anti-patterns. Every design scoped under .sp-NN prefix for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, framework-agnostic (React, Vue, Svelte, Astro, Next.js, Nuxt, Remix, SvelteKit).
12 CSS Image Reveal on Scroll
12 production-grade CSS image-reveal-on-scroll demos — industry-templated heroes for fintech, luxury, SaaS, real estate, insurance, editorial, agency, enterprise, legal, healthcare, mortgage, and travel verticals. Built on the W3C animation-timeline: view() spec with IntersectionObserver fallbacks. Real free Unsplash images bundled, compliance-aware copy (FDIC, HIPAA, TILA, ABA Rule 7.1, Fair Housing), copy-paste ready.
12 CSS Infinite Marquee Designs
12 production-ready CSS infinite marquee demos — as-seen-in press logo bars, B2B client logo walls, sponsor & exhibitor tier rows, e-commerce USP text tickers, live stock and crypto price tickers, flash-sale announcement bars, auto-sliding testimonial rails, portfolio tech-stack scrollers, image-heavy brand walls, vertical agency-services columns, draggable inertia marquees and scroll-velocity reactive marquees. Every loop is seamless, pause-on-hover, WCAG-friendly, and copy-paste.
11 CSS animation-timeline Demos
11 pure CSS animation-timeline demos built on the W3C scroll() and view() spec — reading progress bar, view-timeline fade & reveal, shrinking sticky header, stacking cards, horizontal scroll section, parallax hero, container shadow indicators, reverse-scroll columns, text scrim reveal, cover card to sticky header, and image zoom / clip-path wipe. Zero JS, off the main thread, Core Web Vitals safe. Copy-paste ready.
16 CSS Gradient Animations
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.
11 CSS Page Transitions
11 free CSS page transition patterns — fade, slide, scale/zoom, clip-path wipe, blur morph, 3D page turn, ink bleed, triangle shatter, split curtain, matrix rain and brushstroke. Complete interactive demos with copy-paste HTML, CSS and JavaScript.