Dev Design LibraryBackdrop Components
Dev Design Library indexes 449 backdrop components from 49 open-source UI libraries, with the most coming from React Bits, ShaderCN, Pixel Perfect, OpenSourceUI and Aceternity UI. Each one links to its page with the source code, a live preview where available, the library license and the install command.
Showing 120 of 449, a mix from every library. Open a library to see all of its components.
BackdropMUI / Material UI · React
Acid SquaresReact Bits · ReactA crystalline corridor of stacked squares receding into depth.
Animated Grid PatternMagic UI · ReactA animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.
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.- Liquid GooeyLibraries.dev · ReactLiquid UI effects for React: Morph (gooey merge, jelly shape change, contact dissolve), Move (liquid-rubber trails)…
PersonaAI Elements · ReactAn animated AI visual component powered by Rive that responds to different states like listening, thinking, and…
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
Background PatternsUntitled UI React · React
Shader BackgroundbeUI · ReactCanvas shader backgrounds (mesh gradient, grain, warp, waves, voronoi, dot orbit and more) with a single typed variant…
OverlayTailGrids · ReactA component for displaying content in a floating container.
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
Canvas Dot PatternToolcraft · ReactVector workspace decoration, anchored to the viewport's centered world origin.
BeamLaunch UI · 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.
Assistant OrbSwiftPieces · SwiftUIA dark glass ball with a Siri-style voice wave inside, drawn by a Metal shader and locked to the thinking state.
Hyperspace BackgroundBadtz UI · ReactA dynamic and customizable background component that simulates a star-filled hyperspace effect.
Liquid MetalObsidianUI · ReactShader background that looks like flowing liquid metal or chrome.
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.
Orbkit Core (WebGPU)ShaderCN · ReactCore engine for GPU-powered shader orbs using vgpu
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…
Dither FieldMagic UI · ReactAn animated WebGL2 background of Bayer-dithered square dots. The dots follow a light pattern, an image or a video…
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
Voice OrbbeUI · ReactA liquid sphere that moves with your voice.
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
Layout LinesLaunch UI · React
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
Animated Grid PatternAnimations (Svelte) · SvelteAn animated grid pattern component that creates a dynamic background with moving squares that fade in and out.
Thought OrbSwiftPieces · SwiftUIA small glass orb with a voice wave whose colour follows the kind of work, and a glass status pill whose verb morphs…
Mouse WaveBadtz UI · ReactAn interactive and customizable component that creates a dynamic wave effect responding to mouse movements, perfect…
V PrismObsidianUI · React
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-01ShaderCN · Reactcut-glass orb with a dispersive, turbulent interior
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.
Sign-up cardVelora UI · ReactCentered sign-up card over a grid and light beams, with live password rules, terms and social sign-up.
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.
Dot PatternMagic UI · ReactA background dot pattern made with SVGs, fully customizable using Tailwind CSS.
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.
Awesome Grid BackgroundLobe UI · React
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
Code Block 03 - Custom BackgroundShadcn Space · ReactCode block with custom background and line numbers
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 Eightcnblocks · SvelteHero with video background and overlay
Dither ShaderAnimations (Svelte) · SvelteA canvas-based component that applies dithering effects to images with customizable patterns and color modes.
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-02ShaderCN · Reactornate scrollwork on a rolling dome
Live Orb23rd.dev · ReactAn evenly lit sphere with two capsule eyes that follow the pointer: white, black, webgl, and custom variants.
Grid fillersv-efferd · Svelte
Contours backgroundCojeev UI · ReactNested organic contour lines with generous space between islands.
Background BeamsVelora UI · ReactLight beams flowing along curved paths behind content.
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.
Flickering GridMagic UI · ReactA flickering grid background made with SVGs, fully customizable using Tailwind CSS.
Bg Animated GradientCult UI · ReactAnimated gradient background component with customizable color transitions
Retro DitherCanvas UI · ReactA retro dithered pass over the live page.
Awesome SpotlightLobe UI · React
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
Lattice SnapKinetics · HTML/CSSA tile follows the pointer, then springs onto the nearest cell
Dither GradientComponentry · ReactGradient background with dithering noise.
Libraries with backdrop components
Related categories
- React Backdrop Components
- Tailwind CSS Backdrop Components
- Svelte Backdrop Components
- Animated Backdrop Components
- shadcn/ui Backdrop Components
- Shader Background Components
- Pattern Background Components
- Gradient Background Components
- Orb Components
- Grid Background Components
- Particle Background Components
- Mesh Gradient Components
- Noise Background Components
- Wave Background Components
- Beam Background Components
- Aurora Background Components
- Spotlight Background Components
- 3D Background Components
- Meteors Components