music and animation system

src/app/_components/Animated/AnimatedPageTitle.tsx

@@ -0,0 +1,25 @@
+import { useGSAP } from "@gsap/react"; import { useRef } from "react";
+import { useGsapContext } from "~/app/_providers/GsapProvicer";
+import { SplitText } from "gsap/SplitText";
+import gsap from 'gsap'
+const AnimatedPageTitle = (
+  { text }: { text: string }
+) => {
+  const el = useRef<HTMLHeadingElement>(null)
+  const gsapContext = useGsapContext();
+  useGSAP(() => {
+    const tl = gsap.timeline();
+    tl.addLabel("title")
+    const split = new SplitText(el.current, { type: "chars" })
+    tl.to(el.current, { opacity: 100 })
+    tl.from(split.chars, {
+      stagger: 0.05, rotate: -90, opacity: 0, x: -10
+    }, '>')
+    gsapContext?.addAnimation(tl)
+  }, { scope: el })
+  return (
+    <h1 className="text-4xl opacity-0 font-bold text-balance w-full" ref={el}> {text} </h1>
+  )
+}
+
+export default AnimatedPageTitle;