Animated Backdrop Components

Dev Design Library indexes 378 Animated backdrop components from 41 open-source UI libraries, with the most coming from React Bits, ShaderCN, Pixel Perfect, Rewamp UI and OpenSourceUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the backdrop components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion.

Showing 120 of 378, a mix from every library. Open a library to see all of its components.

• Acid SquaresReact Bits · ReactA crystalline corridor of stacked squares receding into depth.
• Dither FieldMagic UI · ReactAn animated WebGL2 background of Bayer-dithered square dots. The dots follow a light pattern, an image or a video…
• Ai Blob WarpCult UI · ReactCircular avatar with Paper Design Warp shader; motion-safe pulse, pauses off-screen and when reduced motion is preferred
• CloudsCanvas UI · ReactTheme-aware mist parted by cursor wind.
• L
  Liquid GooeyLibraries.dev · ReactLiquid UI effects for React: Morph (gooey merge, jelly shape change, contact dissolve), Move (liquid-rubber trails)…
• Awesome Fluid GradientLobe UI · ReactAnimated background of soft colour gradients flowing slowly.
• Background PathsKokonut UI · ReactA ribbon of lines in one color that keeps flowing at any size and parts around the cursor.
• Black White BlobsCursify · React
• Voice OrbbeUI · ReactA liquid sphere that moves with your voice.
• Fluid OrbRare UI · ReactAn animated WebGL orb with drifting fluid shading. Supports size and color props.
• Animated Wave FooterSpectrum UI · Reactcomponent for the Animated Wave Footer
• Animated GradientSpell UI · ReactAnimated gradient background with presets and customizable swirl effects using WebGL.
• Animated RaysVengeance UI · ReactHero with animated heading
• OrbUser Interface Wiki · React
• Thinking OrbPanel UI · React NativeDotted orb saying which kind of busy an agent is.
• Button 16 - Ripple SpotlightShadcn Space · ReactMouse-tracking ripple spotlight effect button
• Arrow Letter BackgroundPixel Perfect · ReactA field of diagonal arrows where a red letter spells out a word one character at a time, each change sweeping across…
• Aurora BackgroundOpenSourceUI · ReactSoft aurora wash with lime, mint, cyan, and blue blobs over a warm paper base — wrap any page section or hero and pass…
• Aurora DriftKinetics · HTML/CSSSoft blurred colour fields drift and rotate forever
• Animated GradientComponentry · ReactA beautiful, animated, and customizable WebGL gradient with noise capabilities.
• Cta Threecnblocks · SvelteCTA section with background gradient
• Animated BackgroundAnimations (Svelte) · SvelteA shared animated background that smoothly moves between selected or hovered items.
• Hyperspace BackgroundBadtz UI · ReactA dynamic and customizable background component that simulates a star-filled hyperspace effect.
• Fluid OrbNexvyn UI · ReactA WebGL fluid orb in muted/neutral design tokens with sphere normals, fBm noise, and audio-reactive pulse.
• Elastic Line GridRewamp UI · ReactBackground grid of lines that bend elastically near the pointer and spring back.
• ORB-01ShaderCN · Reactcut-glass orb with a dispersive, turbulent interior
• ASCII Fluid23rd.dev · ReactMouse-trail WebGL fluid background quantized to a clean ASCII brightness ramp - zero deps, theme-aware.
• Dot Orbit ShaderSona UI · ReactAnimated multi-color dots orbiting their cell centers. Supports up to 10 colors with controls for size, spread, and…
• Particlessv-efferd · SvelteBackground of floating particles.
• Hero sectionArc Library · ReactThree full screen SaaS heroes: a live dashboard rising from the bottom edge over a drifting mesh, a workflow graph…
• Dot GridUI Lab · ReactDots swell and part around your cursor, and a click sends a shockwave.
• Ambient backgroundCojeev UI · ReactAdds a quiet animated composition around content, with decorative shapes kept behind a readable surface.
• BackgroundROI UI · ReactA background component with various visual effects.
• Announcement barFLX UI · ReactFull-width gradient promo with a New tag and arrow.
• Aurora BackgroundVelora UI · ReactVelora's signature drifting aurora gradient backdrop.
• OrbHalaska UI · React
• Gooey BlobsSpaceUI · ReactTwo draggable blobs that merge into one liquid shape via an SVG gooey filter.
• AI OrbSkecher UI · ReactAn interactive Three.js orb for AI assistants, voice interfaces, and ambient status surfaces.
• Liquid SurfaceLiquefy UI · ReactShader background of a liquid surface.
• Cosmic BackgroundReactFrame · ReactA canvas-powered animated night-sky background, rotating star rings, a drifting star field, a breathing cone light and…
• Dotted Glow BackgroundAceternity UI · ReactCanvas-based dotted background that randomly glows and dims.
• Aero ShardsReact Bits · ReactA GPU-driven wind sculpture of folded foil shards with crisp detail, content-safe placements, and responsive pointer…
• Flickering GridMagic UI · ReactA flickering grid background made with SVGs, fully customizable using Tailwind CSS.
• Bg Animate ButtonCult UI · ReactButton component with animated background effects and gradient transitions
• GridCanvas UI · ReactCells across the width of the wrapped area.
• Awesome Aurora BackgroundLobe UI · React
• Beams BackgroundKokonut UI · ReactAnimated background of drifting light beams rendered on an HTML canvas with configurable intensity. Built with React…
• Blob CursorCursify · React
• Floating Particle FooterSpectrum UI · Reactcomponent for the Floating Particle Footer
• Light RaysSpell UI · ReactAnimated light rays effect using WebGL shaders.
• Aurora HeroVengeance UI · ReactFluted glass dynamic hero with interactive switch
• Button 17 - Blob FillShadcn Space · ReactCircle blob expands from bottom center on hover to fill the button
• Aurora CurtainPixel Perfect · ReactDrifting ribbons of green and violet light over a deep night sky.
• Halftone Pop BackgroundOpenSourceUI · ReactPop-art background of halftone dots over a gradient.
• Breathing OrbKinetics · HTML/CSSA glowing orb scales and softens on an endless breath — pure CSS
• Aurora FlowComponentry · ReactProcedural atmospheric hero background with layered flowing color, diffused aurora light, and subtle interaction.
• Feature Twelvecnblocks · SvelteFeature grid with gradient backgrounds
• Flickering GridAnimations (Svelte) · SvelteAn animated flickering grid pattern component that creates a dynamic canvas-based background with randomly flickering…
• Mouse WaveBadtz UI · ReactAn interactive and customizable component that creates a dynamic wave effect responding to mouse movements, perfect…
• Glow OrbNexvyn UI · ReactA WebGL fbm-noise glow orb with state-driven colors, volume-responsive scale and glow, idle and connecting pulse…
• Fluid Morph OrbRewamp UI · ReactAnimated orb that continuously changes shape like a fluid, shader based.
• ORB-02ShaderCN · Reactornate scrollwork on a rolling dome
• Dither Scan23rd.dev · ReactAn image that starts as a 1-bit ordered dither. A diagonal scan line sweeps it a set number of times, and each pass…
• Mesh Gradient ShaderSona UI · ReactA flowing composition of animated color spots shaped by organic distortion and vortex effects. Powered by Paper Design…
• Floating pathssv-efferd · Svelte
• Magnet LinesUI Lab · ReactLines turn toward your cursor like iron filings near a magnet.
• Contour fieldCojeev UI · ReactOriginal topographic lines on the inherited paper surface, with a bounded GPU renderer.
• Hero 01FLX UI · ReactA centered serif hero with a soft gradient wash, pill CTA, and a floating integration cloud.
• Background BoxesVelora UI · ReactAn isometric grid whose cells light up in brand tints under the pointer.
• GradientSpaceUI · ReactCreates a smoothly animating multi-color gradient background that shifts colors gently behind your page content.
• Noise BackgroundReactFrame · ReactA canvas background with animated film-grain noise, soft color blob gradients, 7 built-in themes (or fully custom…
• Aurora BackgroundAceternity UI · React
• AntigravityReact Bits · React3D antigravity particle field that repels from the cursor with smooth motion.
• Floating 3D ParticlesMagic UI · ReactA canvas-based pseudo-3D particle field with perspective projection, continuous rotation and buoyant drift.
• Bg Animated Fractal Dot GridCult UI · ReactBackground animated fractal dot grid with performance optimization and responsive design
• Particle ObjectCanvas UI · ReactModels rebuilt as swirling particle clouds.
• Caustics BackgroundKokonut UI · ReactA hero on the floor of a pool. Light ripples across it, clicks drop rings that bend the light, and the headline's…
• Dot ParticlesCursify · React
• Fluid Morph BgVengeance UI · ReactOrganic fluid shape morphing animation
• Bayer Sunset BackgroundPixel Perfect · ReactA 1-bit retro sunset: a banded sun over a scrolling perspective grid, rendered in two colours with a Bayer ordered…
• Arc Bands BackgroundOpenSourceUI · React
• Dither BloomKinetics · HTML/CSSA low-bit dot field grows into a soft spectral bloom
• Closing PlasmaComponentry · ReactPlasma field tailored for footer and CTA sections with premium atmospheric motion.
• Hero Sevencnblocks · SvelteHero with gradient background and stats
• Glyph MatrixAnimations (Svelte) · SvelteAn animated grid of subtly shifting glyphs on a canvas, with a theme-aware color driven by the consumer.
• ParticlesBadtz UI · ReactA versatile and performant component for creating engaging, animated content displays with smooth infinite scrolling…
• Halftone Dot CursorRewamp UI · ReactRecreation of Recording 2026-09-17 213845.mp4: An interactive halftone dot matrix cursor that expands and blooms into…
• ORB-03ShaderCN · Reacta turbulent belt of light girdling the ball, contoured in rainbow
• Live Orb23rd.dev · ReactAn evenly lit sphere with two capsule eyes that follow the pointer: white, black, webgl, and custom variants.
• Flow sculptureCojeev UI · ReactA rendered form responds to pointer strokes through a fluid distortion field.
• Vortex CTA bandVelora UI · ReactDark rounded call-to-action band over a brand-tinted particle vortex, with two actions and fine print.
• Interactive Grid HeroSpaceUI · ReactInteractive proximity-reactive square cell grid canvas that softly rounds and insets cells within a focused radius…
• Background BeamsAceternity UI · React
• AuroraReact Bits · ReactFlowing aurora gradient background.
• Glyph MatrixMagic UI · ReactAn animated grid of subtly shifting glyphs with fade effect and theme support.
• Bg Animated GradientCult UI · ReactAnimated gradient background component with customizable color transitions
• Retro DitherCanvas UI · ReactA retro dithered pass over the live page.
• Drape BackgroundKokonut UI · ReactA pleated curtain in a breeze that you can push and pull, built with React, WebGL and a cloth simulation.
• Spotlight CursorCursify · React
• Highlight GridVengeance UI · ReactGrid with a colored highlight that glides behind the hovered cell
• Blob SpherePixel Perfect · ReactA sphere displaced by 3D noise in the vertex shader — drag to spin.
• Cherry Petal BackgroundOpenSourceUI · React
• Warp GridKinetics · HTML/CSSA planar field bends inward around its focal point
• Dither GradientComponentry · ReactGradient background with dithering noise.
• Light RaysAnimations (Svelte) · SvelteA component that creates animated light rays with customizable count, color, blur, speed, and length.
• Pixel DistorsionBadtz UI · ReactAn interactive and customizable shader effect that distorts pixels dynamically based on mouse interactions, perfect…
• Liquid Cursor GradientRewamp UI · ReactGradient background that flows like liquid following the pointer.
• ORB-04ShaderCN · Reacta hollow shell of light, faceted by a voxel lattice
• Radiant Lines23rd.dev · ReactA hyperspace starfield background: colored streaks radiate from the center, with warp speed driven by scroll velocity.
• Magic RingsCojeev UI · ReactOpen concentric rings expand in Cojeev colors and respond to pointer position.
• Dotted Glow BackgroundVelora UI · ReactCanvas dot grid where drifting glows brighten dots and tint them toward the brand.
• Liquid Metal BorderSpaceUI · ReactLiquid metal shader as a border wrap. Put any registry component inside.
• Background Beams With CollisionAceternity UI · React
• BalatroReact Bits · ReactThe balatro shader, fully customizalbe and interactive.
• Grid PatternMagic UI · ReactA background grid pattern made with SVGs, fully customizable using Tailwind CSS.
• Canvas Fractal GridCult UI · ReactInteractive canvas-based fractal dot grid with mouse tracking and wave effects
• WindKokonut UI · ReactStreamlines that part around the cursor, swirl in its wake and scatter on click, built with React and Canvas.
• Interactive ParticlesVengeance UI · ReactImage-sampled particles that scatter around the cursor
• Braille Terrain BackgroundPixel Perfect · ReactA slowly drifting terrain drawn in Unicode braille, so every character carries its own 2×4 dither cell.
• Coral Glow BackgroundOpenSourceUI · React

Libraries with Animated backdrop components

• React Bits
• ShaderCN
• Pixel Perfect
• Rewamp UI
• OpenSourceUI

Related categories

• Backdrop Components
• React Backdrop Components
• Tailwind CSS Backdrop Components
• Svelte Backdrop Components
• shadcn/ui Backdrop Components
• Animated Shader Background Components
• Animated Pattern Background Components
• Animated Orb Components
• Animated Grid Background Components
• Animated Wave Background Components
• Animated Beam Background Components
• Animated Noise Background Components
• Animated Spotlight Background Components