Line Reveal

Text

Per-line rise + fade, staggered and calm — each line clips inside its own mask.

Installation

One command drops the source into your repo — editable, with the provider and motion pulled in automatically.

npx shadcn add https://motion.asmitsah.dev/r/line-reveal.json

PrerequisiteInstall the provider base first

This component imports from @/lib/motion and needs <MotionProvider> mounted in your root layout — install the base once, before copying this component.

npx shadcn add https://motion.asmitsah.dev/r/provider.json

Step 1Install the runtime dependency

npm install motion

Step 2Copy the source into components/motion/line-reveal.tsx

components/motion/line-reveal.tsx

"use client";

import * as m from "motion/react-m";
import { type CSSProperties, isValidElement, type ReactElement, type ReactNode } from "react";
import { lineRevealContainer, lineRevealItem, viewportOnce } from "@/lib/motion";

const TAGS = {
  span: m.span,
  div: m.div,
  p: m.p,
  h1: m.h1,
  h2: m.h2,
  h3: m.h3,
  h4: m.h4,
  h5: m.h5,
  h6: m.h6,
} as const;

type Tag = keyof typeof TAGS;
type HostProps = { className?: string; style?: CSSProperties; children?: ReactNode };

type LineRevealProps = {
  /** A single host element (h1–h6 / p / span / div) whose own children is a
   *  plain string (split on "\n"). LineReveal reconstructs THAT element as the
   *  animated one — its tag, className + style win; no extra DOM wrapper. */
  children: ReactNode;
  delay?: number;
  trigger?: "inView" | "mount";
};

/** Per-line rise + fade, staggered and calm — for body copy / multiline blocks.
 *  Splits the wrapped element's string on "\n"; each line clips inside its own
 *  overflow-hidden wrapper so the rise reads as an emerge, not a slide.
 *  Transform-only (provider handles reduced motion). aria-label carries the whole
 *  text so SR reads it as one passage. */
export function LineReveal({ children, delay = 0, trigger = "inView" }: LineRevealProps) {
  const play =
    trigger === "mount"
      ? ({ animate: "animate" } as const)
      : ({ whileInView: "animate", viewport: viewportOnce } as const);

  // Read the wrapped element's tag + props + string text so we can re-render it
  // as the matching m[tag] carrying the stagger — the caller's tag/className win.
  const child = isValidElement(children) ? (children as ReactElement<HostProps>) : null;
  const tag = child && typeof child.type === "string" ? child.type : null;
  const text = child && typeof child.props.children === "string" ? child.props.children : null;

  // Fail soft: if the child isn't a single host element wrapping a plain string,
  // render it untouched (unanimated) rather than crash.
  if (!child || !tag || !(tag in TAGS) || text === null) {
    return <>{children}</>;
  }

  const Container = TAGS[tag as Tag] as typeof m.div;
  const { className, style } = child.props;
  const lines = text
    .split("\n")
    .map((line) => line.trim())
    .filter((line) => line.length > 0);
  // Headings permit an accessible name; generic tags (span/div/p) don't — so an
  // aria-label there is prohibited. role="img" lets the label name the composite
  // while the per-line masks stay aria-hidden.
  const isHeading = tag.length === 2 && tag.startsWith("h");

  return (
    <Container
      className={className}
      style={style}
      aria-label={text}
      role={isHeading ? undefined : "img"}
      variants={lineRevealContainer(delay)}
      initial="initial"
      {...play}
    >
      {lines.map((line, li) => {
        const lineKey = `l${li}`;
        return (
          <span key={lineKey} aria-hidden style={{ display: "block", overflow: "hidden" }}>
            <m.span variants={lineRevealItem} style={{ display: "block" }}>
              {line}
            </m.span>
          </span>
        );
      })}
    </Container>
  );
}

Usage

Basic

Wrap your own element — its tag + className win. Splits the string on \n; each line rises inside its own overflow-hidden wrapper, staggered by feel.lineStagger. aria-label carries the full passage.

import { LineReveal } from "@/components/motion/line-reveal";

<LineReveal>
  <p className="text-lg leading-relaxed">
    {"Calm, deliberate motion.\nOne line at a time."}
  </p>
</LineReveal>

trigger="mount"

Play immediately on render instead of waiting for scroll — good for hero copy above the fold.

<LineReveal trigger="mount">
  <p>{"Rises the moment it mounts.\nNo scroll required."}</p>
</LineReveal>

With delay

Offset a LineReveal behind a sibling to sequence a heading and its body copy.

<Fade>
  <h2>Leads</h2>
</Fade>
<LineReveal delay={0.15}>
  <p>{"Follows, a beat later.\nLine by line."}</p>
</LineReveal>

Props

Prop	Type	Default	Description
children	ReactElement	—	A single host element (h1–h6/p/span/div) wrapping a plain-string passage split on \n. Its tag, className + style are reused and it carries the aria-label. Required.
trigger	"inView" \| "mount"	"inView"	inView rises once at 30% visible; mount plays immediately on render.
delay	number	0	Seconds before the first line's stagger begins.