Animated Wave Background Components

Dev Design Library indexes 20 Animated wave background components from 7 open-source UI libraries, with the most coming from React Bits, Aceternity UI, Velora UI, Pixel Perfect and Spectrum 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 wave background components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Wave background components belong to the Backgrounds group.

• Floating LinesReact Bits · React3D floating lines that react to cursor movement.
• Background PathsKokonut UI · ReactA ribbon of lines in one color that keeps flowing at any size and parts around the cursor.
• Animated Wave FooterSpectrum UI · Reactcomponent for the Animated Wave Footer
• Liquid OceanVengeance UI · ReactAnimated ocean wave field
• Dither Wave BackgroundPixel Perfect · ReactSlowly drifting blue-and-paper Bayer bands with a gently pointer-warped halftone texture.
• Wavy heroVelora UI · ReactBold centered hero over flowing waves, with a rotating headline word and avatar social proof.
• Background LinesAceternity UI · React
• Ghost FibersReact Bits · ReactA deep-blue recursive fiber field with luminous bands, radial twisting and soft atmospheric glow.
• Gentle WavesPixel Perfect · ReactA calm light-to-blue gradient rolling with slow, soft waves.
• Wavy BackgroundVelora UI · ReactBlurred, translucent ribbons of brand colour flowing sideways on a canvas.
• Wavy BackgroundAceternity UI · React
• Line WavesReact Bits · ReactAnimated line wave pattern with colorful warped distortion.
• Pattern WavesReact Bits · ReactA lit halftone surface of dots, lines, crosses or glyphs that moves like draped silk, rolling swells or ripples, with…
• Shape WavesReact Bits · ReactA WebGPU field of triangles, circles and squares that brighten and grow along rolling waves, with an optional text…
• Sliced WavesReact Bits · ReactA grid of soft glowing bars rippling like a slatted equalizer.
• StrandsReact Bits · ReactGlowing ribbon-like strands that ripple and weave across a transparent canvas.
• ThreadsReact Bits · ReactAnimated pattern of lines forming a fabric-like motion.
• TopographyReact Bits · ReactA living contour map with glowing, elevation-tinted lines.
• WavesReact Bits · ReactLayered lines that form smooth wave patterns with animation.
• Web ThreadsReact Bits · ReactGlowing sine threads woven through a luminous convergence point.

Libraries with Animated wave background components

• React Bits
• Aceternity UI
• Velora UI
• Pixel Perfect
• Spectrum UI

Related categories

• Wave Background Components
• Tailwind CSS Wave Background Components
• Animated Backdrop Components
• Animated Shader Background Components
• Animated Pattern Background Components
• Animated Orb Components
• Animated Grid Background Components
• Animated Beam Background Components
• Animated Noise Background Components
• Animated Spotlight Background Components