Text Animate

"use client";

import { useEffect, useState } from "react";

import { TextAnimate } from "@/lab/magicui/ui/text-animate";

export default function TextAnimateDemo() {
  // The original animates once on view; remount every few seconds so the card replays.
  const [run, setRun] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setRun((r) => r + 1), 4000);
    return () => clearInterval(id);
  }, []);
  return (
    <div key={run} className="@container relative flex h-full w-full flex-col items-center justify-center gap-3 text-neutral-950">
      <TextAnimate animation="blurInUp" by="character" once className="text-[clamp(1.5rem,5cqw,2.25rem)] font-semibold">
        Blur in by character
      </TextAnimate>
      <TextAnimate animation="slideLeft" by="word" once delay={0.6} className="text-sm text-neutral-500">
        Slide left by word
      </TextAnimate>
    </div>
  );
}