Rectangular Text Reveal

"use client";

import * as React from "react";
import RectangularTextReveal, { type RectangularTextRevealDirection } from "@/components/ui/rectangular-text-reveal";

const settings = {
  direction: "left",
  baseColor: "#ea580c",
  overlayColor: "#111111",
  useOverlay: true,
  stagger: 0.2,
  coverDuration: 0.34,
  revealDuration: 0.42,
};

export default function RectangularTextRevealDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  const [run, setRun] = React.useState(0);

  const reveal = {
    direction: s.direction as RectangularTextRevealDirection,
    baseColor: s.baseColor,
    // Hex keeps a color picker in the Controls panel; until it's changed, the
    // component's own theme-aware default (the foreground color) is used.
    overlayColor: s.overlayColor === settings.overlayColor ? undefined : s.overlayColor,
    stagger: s.stagger,
    coverDuration: s.coverDuration,
    revealDuration: s.revealDuration,
  };

  return (
    <main className="relative flex min-h-screen w-full items-center bg-background px-6 py-24 text-foreground sm:px-12">
      <section key={run} className="mx-auto w-full max-w-5xl">
        <RectangularTextReveal
          as="h1"
          {...reveal}
          useOverlay={s.useOverlay}
          className="text-[2.295rem] font-semibold leading-[0.95] tracking-tight sm:text-[3.4425rem] lg:text-[4.59rem]"
        >
          We design identities, product sites, and launch campaigns for teams
          who care how every word lands on the page.
        </RectangularTextReveal>
      </section>

      <button
        type="button"
        onClick={() => setRun((n) => n + 1)}
        className="absolute bottom-6 right-6 rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        Replay
      </button>
    </main>
  );
}