Text Reveal Effects Demo

import {
  TextReveal,
  type TextRevealEffect,
} from "@/components/mizzle/text/text-reveal"

const EFFECTS: {
  effect: TextRevealEffect
  by: "chars" | "words" | "lines"
  stagger: number
}[] = [
  { effect: "mask", by: "lines", stagger: 0.12 },
  { effect: "blur", by: "chars", stagger: 0.015 },
  { effect: "fade", by: "words", stagger: 0.05 },
]

const capitalize = (word: string) =>
  word.charAt(0).toUpperCase() + word.slice(1)

export default function TextRevealEffectsDemo() {
  return (
    <div className="flex max-w-[34ch] flex-col gap-6 text-[16px]/6 font-medium tracking-[-0.01em] text-foreground">
      {EFFECTS.map(({ effect, by, stagger }, i) => (
        <TextReveal
          key={effect}
          effect={effect}
          by={by}
          inView={false}
          delay={i * 0.6}
          stagger={stagger}
        >
          {`${capitalize(effect)} by ${by}: the same stagger, a different arrival.`}
        </TextReveal>
      ))}
    </div>
  )
}