Line Mask Reveal
Reveals text one line at a time, each sliding up from behind its own clipping mask.
- Category
- Animations
- Added
- 2026-09-01
- Deps
- 1
- Updated
- 2026-09-01
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Props
"use client";
import { motion, useReducedMotion } from "framer-motion";
export function LineMaskReveal({
lines,
stagger = 0.12,
duration = 0.6,
once = true,
}: {
lines: string[];
stagger?: number;
duration?: number;
once?: boolean;
}) {
const prefersReducedMotion = useReducedMotion();
return (
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this animation
Line Mask Reveal animates transform: translateY() on each line inside a static overflow: hidden parent — the 'mask' is just CSS clipping, so the browser never composites anything beyond a transform, unlike an actually-animated clip-path would. Reach for this over a plain fade-in whenever the content is short text lines and the goal is the classic editorial 'line slides up from behind its own baseline' look rather than a generic opacity fade. The non-obvious detail: each line needs its own overflow-hidden wrapper, not one shared wrapper around the whole block — a single shared mask would clip the second and third lines' entrance too, not just the first line's, since they'd all be positioned inside the same clipped box from the start. The caveat: because the wrapper clips overflow, descenders (g, y, p) can look faintly cut on the very first animation frame if duration is set too short relative to the line's own line-height — leave a little breathing room rather than shaving duration to a minimum.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Stagger Reveal Group
animationsA wrapper that reveals its children one after another as the group scrolls into view.
Path Follow Scroll
animationsA marker that rides an SVG curve on scroll, banking through the bends.
Scroll Depth Layers
animationsA parallax scene where every layer derives from one shared scroll source.