music and animation system

src/app/_components/Animated/AnimateIn.tsx

@@ -0,0 +1,30 @@
+import { useGSAP } from "@gsap/react";
+import { useRef, type ReactNode } from "react";
+import { useGsapContext } from "~/app/_providers/GsapProvicer";
+import { SplitText } from "gsap/SplitText";
+import gsap from 'gsap'
+const AnimateTextIn = ({children,animation="type"}:{children:ReactNode,animation?:"type"|"slide",index?:gsap.Position}) => {
+  const el = useRef<HTMLDivElement>(null)
+  const gsapContext = useGsapContext();
+  useGSAP(() => {
+    const tl = gsap.timeline();
+    const chars = new SplitText(el.current,{type:'chars'})
+    tl.to(el.current,{opacity:100, duration:0})
+    switch(animation) {
+      case "slide":
+        tl.from(chars.chars,{opacity:0, x:-10, duration: 0.2, stagger: {each: 0.08}, ease:'bounce.inOut', scrollTrigger: el.current })
+        break
+      case "type":
+        tl.from(chars.chars,{opacity:0, duration: 0.01, stagger: {each: 0.04}, ease: 'bounce.inOut', scrollTrigger: el.current })
+        break
+    }
+    gsapContext?.addAnimation(tl)
+  },{scope:el})
+  return (
+    <div ref={el} className="opacity-0">
+      {children}
+    </div>
+ )
+}
+
+export default AnimateTextIn;

