Typewriter Effect

"use client";
import { useEffect, useState } from "react";
import { TypewriterEffect } from "@/lab/aceternity/ui/typewriter-effect";

const words = [
  { text: "Build" },
  { text: "awesome" },
  { text: "apps" },
  { text: "with" },
  { text: "Aceternity.", className: "text-blue-500 dark:text-blue-500" },
];

export default function TypewriterEffectDemo() {
  // Re-type the line every few seconds so the stage keeps moving.
  const [run, setRun] = useState(0);
  useEffect(() => {
    const id = window.setInterval(() => setRun((r) => r + 1), 7000);
    return () => window.clearInterval(id);
  }, []);

  return (
    <div className="relative flex h-full w-full flex-col items-center justify-center px-4 [container-type:size]">
      <p className="mb-[5cqh] text-[clamp(0.7rem,2.2cqw,1rem)] text-neutral-600 dark:text-neutral-200">
        The road to freedom starts from here
      </p>
      <TypewriterEffect key={run} words={words} />
      <div className="mt-[6cqh] flex flex-row gap-[2cqw]">
        <button className="h-[clamp(1.75rem,6cqw,2.5rem)] w-[clamp(5rem,20cqw,10rem)] rounded-xl border border-transparent bg-black text-[clamp(0.65rem,1.8cqw,0.875rem)] text-white dark:border-white">
          Join now
        </button>
        <button className="h-[clamp(1.75rem,6cqw,2.5rem)] w-[clamp(5rem,20cqw,10rem)] rounded-xl border border-black bg-white text-[clamp(0.65rem,1.8cqw,0.875rem)] text-black">
          Signup
        </button>
      </div>
    </div>
  );
}