proNew105 lines · framer-motion

Text Split Reveal

Type that arrives in pieces, on cue. A full-width section whose headline is split into words or characters, masked inside overflow-hidden boxes, and slides up into place — replaying every time it re-enters view and on a slow loop at rest.

Use it for: Hero and section headlines that need a more deliberate, editorial entrance than a simple fade.
Themes: Light + dark
License: Commercial use

Live

Split and reassembled

Typethatarrivesinpieces

Each word unlocks from its own box. Scroll it back into view, or just wait for the next pass.

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width kinetic text section: the headline is split into words or
 * characters, masked inside overflow-hidden boxes, and slides up into place.
 * Replays itself whenever it scrolls into view, and on a slow loop so a
 * static preview (a library card) still shows the motion.
 */

export interface TextSplitRevealProps {
  eyebrow?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Headline splits by word or by character (splitBy); each unit sits in its own overflow-hidden box so the reveal masks cleanly.
→Units stagger in with a short rotate + translateY spring, the last word painted in the accent colour when splitting by word.
→Re-triggers automatically every loopSeconds while the section is in view, so a static preview still shows the motion.
→Subcopy fades in just after the headline settles.
→prefers-reduced-motion renders every unit in its final position immediately and disables the loop.

Accessibility

✓The split units are presentation only; the heading text content is identical to the plain string, so assistive tech reads it normally.
✓Loop interval is paused whenever the section leaves the viewport.
✓Honours prefers-reduced-motion by skipping the stagger animation.
✓Honours prefers-reduced-motion.