Animated Mask Effect Components

Dev Design Library indexes 33 Animated mask effect components from 11 open-source UI libraries, with the most coming from Pixel Perfect, Aceternity UI, React Bits, Cult UI 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 mask effect components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Mask effect components belong to the Effects group.

• Gradual BlurReact Bits · ReactProgressively un-blurs content based on scroll or trigger creating a cinematic reveal.
• Video TextMagic UI · ReactA component that displays text with a video playing in the background.
• Text GifCult UI · ReactText component with GIF-like animation effects and customizable styling
• PeelCanvas UI · ReactPeels the page back from an edge in 3D.
• Fluid Ink MorphSpectrum UI · Reactcomponent for the Fluid Ink Morph
• Aperture Mask RevealPixel Perfect · ReactA camera-aperture mask reveal — six shutter blades twist open around the center, dilating a hexagonal iris cut from an…
• Video TextAnimations (Svelte) · SvelteA component that displays video content masked by text, creating a text-shaped video effect with customizable…
• Frosted Glass RevealGreatUI · React
• Lens RevealUI Lab · ReactA lens follows your cursor and shows the specs hidden under a card.
• Text Hover EffectVelora UI · ReactGiant outlined word that draws in, then glows in brand colours under the pointer.
• Canvas TextAceternity UI · React
• Masked HeadingReact Bits · ReactHeading revealed word by word through a clip-path mask that wipes across, with a stagger.
• Blinds Mask RevealPixel Perfect · ReactA venetian-blinds mask reveal — the image is hidden behind N slats cut from a repeating-linear-gradient CSS mask, then…
• Svg Mask EffectAceternity UI · React
• Refine FrameReact Bits · ReactReserved-aspect frame that walks any media through queued, generating, refining and complete without layout shift…
• Brush Mask RevealPixel Perfect · ReactA brush-stroke mask reveal — the image is painted in along a thick snaking brush stroke, using an inline SVG mask…
• Text Hover EffectAceternity UI · React
• Clock Mask RevealPixel Perfect · ReactA radial clock-sweep mask reveal — a conic-gradient CSS mask sweeps a wedge around the center like a clock hand…
• Text Reveal CardAceternity UI · React
• Directional Mask RevealPixel Perfect · ReactA directional mask reveal — the image wipes in from a chosen edge (top, bottom, left, or right) via an animated…
• Ink Blob Mask RevealPixel Perfect · ReactAn ink-blob mask reveal — a drop splats in the middle, then spreads outward as an organic wobbling blob clip-path…
• Iris Mask RevealPixel Perfect · ReactA camera-iris mask reveal — a circular clip-path opens from wherever you click and expands until it reaches the…
• Keyhole Mask RevealPixel Perfect · ReactA keyhole mask reveal — a keyhole clip-path pops in with a slight tilt, then the view zooms through it until the image…
• Mosaic Mask RevealPixel Perfect · ReactA mosaic mask reveal — the image is rebuilt from a grid of square tiles that pop in with a staggered order (from the…
• Noise Mask RevealPixel Perfect · ReactA fragment-shader noise mask reveal — the image dissolves in through a drifting cloud of fbm noise, with a warm grainy…
• Pinwheel Mask RevealPixel Perfect · ReactA pinwheel mask reveal — N wedges sweep open around the center like a windmill (or a camera shutter), cut from an…
• Rect Mask RevealPixel Perfect · ReactA rectangular mask reveal — the image stays fixed while a clip-path inset rectangle grows from the center, keeping the…
• Sonar Mask RevealPixel Perfect · ReactA sonar mask reveal — concentric rings cut from a repeating-radial-gradient CSS mask thicken outward from the center…
• Spotlight Mask RevealPixel Perfect · ReactA spotlight mask reveal — the image stays dark except for a soft circle that follows your cursor like a flashlight…
• Star Mask RevealPixel Perfect · ReactA star-shaped mask reveal — a sparkle clip-path spins 360° once while scaling up from nothing to uncover the full image.
• Text Clip Mask RevealPixel Perfect · ReactA scroll-driven text-clip mask reveal — a video is clipped to the shape of a word, and as you scroll the text-shaped…
• Text Zoom Mask RevealPixel Perfect · ReactA text-zoom mask reveal — the image shows through the giant word "PIXEL", which then dives through the X until the…
• Wave Mask RevealPixel Perfect · ReactA liquid-wave mask reveal — the image fills from the bottom like rising water, with a living sine-wave crest cut from…

Libraries with Animated mask effect components

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

Related categories

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