Animated Blur Overlay Components

Dev Design Library indexes 7 Animated blur overlay components from 7 open-source UI libraries, with the most coming from Spectrum UI, React Bits, beUI, Lobe UI and cnblocks. 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 blur overlay components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Blur overlay components belong to the Effects group.

• Gradual BlurReact Bits · ReactProgressively un-blurs content based on scroll or trigger creating a cinematic reveal.
• Progressive BlurLobe UI · React
• LiquidbeUI · ReactGooey container (Liquid and LiquidItem): items placed inside merge into one liquid silhouette through an SVG filter.
• Locked FeatureSpectrum UI · ReactA paywall over a blurred preview of the feature it is selling.
• Logocloud Threecnblocks · SvelteScrolling logo cloud marquee with progressive blur edges
• Frost BlurredSpaceUI · ReactStacked, masked backdrop-filter layers that frost content along an edge.
• Progressive BlurSora UI · ReactA stacked-layer blur that ramps smoothly from sharp to fully blurred toward an edge, for fading content under a fixed…

Libraries with Animated blur overlay components

• Spectrum UI
• React Bits
• beUI
• Lobe UI
• cnblocks

Related categories

• Blur Overlay Components
• React Blur Overlay Components
• Tailwind CSS Blur Overlay Components
• Animated Effect Components
• Animated Image Effect Components
• Animated Marquee Components
• Animated Transition Components
• Animated Reveal Wrapper Components
• Animated Border Effect Components
• Animated Mask Effect Components
• Animated Glow Effect Components
• Animated Spotlight Effect Components
• Animated Tilt Effect Components