Text Reveal

import { TextReveal } from "@/components/kanso/text-reveal"

export default function TextRevealDemo() {
  return (
    <TextReveal 
      text="Simplicity, Engineered." 
      className="text-2xl font-semibold text-zinc-900 dark:text-zinc-100" 
    />
  )
}

"use client"

import * as React from "react"
import { motion, useInView } from "framer-motion"
import { cn } from "@/lib/utils"

interface TextRevealProps extends React.HTMLAttributes<HTMLDivElement> {
  /** The text string to reveal */
  text: string
  /** Delay before animation starts in seconds (default: 0) */
  delay?: number
  /** Delay between each character in seconds (default: 0.03) */
  staggerDelay?: number
}

/**
 * TextReveal — Text that reveals character by character when scrolled into view.
 *
 * Uses Framer Motion's `useInView` hook to trigger a staggered opacity animation
 * on each character. Creates an elegant typewriter-like reveal effect.
 *
 * @example
 * ```tsx
 * import { TextReveal } from "@/components/kanso/text-reveal"
 *
 * export default function Demo() {
 *   return (
 *     <TextReveal
 *       text="Simplicity, Engineered."
 *       className="text-4xl font-semibold tracking-tight"
 *     />
 *   )
 * }
 * ```
 */
function TextReveal({
  text,
  className,
  delay = 0,
  staggerDelay = 0.03,
  ...props
}: TextRevealProps) {
  const ref = React.useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-10% 0px" })

  const words = text.split(" ")

  return (
    <div ref={ref} className={cn("flex flex-wrap", className)} {...props}>
      {words.map((word, wordIndex) => (
        <span key={wordIndex} className="inline-block mr-[0.25em]">
          {word.split("").map((char, charIndex) => {
            // Calculate global index for stagger
            const globalIndex =
              words
                .slice(0, wordIndex)
                .reduce((acc, w) => acc + w.length, 0) + charIndex

            return (
              <motion.span
                key={`${wordIndex}-${charIndex}`}
                className="inline-block"
                initial={{ opacity: 0, y: 8, filter: "blur(4px)" }}
                animate={
                  isInView
                    ? { opacity: 1, y: 0, filter: "blur(0px)" }
                    : { opacity: 0, y: 8, filter: "blur(4px)" }
                }
                transition={{
                  duration: 0.3,
                  delay: delay + globalIndex * staggerDelay,
                  ease: [0.25, 0.1, 0.25, 1],
                }}
              >
                {char}
              </motion.span>
            )
          })}
        </span>
      ))}
    </div>
  )
}

export { TextReveal }
export type { TextRevealProps }