CSS Mask Animation Components

All 19 mask animation components

• Rect Mask Reveal — A rectangular mask reveal — the image stays fixed while a clip-path inset rectangle grows from the center, keeping the video aspect ratio, to uncover the whole frame.
• Star Mask Reveal — A star-shaped mask reveal — a sparkle clip-path spins 360° once while scaling up from nothing to uncover the full image.
• Directional Mask Reveal — A directional mask reveal — the image wipes in from a chosen edge (top, bottom, left, or right) via an animated clip-path inset.
• Center Split Reveal — A center-split mask reveal — the image is clipped to a closed vertical seam down the middle, then the clip-path opens left and right to split it apart and uncover the whole frame.
• Blinds Mask Reveal — A venetian-blinds mask reveal — the image is hidden behind N slats cut from a repeating-linear-gradient CSS mask, then every slat opens at once to uncover the whole frame.
• Clock Mask Reveal — A radial clock-sweep mask reveal — a conic-gradient CSS mask sweeps a wedge around the center like a clock hand, uncovering the image angle by angle until the full frame shows.
• Iris Mask Reveal — A camera-iris mask reveal — a circular clip-path opens from wherever you click and expands until it reaches the farthest corner, uncovering the full frame.
• Mosaic Mask Reveal — A mosaic mask reveal — the image is rebuilt from a grid of square tiles that pop in with a staggered order (from the center, edges, randomly, or a corner) until the picture is whole.
• Brush Mask Reveal — A brush-stroke mask reveal — the image is painted in along a thick snaking brush stroke, using an inline SVG mask whose stroked path animates its stroke-dashoffset from hidden to fully drawn.
• Pinwheel Mask Reveal — A pinwheel mask reveal — N wedges sweep open around the center like a windmill (or a camera shutter), cut from an animated repeating-conic-gradient mask, until the full frame shows.
• Sonar Mask Reveal — A sonar mask reveal — concentric rings cut from a repeating-radial-gradient CSS mask thicken outward from the center, filling the gaps between them, until the whole frame is uncovered.
• Spotlight Mask Reveal — A spotlight mask reveal — the image stays dark except for a soft circle that follows your cursor like a flashlight; click to flood the whole frame with light (and click again to dim back to the spotlight).
• Noise Mask Reveal — A fragment-shader noise mask reveal — the image dissolves in through a drifting cloud of fbm noise, with a warm grainy glow riding the dissolve edge. Click to replay.
• Noise Dissolve Reveal — A fragment-shader noise dissolve reveal — the image materialises in through a drifting cloud of fbm noise, with a warm grainy glow riding the dissolve edge. Click to replay.
• Aperture Mask Reveal — A camera-aperture mask reveal — six shutter blades twist open around the center, dilating a hexagonal iris cut from an inline SVG mask.
• Ink Blob Mask Reveal — An ink-blob mask reveal — a drop splats in the middle, then spreads outward as an organic wobbling blob clip-path until it floods the frame.
• Keyhole Mask Reveal — A keyhole mask reveal — a keyhole clip-path pops in with a slight tilt, then the view zooms through it until the image fills the frame.
• Text Zoom Mask Reveal — A text-zoom mask reveal — the image shows through the giant word "PIXEL", which then dives through the X until the whole frame is uncovered.
• Wave Mask Reveal — A liquid-wave mask reveal — the image fills from the bottom like rising water, with a living sine-wave crest cut from an inline SVG mask.