"use client";

import { useRef } from "react";
import { motion, useInView } from "motion/react";
import { cn } from "@/lib/utils";

interface MaskedRevealProps {
  children: string;
  className?: string;
  staggerDelay?: number;
  duration?: number;
  delay?: number;
  once?: boolean;
}

function MaskedReveal({
  children,
  className,
  staggerDelay = 0.1,
  duration = 0.9,
  delay = 0,
  once = true,
}: MaskedRevealProps) {
  const ref = useRef<HTMLDivElement>(null);
  const isInView = useInView(ref, { once, margin: "-10%" });

  const words = children.split(" ");

  return (
    <div ref={ref} className={cn("flex flex-wrap", className)}>
      {words.map((word, i) => (
        <span key={i} className="overflow-hidden pb-[0.1em]">
          <motion.span
            className="inline-block"
            initial={{ y: "110%" }}
            animate={isInView ? { y: "0%" } : { y: "110%" }}
            transition={{
              duration,
              delay: delay + i * staggerDelay,
              ease: [0.22, 1, 0.36, 1],
            }}
          >
            {word}
            {i < words.length - 1 ? " " : ""}
          </motion.span>
        </span>
      ))}
    </div>
  );
}

export default function MaskedRevealDemo() {
  return (
    <div className="flex min-h-105 flex-col items-start justify-center gap-1 px-8 py-16">
      <MaskedReveal
        className="text-[90px] font-bold leading-none tracking-tight text-foreground"
        staggerDelay={0.12}
        duration={0.9}
        delay={0}
      >
        Design that
      </MaskedReveal>
      <MaskedReveal
        className="text-[90px] font-bold leading-none tracking-tight text-foreground"
        staggerDelay={0.12}
        duration={0.9}
        delay={0.3}
      >
        speaks for
      </MaskedReveal>
      <MaskedReveal
        className="text-[90px] font-bold leading-none tracking-tight text-muted-foreground"
        staggerDelay={0.12}
        duration={0.9}
        delay={0.55}
      >
        itself.
      </MaskedReveal>
    </div>
  );
}
Text Reveal Pattern

Blur

Default

Elastic

Fire

Masked Reveal

Neon Glow

Rainbow

Rotate

Scale

Slide Variants

Stagger

Typewriter

Wave

We use cookies
