Vertical Cut Reveal

Text 54

About

Animated text that reveals each character, word, or line with a vertical clip-path wipe and configurable stagger.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Vertical Cut Reveal to your project and fits it to your theme.

Code

How Vertical Cut Reveal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import VerticalCutReveal from "@/components/ui/vertical-cut-reveal";

export default function Preview() {
  return (
    <div className="flex h-[400px] w-full flex-col items-start justify-center bg-white p-10 text-2xl uppercase tracking-wide text-[#0015ff] sm:text-4xl md:text-5xl md:p-16">
      <VerticalCutReveal
        splitBy="characters"
        staggerDuration={0.025}
        staggerFrom="first"
        transition={{
          type: "spring",
          stiffness: 200,
          damping: 21,
        }}
      >
        {`HI 👋, FRIEND!`}
      </VerticalCutReveal>
      <VerticalCutReveal
        splitBy="characters"
        staggerDuration={0.025}
        staggerFrom="last"
        reverse={true}
        transition={{
          type: "spring",
          stiffness: 200,
          damping: 21,
          delay: 0.5,
        }}
      >
        {`🌤️ IT IS NICE ⇗ TO`}
      </VerticalCutReveal>
      <VerticalCutReveal
        splitBy="characters"
        staggerDuration={0.025}
        staggerFrom="center"
        transition={{
          type: "spring",
          stiffness: 200,
          damping: 21,
          delay: 1.1,
        }}
      >
        {`MEET 😊 YOU.`}
      </VerticalCutReveal>
    </div>
  );
}