"use client";

import { useEffect } from "react";
import { animate } from "animejs";

type Props = {
  word: string;
};

export const TextRotateBounce = ({ word }: Props) => {
  useEffect(() => {
    const animation = animate(".text-anime span", {
      y: [
        { to: "-2.75rem", ease: "outExpo", duration: 600 },
        { to: 0, ease: "outBounce", duration: 800, delay: 100 },
      ],
      rotate: {
        from: "-1turn",
        delay: 0,
      },
      delay: (_, i) => i * 20,
      ease: "inOutCirc",
      loopDelay: 1000,
      loop: true,
    });

    return () => {
      animation.revert();
    };
  }, []);

  return (
    <div className="grid relative">
      <div className="text-anime tracking-wide [grid-area:1/1]">
        {word.split("").map((char, index) => {
          if (char === " ") {
            return (
              <span key={index} className="text-4xl inline-block">
                &nbsp;
              </span>
            );
          }

          return (
            <span key={index} className="text-4xl inline-block">
              {char}
            </span>
          );
        })}
      </div>
      <div className="tracking-wide [grid-area:1/1]">
        {word.split("").map((char, index) => {
          if (char === " ") {
            return (
              <span key={index} className="text-4xl inline-block opacity-40">
                &nbsp;
              </span>
            );
          }

          return (
            <span key={index} className="text-4xl inline-block opacity-40">
              {char}
            </span>
          );
        })}
      </div>
    </div>
  );
};
Text Bounce

Text Rotate Bounce

Installation

Text Bounce (CSS)

Installation

Text Rotate Bounce

Installation

Text Bounce (CSS)

Installation
