Text Flipping Board

"use client";
import React, { useEffect, useState } from "react";
import { TextFlippingBoard } from "@/lab/aceternity/ui/text-flipping-board";

const MESSAGES: string[] = [
  "STAY HUNGRY \nSTAY IN BED \n- STEVE JOBS",
  "What did you get done this week?",
  "I burned $20 \nfor this shit.",
  "DONT WORRY \nBE HAPPY FFS.",
  "LADIES AND GENTLEMEN \nWELCOME TO F#!@# C!@$",
];

export default function TextFlippingBoardDemo() {
  const [msgIdx, setMsgIdx] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setMsgIdx((i) => (i + 1) % MESSAGES.length), 6000);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="@container-[size] relative flex h-full w-full items-center justify-center p-[3cqw]">
      <TextFlippingBoard text={MESSAGES[msgIdx]} className="max-w-[min(48rem,94cqw,135cqh)]" />
    </div>
  );
}