Dual Wipe Reveal

Component 10

About

A text reveal effect that sweeps two colored curtain blocks away to unveil a heading or line of text as it scrolls into view.

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

Code

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

Usage.tsx

import { DualWipeReveal } from "@/components/ui/dual-wipe-reveal";

export default function DualWipeRevealDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center bg-background">
      <DualWipeReveal
        as="h2"
        accentColor="bg-emerald-500"
        wipeColor="bg-neutral-800"
        direction="left"
        className="text-3xl font-semibold tracking-tight text-foreground sm:text-5xl"
      >
        Find it, copy it, ship it.
      </DualWipeReveal>
    </div>
  );
}