Animated Shader Background Components

Dev Design Library indexes 130 Animated shader background components from 17 open-source UI libraries, with the most coming from React Bits, Rewamp UI, Componentry, Cojeev UI and Vengeance UI. 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 shader background components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Shader background components belong to the Backgrounds group.

Showing 120 of 130, 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…
• Hero Liquid MetalCult UI · ReactSplit-layout hero section with responsive LiquidMetal shader visuals, CTA, and tech stack badges
• WindKokonut UI · ReactStreamlines that part around the cursor, swirl in its wake and scatter on click, built with React and Canvas.
• Light RaysSpell UI · ReactAnimated light rays effect using WebGL shaders.
• Fluid Morph BgVengeance UI · ReactOrganic fluid shape morphing animation
• Animated GradientComponentry · ReactA beautiful, animated, and customizable WebGL gradient with noise capabilities.
• Mouse WaveBadtz UI · ReactAn interactive and customizable component that creates a dynamic wave effect responding to mouse movements, perfect…
• Fluid Morph OrbRewamp UI · ReactAnimated orb that continuously changes shape like a fluid, shader based.
• Shader Anime Fire23rd.dev · ReactCel-shaded WebGL flames for landing heroes: tongues lick up from the bottom in flat bands of heat, and the fire…
• Dot Orbit ShaderSona UI · ReactAnimated multi-color dots orbiting their cell centers. Supports up to 10 colors with controls for size, spread, and…
• Contour fieldCojeev UI · ReactOriginal topographic lines on the inherited paper surface, with a bounded GPU renderer.
• BackgroundROI UI · ReactA background component with various visual effects.
• VortexVelora UI · ReactBrand-tinted particles spiralling into the centre, leaving soft fading trails.
• Liquid Metal BorderSpaceUI · ReactLiquid metal shader as a border wrap. Put any registry component inside.
• Liquid SurfaceLiquefy UI · ReactShader background of a liquid surface.
• Canvas Reveal EffectAceternity UI · React
• Aero ShardsReact Bits · ReactA GPU-driven wind sculpture of folded foil shards with crisp detail, content-safe placements, and responsive pointer…
• Shader Lens BlurCult UI · ReactWebGL shader component with lens blur effects and mouse interaction
• Liquid ButtonVengeance UI · ReactLiving organic fluid ink button with cursor displacement tracking and tactile shockwave recoil
• Aurora FlowComponentry · ReactProcedural atmospheric hero background with layered flowing color, diffused aurora light, and subtle interaction.
• Pixel DistorsionBadtz UI · ReactAn interactive and customizable shader effect that distorts pixels dynamically based on mouse interactions, perfect…
• Marbled Fluid OrbRewamp UI · ReactAnimated orb with swirling marbled colours, shader based.
• Shader Fire23rd.dev · ReactSparse 2D WebGL fire wash for landing heroes — tongues rise from the bottom, theme-aware, optional pointer heat.
• Mesh Gradient ShaderSona UI · ReactA flowing composition of animated color spots shaped by organic distortion and vortex effects. Powered by Paper Design…
• Flow sculptureCojeev UI · ReactA rendered form responds to pointer strokes through a fluid distortion field.
• Paper ShaderSpaceUI · ReactPaper Shaders WebGL2 canvas. Pass a fragment shader and uniforms; the mount compiles, resizes, and ticks time.
• Cloud ShaderAceternity UI · React
• AntigravityReact Bits · React3D antigravity particle field that repels from the cursor with smooth motion.
• Liquid GradientVengeance UI · ReactShader background of a gradient flowing like liquid.
• Closing PlasmaComponentry · ReactPlasma field tailored for footer and CTA sections with premium atmospheric motion.
• Pulse ShaderBadtz UI · ReactAn interactive and customizable shader effect that creates a dynamic wave in response to hover interactions, perfect…
• Ambient Glow OrbsRewamp UI · React
• Shader Gradient23rd.dev · ReactQuiet WebGL color wash for landing heroes, empty states, and marketing sections: theme-aware, optional pointer follow.
• Magic RingsCojeev UI · ReactOpen concentric rings expand in Cojeev colors and respond to pointer position.
• Dither ShaderAceternity UI · React
• AuroraReact Bits · ReactFlowing aurora gradient background.
• Liquid MetalVengeance UI · ReactMetallic fluid shader effect
• Dither Prism HeroComponentry · ReactStunning WebGL hero with advanced dithering, prismatic refraction, holographic iridescence, and center-focused energy.
• Gradient Wave BackgroundRewamp UI · React
• Shader Metal23rd.dev · ReactLiquid chrome, gold, or copper ribbons twisting through a studio light rig: transparent WebGL, theme-aware, with a key…
• Meta BallsCojeev UI · ReactMoving scalar-field bodies merge and separate through liquid contours.
• VortexAceternity UI · React
• BalatroReact Bits · ReactThe balatro shader, fully customizalbe and interactive.
• Liquid OceanVengeance UI · ReactAnimated ocean wave field
• Liquid ChromeComponentry · ReactPremium fluid liquid metal shader background effect.
• Refracted BeamsRewamp UI · React
• Shader Sky23rd.dev · ReactWebGL sky for landing heroes: clear blue with drifting clouds in light, storm gray in dark, optional window-glass film.
• Pigment fieldCojeev UI · ReactAn original GPU pigment wash using the current Cojeev palette.
• BallpitReact Bits · ReactPhysics ball pit simulation with bouncing colorful spheres.
• Liquid TextVengeance UI · ReactFluid displacement text effect
• Prism GradientComponentry · ReactA theme-aware WebGL prism field with liquid checkered motion, electric-blue refraction, and tactile grain.
• Silk Waves BackgroundRewamp UI · React
• Portal FieldCojeev UI · ReactAn organically warped luminous halo with a soft chromatic fringe behind real content.
• BeamsReact Bits · ReactCrossing animated ribbons with customizable properties.
• Ripple Displacement SliderVengeance UI · ReactInteractive full-screen WebGL slider with fluid ripple displacement transitions
• Ripple TransitionComponentry · ReactWebGL image transitions with noisy refractive waves, chromatic edges, glow, and click-triggered ripple origins.
• Sine RibbonsRewamp UI · React
• Ripple DistortionCojeev UI · ReactPointer impulses send expanding waves through a textured print.
• Chroma GridReact Bits · ReactA responsive grid of grayscale tiles. Hovering the grid reaveals their colors.
• Silk AuroraComponentry · ReactPremium WebGL hero background with satin-dark aurora ribbons, pearlescent highlights, fine grain, and cursor depth.
• Singularity Flare BackgroundRewamp UI · React
• StrandsCojeev UI · ReactA bundle of colored ribbons moves through a bounded sine field.
• Color BendsReact Bits · ReactVibrant color bends with smooth flowing animation.
• Spectral RibbonComponentry · ReactA soft spectral light ribbon on pure black — slow liquid motion and rainbow fringe.
• Soft AuroraRewamp UI · React
• CubesReact Bits · React3D rotating cube cluster. Supports auto-rotation or hover interaction.
• Webgl LiquidComponentry · ReactCinematic liquid shader hero with premium gradients, configurable reveal timing, and advanced flow controls.
• Water Caustics BackgroundRewamp UI · React
• Dark VeilReact Bits · ReactSubtle dark background with a smooth animation and postprocessing.
• DitherReact Bits · ReactRetro dithered noise shader background.
• Dither VeilReact Bits · ReactA photo printed as a 1-bit dither that the cursor burns through to full colour, leaving a trail that knits back cell…
• Dodge FieldReact Bits · ReactWrapper that makes any child flee the pointer inside a bounded field, dodges once per approach, then relents after a…
• Dot FieldReact Bits · ReactInteractive dot grid with cursor bulge, glow, sparkle, and wave effects.
• Dot GridReact Bits · ReactAnimated dot grid with cursor interactions.
• Drift WallReact Bits · ReactAn endless perspective wall of tiles drifting past, lifting on hover.
• Elastic MeshReact Bits · ReactSpring-mesh surface that stretches under the pointer and settles back with damped physics.
• Evil EyeReact Bits · ReactProcedural evil eye shader with animated iris, slit pupil, and fiery outer glow.
• Faulty TerminalReact Bits · ReactTerminal CRT scanline squares effect with flicker + noise.
• FerrofluidReact Bits · ReactA churning magnetic fluid traced by glowing contour lines, with a cursor magnet.
• Floating LinesReact Bits · React3D floating lines that react to cursor movement.
• GalaxyReact Bits · ReactParallax realistic starfield with pointer interactions.
• Ghost FibersReact Bits · ReactA deep-blue recursive fiber field with luminous bands, radial twisting and soft atmospheric glow.
• Gradient BlindsReact Bits · ReactLayered gradient blinds with spotlight and noise distortion.
• Gradient WavesReact Bits · ReactRaymarched sine waves rolling toward a soft, hazy horizon.
• GrainientReact Bits · ReactGrainy gradient swirls with soft wave distortion.
• Grid DistortionReact Bits · ReactWarped grid mesh distorts smoothly reacting to cursor.
• Grid MotionReact Bits · ReactPerspective moving grid lines based on cusror position.
• Grid ScanReact Bits · ReactAnimated grid room 3D scan effect and cool interactions.
• HyperspeedReact Bits · ReactAnimated lines continuously moving to simulate hyperspace travel on click hold.
• IridescenceReact Bits · ReactSlick iridescent shader with shifting waves.
• Laser FlowReact Bits · ReactDynamic laser light that flows onto a surface, customizable effect.
• Letter GlitchReact Bits · ReactMatrix style letter animation.
• Light PillarReact Bits · ReactVertical pillar of light with glow effects.
• Light RaysReact Bits · ReactVolumetric light rays/beams with customizable direction.
• Light TunnelReact Bits · ReactA radial fibre-optic tunnel with light pulses racing into depth.
• LightfallReact Bits · ReactColorful light streaks raining down a glowing tunnel with a cursor light.
• LightningReact Bits · ReactProcedural lightning bolts with branching and glow flicker.
• Line WavesReact Bits · ReactAnimated line wave pattern with colorful warped distortion.
• Liquid ChromeReact Bits · ReactLiquid metallic chrome shader with flowing reflective surface.
• Liquid EtherReact Bits · ReactInteractive liquid shader with flowing distortion and customizable colors.
• Magic RingsReact Bits · ReactInteractive magic rings effect with customizable parameters.
• Meta BallsReact Bits · ReactLiquid metaball blobs that merge and separate with smooth implicit surface animation.
• Metallic PaintReact Bits · ReactLiquid metallic paint shader which can be applied to SVG elements.
• Molten MetalReact Bits · ReactSwirling caustic plasma filaments with molten, white-hot cores.
• NoiseReact Bits · ReactAnimated film grain / noise overlay adding subtle texture and motion.
• OrbReact Bits · ReactFloating energy orb with customizable hover effect.
• ParticlesReact Bits · ReactWebGL background of floating particles that can drift with the pointer.
• Pattern WavesReact Bits · ReactA lit halftone surface of dots, lines, crosses or glyphs that moves like draped silk, rolling swells or ripples, with…
• Pixel BlastReact Bits · ReactExploding pixel particle bursts with optional liquid postprocessing.
• Pixel SnowReact Bits · ReactFalling pixelated snow effect with customizable density and speed.
• PlasmaReact Bits · ReactOrganic plasma gradients swirl + morph with smooth turbulence.
• Plasma WaveReact Bits · ReactRaymarched plasma waves with dual-wave interference and OGL.
• PrismReact Bits · ReactRotating prism with configurable intensity, size, and colors.
• Prismatic BurstReact Bits · ReactBurst of light rays with controllable color, distortion, amount.
• RadarReact Bits · ReactRadar sweep effect with concentric rings, radial spokes, and a rotating beam.
• Ripple DistortionReact Bits · ReactPointer-driven water displacement that warps content and leaves a decaying wake.
• Ripple GridReact Bits · ReactA grid that continuously animates with a ripple effect.
• Shape BlurReact Bits · ReactMorphing blurred geometric shape. The effect occurs on hover.
• Shape GridReact Bits · ReactAnimated grid with shape variants (square, hexagon, circle, triangle) + direction customization.

Libraries with Animated shader background components

• React Bits
• Rewamp UI
• Componentry
• Cojeev UI
• Vengeance UI

Related categories

• Shader Background Components
• React Shader Background Components
• Tailwind CSS Shader Background Components
• shadcn/ui Shader Background Components
• Animated Backdrop 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