src/app/_components/Animated/AnimatedBackGroundContainer.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import React, { useRef, useEffect, useCallback, useState } from "react";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useTheme } from "next-themes";
+
+/* ─────────────────────────────────────────────
+ *  Config — grayscale palettes
+ * ───────────────────────────────────────────── */
+const PALETTES = {
+  dark: {
+    base: "#0a0a0a",
+    particles: [
+      "rgba(255,255,255,0.70)",
+      "rgba(255,255,255,0.45)",
+      "rgba(180,180,180,0.50)",
+      "rgba(200,200,200,0.35)",
+      "rgba(255,255,255,0.22)",
+    ],
+  },
+  light: {
+    base: "#f5f5f5",
+    particles: [
+      "rgba(0,0,0,0.55)",
+      "rgba(0,0,0,0.35)",
+      "rgba(60,60,60,0.40)",
+      "rgba(80,80,80,0.25)",
+      "rgba(0,0,0,0.18)",
+    ],
+  },
+} as const;
+
+/* ─────────────────────────────────────────────
+ *  Helpers
+ * ───────────────────────────────────────────── */
+const isMobileDevice = (): boolean => {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(pointer: coarse)").matches || window.innerWidth < 768;
+};
+
+const rand = (min: number, max: number) => Math.random() * (max - min) + min;
+
+/* ─────────────────────────────────────────────
+ *  Particle
+ * ───────────────────────────────────────────── */
+interface Particle {
+  angle: number;
+  radius: number;
+  speed: number;
+  size: number;
+  colorIndex: number;
+  wobbleAmp: number;
+  wobbleSpeed: number;
+  wobblePhase: number;
+}
+
+const spawnParticle = (): Particle => ({
+  angle: rand(0, Math.PI * 2),
+  radius: rand(30, 240),
+  speed: rand(0.003, 0.002) * (Math.random() > 0.5 ? 1 : -1),
+  size: rand(1.2, 4),
+  colorIndex: Math.floor(rand(0, 5)),
+  wobbleAmp: rand(6, 30),
+  wobbleSpeed: rand(0.008, 0.035),
+  wobblePhase: rand(0, Math.PI * 2),
+});
+
+/* ─────────────────────────────────────────────
+ *  Component
+ * ───────────────────────────────────────────── */
+interface AnimatedBackgroundContainerProps {
+  children: React.ReactNode;
+  className?: string;
+  /** Number of orbiting particles. Default 60 */
+  particleCount?: number;
+  /** Max orbit radius in px — controls how far particles spread from the cursor. Default 240 */
+  orbitRadius?: number;
+  /** How quickly particles catch up to cursor (0–1). Default 0.06 */
+  followSpeed?: number;
+  /** Speed multiplier for mobile random anchor drift. Default 1 */
+  mobileSpeed?: number;
+}
+
+export default function AnimatedBackgroundContainer({
+  children,
+  className = "",
+  particleCount = 60,
+  orbitRadius = 240,
+  followSpeed = 0.06,
+  mobileSpeed = 1,
+}: AnimatedBackgroundContainerProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const mousePos = useRef({ x: 0, y: 0 });
+  const smoothMouse = useRef({ x: 0, y: 0 });
+  const mobileAnchor = useRef({ x: 0, y: 0 });
+  const mobileTarget = useRef({ x: 0, y: 0 });
+  const isMobile = useRef(false);
+  const particles = useRef<Particle[]>([]);
+  const frame = useRef(0);
+  const [mounted, setMounted] = useState(false);
+
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === "dark";
+  const palette = isDark ? PALETTES.dark : PALETTES.light;
+
+  /* Spawn particles */
+  useEffect(() => {
+    const minR = Math.max(10, orbitRadius * 0.12);
+    particles.current = Array.from({ length: particleCount }, () => ({
+      ...spawnParticle(),
+      radius: rand(minR, orbitRadius),
+      wobbleAmp: rand(orbitRadius * 0.025, orbitRadius * 0.12),
+    }));
+  }, [particleCount, orbitRadius]);
+
+  /* Detect mobile & seed positions */
+  useEffect(() => {
+    setMounted(true);
+    isMobile.current = isMobileDevice();
+    if (containerRef.current) {
+      const cx = containerRef.current.clientWidth / 2;
+      const cy = containerRef.current.clientHeight / 2;
+      mousePos.current = { x: cx, y: cy };
+      smoothMouse.current = { x: cx, y: cy };
+      mobileAnchor.current = { x: cx, y: cy };
+      mobileTarget.current = {
+        x: rand(cx * 0.4, cx * 1.6),
+        y: rand(cy * 0.4, cy * 1.6),
+      };
+    }
+  }, []);
+
+  /* Resize canvas to match container */
+  useEffect(() => {
+    const resize = () => {
+      const canvas = canvasRef.current;
+      const container = containerRef.current;
+      if (!canvas || !container) return;
+      const dpr = window.devicePixelRatio || 1;
+      const w = container.clientWidth;
+      const h = container.clientHeight;
+      canvas.width = w * dpr;
+      canvas.height = h * dpr;
+      canvas.style.width = `${w}px`;
+      canvas.style.height = `${h}px`;
+      const ctx = canvas.getContext("2d");
+      if (ctx) ctx.scale(dpr, dpr);
+    };
+    resize();
+    window.addEventListener("resize", resize);
+    return () => window.removeEventListener("resize", resize);
+  }, []);
+
+  /* Mouse tracking (desktop only) */
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (!containerRef.current || isMobile.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    mousePos.current = {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    };
+  }, []);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.addEventListener("mousemove", handleMouseMove, { passive: true });
+    return () => el.removeEventListener("mousemove", handleMouseMove);
+  }, [handleMouseMove]);
+
+  /* ── GSAP ticker — draw loop ── */
+  useGSAP(
+    () => {
+      if (!mounted) return;
+      const canvas = canvasRef.current;
+      const container = containerRef.current;
+      if (!canvas || !container) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+
+      const tick = () => {
+        const w = container.clientWidth;
+        const h = container.clientHeight;
+        frame.current++;
+
+        /* Anchor: smooth-follow cursor or drift on mobile */
+        if (isMobile.current) {
+          mobileAnchor.current.x +=
+            (mobileTarget.current.x - mobileAnchor.current.x) * 0.008 * mobileSpeed;
+          mobileAnchor.current.y +=
+            (mobileTarget.current.y - mobileAnchor.current.y) * 0.008 * mobileSpeed;
+
+          const dx = mobileTarget.current.x - mobileAnchor.current.x;
+          const dy = mobileTarget.current.y - mobileAnchor.current.y;
+          if (Math.sqrt(dx * dx + dy * dy) < 30) {
+            mobileTarget.current = {
+              x: rand(w * 0.15, w * 0.85),
+              y: rand(h * 0.15, h * 0.85),
+            };
+          }
+          smoothMouse.current.x = mobileAnchor.current.x;
+          smoothMouse.current.y = mobileAnchor.current.y;
+        } else {
+          smoothMouse.current.x +=
+            (mousePos.current.x - smoothMouse.current.x) * followSpeed;
+          smoothMouse.current.y +=
+            (mousePos.current.y - smoothMouse.current.y) * followSpeed;
+        }
+
+        const cx = smoothMouse.current.x;
+        const cy = smoothMouse.current.y;
+
+        /* Clear frame */
+        ctx.clearRect(0, 0, w, h);
+
+        /* Draw each particle */
+        particles.current.forEach((p) => {
+          p.angle += p.speed;
+
+          const wobble =
+            Math.sin(frame.current * p.wobbleSpeed + p.wobblePhase) * p.wobbleAmp;
+          const r = p.radius + wobble;
+
+          const x = cx + Math.cos(p.angle) * r;
+          const y = cy + Math.sin(p.angle) * r;
+
+          /* Soft fade near viewport edges */
+          const edgeFade = Math.max(
+            0,
+            Math.min(x / 80, (w - x) / 80, y / 80, (h - y) / 80, 1),
+          );
+          if (edgeFade <= 0) return;
+
+          ctx.globalAlpha = edgeFade;
+          ctx.fillStyle = palette.particles[p.colorIndex];
+          ctx.beginPath();
+          ctx.arc(x, y, p.size, 0, Math.PI * 2);
+          ctx.fill();
+        });
+
+        ctx.globalAlpha = 1;
+      };
+
+      gsap.ticker.add(tick);
+      return () => {
+        gsap.ticker.remove(tick);
+      };
+    },
+    {
+      scope: containerRef,
+      dependencies: [mounted, isDark, followSpeed, mobileSpeed, orbitRadius, palette],
+    },
+  );
+
+  /* ── Render ── */
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      style={{
+        position: "relative",
+        minHeight: "100vh",
+        width: "100%",
+        overflow: "hidden",
+        backgroundColor: palette.base,
+        transition: "background-color 0.6s ease",
+      }}
+    >
+      <canvas
+        ref={canvasRef}
+        aria-hidden
+        style={{
+          position: "absolute",
+          inset: 0,
+          zIndex: 0,
+          pointerEvents: "none",
+        }}
+      />
+
+      {/* Grain texture */}
+      <div
+        aria-hidden
+        style={{
+          position: "absolute",
+          inset: 0,
+          zIndex: 1,
+          opacity: isDark ? 0.05 : 0.03,
+          pointerEvents: "none",
+          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
+          backgroundRepeat: "repeat",
+          backgroundSize: "180px 180px",
+        }}
+      />
+
+      <div style={{ position: "relative", zIndex: 2 }}>{children}</div>
+    </div>
+  );
+}

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;

src/app/_components/TopNav.tsx

@@ -19,6 +19,9 @@ export default function TopNav() {
 					<Button asChild className="flex h-10 lg:h-full w-full lg:w-20" variant="outline">
 						<Link href={"/projects"}> Projects </Link>
 					</Button>
+					<Button asChild className="flex h-10 lg:h-full w-full lg:w-20" variant="outline">
+						<Link href={"/music"}> Music </Link>
+					</Button>
 				</div>
 				<div className="flex flex-col-reverse flex-wrap lg:h-full w-20 lg:w-fit lg:flex-row lg:ml-auto">
 					<AdminWrap>