background playback

bun.lock

@@ -93,6 +93,7 @@
         "type-fest": "^5.7.0",
         "uploadthing": "^7.7.4",
         "vaul": "^1.1.2",
+        "wavesurfer.js": "^7.12.8",
         "zod": "^4.4.3",
       },
       "devDependencies": {
@@ -2434,6 +2435,8 @@
 
     "walker": ["walker@1.0.8", "", { "dependencies": { "makeerror": "1.0.12" } }, "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ=="],
 
+    "wavesurfer.js": ["wavesurfer.js@7.12.8", "", {}, "sha512-G3nxzcC4X+ZWrLtcIV17kCWHVq3ysJCS4dS0YkGKILrQ2esAb8cScw965zKNKYxUvpiZsPK93KLWgWTYdIBQiw=="],
+
     "web-namespaces": ["web-namespaces@2.0.1", "", {}, "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ=="],
 
     "web-streams-polyfill": ["web-streams-polyfill@3.3.3", "", {}, "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw=="],

package.json

@@ -108,6 +108,7 @@
     "type-fest": "^5.7.0",
     "uploadthing": "^7.7.4",
     "vaul": "^1.1.2",
+    "wavesurfer.js": "^7.12.8",
     "zod": "^4.4.3"
   },
   "devDependencies": {

src/app/_components/Animated/AnimateIn.tsx

@@ -1,62 +1,43 @@
-import { useGSAP } from "@gsap/react";
 import { useRef, type HTMLAttributes, type ReactNode } from "react";
-import { useGsapContext } from "~/app/_providers/GsapProvicer";
 import { SplitText } from "gsap/SplitText";
 import gsap from 'gsap'
 import { cn } from "~/lib/utils";
+import { useReveal } from "./useReveal";
+
 const AnimateTextIn = ({
   children,
   animation = "type",
   position = 0,
-  tlId = undefined,
   speed = 1,
   scrollOnly = false,
+  once = false,
   className
 }: {
   children: ReactNode,
   animation?: "type" | "slide",
   position?: gsap.Position,
-  tlId?: string,
   scrollOnly?: boolean,
+  once?: boolean,
   speed?: number,
   className?: HTMLAttributes<HTMLDivElement>['className']
 }) => {
   const el = useRef<HTMLDivElement>(null)
-  const gsapContext = useGsapContext();
-  useGSAP(() => {
-    const rect = el.current?.getBoundingClientRect()
-    const scroller = gsapContext?.getScroller()
-    console.log(scroller)
-    let viewportTop = 0
-    let viewportBottom = window.innerHeight
-    if (scroller && scroller instanceof Element) {
-      const scrollerRect = scroller.getBoundingClientRect()
-      viewportTop = scrollerRect.top
-      viewportBottom = scrollerRect.top + scrollerRect.height
-    }
-    const isInView = rect && rect.bottom > viewportTop && rect.top < viewportBottom
-    console.log(isInView)
-    const chars = new SplitText(el.current, { type: 'chars' })
-    gsapContext?.addAnimation(gsap.to(el.current, { opacity: 100, duration: 0 }), 0, tlId)
-    const fromVars = animation === "slide"
-      ? { opacity: 0, x: -10, duration: 0.2 * speed, stagger: { each: 0.08 * speed }, ease: 'bounce.inOut', onComplete: () => chars.revert() }
-      : { opacity: 0, duration: 0.01 * speed, stagger: { each: 0.04 * speed }, ease: 'bounce.inOut', onComplete: () => chars.revert() }
-    if (isInView && !scrollOnly) {
-      gsapContext?.addAnimation(gsap.from(chars.chars, fromVars), position, tlId)
-    } else {
-      gsap.from(chars.chars,
-        {
-          ...fromVars,
-          scrollTrigger: {
-            trigger: el.current,
-            start: 'top bottom',
-            end: 'bottom top',
-            toggleActions: "play reverse play reverse",
-            scroller
-          }
-        })
-    }
-  }, { dependencies: [] })
+  useReveal(el, {
+    position,
+    scrollOnly,
+    once,
+    debugId: `text-${position}`,
+    makeReveal: (node) => {
+      // The wrapper starts at opacity 0 (so there's no flash of unsplit text);
+      // reveal the wrapper and let the per-character tween do the animation.
+      gsap.set(node, { opacity: 1 })
+      const split = new SplitText(node, { type: 'chars' })
+      const fromVars = animation === "slide"
+        ? { opacity: 0, x: -10, duration: 0.2 * speed, stagger: { each: 0.08 * speed }, ease: 'bounce.inOut' }
+        : { opacity: 0, duration: 0.01 * speed, stagger: { each: 0.04 * speed }, ease: 'bounce.inOut' }
+      return gsap.from(split.chars, { ...fromVars, paused: true })
+    },
+  })
   return (
     <div ref={el} className={cn(className, "opacity-0")}>
       {children}

src/app/_components/Animated/AnimatePopUp.tsx

@@ -6,16 +6,20 @@ const AnimatePopUp = ({
   position,
   className,
   duration=1,
-  ease='elastic'
+  ease='elastic',
+  scrollOnly=false,
+  once=false,
 }:{
     children:ReactNode
     position:gsap.Position,
     className?:HTMLAttributes<HTMLDivElement>['className']
     duration?:number,
-    ease?:gsap.EaseString|gsap.EaseFunction
+    ease?:gsap.EaseString|gsap.EaseFunction,
+    scrollOnly?:boolean,
+    once?:boolean,
   }) => {
   return (
-    <AnimatedDiv children={children} position={position} className={cn(className,'h-0 translate-y-[50] overflow-hidden')} height='auto' y={0} overflow='' ease={ease} duration={duration} />
+    <AnimatedDiv children={children} position={position} scrollOnly={scrollOnly} once={once} className={cn(className,'h-0 translate-y-[50] overflow-hidden')} height='auto' y={0} overflow='' ease={ease} duration={duration} />
   )
 }
 

src/app/_components/Animated/AnimatedDiv.tsx

@@ -1,36 +1,39 @@
 import gsap from "gsap";
-import { type HTMLAttributes,
-type ReactNode, useLayoutEffect, useRef } from "react";
-import { useGsapContext } from "~/app/_providers/GsapProvicer";
+import { type HTMLAttributes, type ReactNode, useRef } from "react";
+import { useReveal } from "./useReveal";
+
 const AnimatedDiv = (
   {
     children,
     position,
     className,
-    animationMode='to',
+    animationMode = 'to',
+    scrollOnly = false,
+    once = false,
+    debugId,
     ...tweenVars
   }:
   gsap.TweenVars & {
-    children:ReactNode,
-    position:gsap.Position,
-    animationMode?: 'from'|'to',
-    className?:HTMLAttributes<HTMLDivElement>['className']
+    children: ReactNode,
+    position: gsap.Position,
+    animationMode?: 'from' | 'to',
+    scrollOnly?: boolean,
+    once?: boolean,
+    debugId?: string,
+    className?: HTMLAttributes<HTMLDivElement>['className']
   }
 ) => {
-  const div = useRef<HTMLDivElement>(null);
-  const gsapContext = useGsapContext()
-  useLayoutEffect(() => {
-    let tween:gsap.core.Tween;
-    switch(animationMode) {
-      case 'from':
-        tween = gsap.from(div.current,tweenVars);
-        break;
-      case 'to':
-        tween = gsap.to(div.current,tweenVars);
-        break;
-    }
-    gsapContext?.addAnimation(tween,position)
-  },[])
+  const div = useRef<HTMLDivElement>(null)
+  useReveal(div, {
+    position,
+    scrollOnly,
+    once,
+    debugId,
+    makeReveal: (el) =>
+      animationMode === 'from'
+        ? gsap.from(el, { ...tweenVars, paused: true })
+        : gsap.to(el, { ...tweenVars, paused: true }),
+  })
   return (
     <div ref={div} className={className}>
       {children}

src/app/_components/Animated/useReveal.ts

@@ -0,0 +1,102 @@
+'use client'
+
+import { useGSAP } from "@gsap/react"
+import { ScrollTrigger } from "gsap/all"
+import type { RefObject } from "react"
+import { GSAP_DEBUG, useGsapContext } from "~/app/_providers/GsapProvicer"
+
+export type UseRevealOptions = {
+  position: gsap.Position
+  /** Skip the orchestrated entrance and let ScrollTrigger drive from the start. */
+  scrollOnly?: boolean
+  /**
+   * Reveal once and keep it: after the element animates in (entrance or first
+   * scroll-in) it never reverses on leave. Default false = animate out at the
+   * top and back in on scroll-up.
+   */
+  once?: boolean
+  debugId?: string
+  /**
+   * Build the hidden -> shown animation for `el`. It must be a single,
+   * *independent* animation (not added to any timeline): `play()` reveals,
+   * `reverse()` hides. The hook pauses it, schedules its entrance through the
+   * shared timeline, and lets a ScrollTrigger drive the very same animation on
+   * scroll — so the two modes never fight over the element.
+   */
+  makeReveal: (el: HTMLElement) => gsap.core.Tween | gsap.core.Timeline
+}
+
+/**
+ * Shared reveal behavior for cards, text and pop-ups: an element in view at
+ * load plays an orchestrated timeline entrance, then hands the *same* tween to
+ * a ScrollTrigger that animates it out at the top and back in on scroll-up. An
+ * element off-screen at load is ScrollTrigger-driven from the start.
+ */
+export function useReveal(
+  ref: RefObject<HTMLElement | null>,
+  { position, scrollOnly = false, once = false, debugId, makeReveal }: UseRevealOptions,
+) {
+  const ctx = useGsapContext()
+  useGSAP(() => {
+    const el = ref.current
+    if (!el || !ctx) return
+
+    const scroller = ctx.getScroller()
+    const scrollerEl = scroller instanceof Element ? scroller : undefined
+
+    const rect = el.getBoundingClientRect()
+    let top = 0
+    let bottom = window.innerHeight
+    if (scrollerEl) {
+      const r = scrollerEl.getBoundingClientRect()
+      top = r.top
+      bottom = r.top + r.height
+    }
+    const isInView = rect.bottom > top && rect.top < bottom
+
+    const reveal = makeReveal(el)
+    // A reveal that animates height (pop-ups) shifts every trigger below it.
+    // Re-measure as it animates so positions track the real layout instead of
+    // only correcting at the very end. requestRefresh is throttled + deferred to
+    // the next frame, so this won't re-enter a ScrollTrigger callback.
+    reveal.eventCallback("onUpdate", () => ctx.requestRefresh())
+    reveal.pause()
+
+    const baseTrigger = {
+      trigger: el,
+      start: "top bottom",
+      end: "bottom top",
+      scroller: scrollerEl,
+      markers: GSAP_DEBUG,
+      id: GSAP_DEBUG ? debugId : undefined,
+    }
+    // Full behavior: in at the bottom, out at the top, and back on scroll-up.
+    const addReplayTrigger = () =>
+      ScrollTrigger.create({
+        ...baseTrigger,
+        onEnter: () => reveal.play(),
+        onEnterBack: () => reveal.play(),
+        onLeave: () => reveal.reverse(),
+        onLeaveBack: () => reveal.reverse(),
+      })
+
+    if (isInView && !scrollOnly) {
+      // The shared timeline only decides *when* the entrance starts; the reveal
+      // plays independently so the ScrollTrigger can take it over afterwards.
+      ctx.schedule(() => reveal.play(), position)
+      // `once` elements keep their revealed state — no scroll trigger at all.
+      if (!once) ctx.onReady(addReplayTrigger)
+    } else if (isInView) {
+      // scrollOnly + already on screen: no enter crossing will fire, so reveal
+      // now. Keep a trigger for scroll-out unless this is a `once` element.
+      reveal.play()
+      if (!once) addReplayTrigger()
+    } else if (once) {
+      // Off-screen: reveal when first reached, then self-destruct so it never
+      // reverses.
+      ScrollTrigger.create({ ...baseTrigger, once: true, onEnter: () => reveal.play() })
+    } else {
+      addReplayTrigger()
+    }
+  }, { dependencies: [] })
+}

src/app/_providers/GsapProvicer.tsx

@@ -9,11 +9,32 @@ gsap.registerPlugin(useGSAP)
 gsap.registerPlugin(ScrollTrigger)
 gsap.registerPlugin(SplitText)
 gsap.registerPlugin(GSDevTools)
+
+// iOS Safari shows/hides its address bar at the scroll extremes, which resizes
+// the viewport and makes ScrollTrigger refresh + fire spurious onLeave/onEnter
+// toggles (text animating out at the bottom and not coming back). Ignoring those
+// mobile-toolbar resizes keeps the real enter/leave reverse behavior intact.
+ScrollTrigger.config({ ignoreMobileResize: true })
+
+// Flip to true to draw ScrollTrigger start/end markers on every animated
+// element and mount the GSDevTools timeline scrubber. Handy for seeing exactly
+// where each card's enter/exit lines sit relative to the viewport.
+export const GSAP_DEBUG = false
 const GsapContext = createContext<{
+  // Add a real animation (with its own duration) to the entrance timeline.
   addAnimation: (
     animation: gsap.core.TimelineChild,
     position: gsap.Position
   ) => void,
+  // Schedule a zero-duration callback at `position` — used to *start* an
+  // independent reveal tween so the timeline only orchestrates timing.
+  schedule: (fn: () => void, position: gsap.Position) => void,
+  // Run `cb` once the entrance is done (timeline complete or first user scroll).
+  onReady: (cb: () => void) => void,
+  // Re-measure all ScrollTriggers (throttled to once per frame). Call it
+  // whenever an animation changes content height so trigger positions stay
+  // aligned with the real layout.
+  requestRefresh: () => void,
   resetTimeline: () => void,
   resumeTimeline: () => void,
   getScroller: () => Element | Window | null
@@ -70,29 +91,112 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
     // }
     return scrollerRef.current
   }, [])
+  const devToolsCreated = useRef(false)
   useGSAP(() => {
     if (!tl.current) {
       tl.current = gsap.timeline({ paused: true })
     }
+    if (GSAP_DEBUG && tl.current && !devToolsCreated.current) {
+      devToolsCreated.current = true
+      GSDevTools.create({ animation: tl.current })
+    }
     return () => { console.log("gsap cleanup") }
   })
 
+  // Handoff: fire registered callbacks once, when the entrance finishes.
+  const readyFired = useRef(false)
+  const readyCbs = useRef<Array<() => void>>([])
+  const fireReady = useCallback(() => {
+    if (readyFired.current) return
+    readyFired.current = true
+    readyCbs.current.forEach((cb) => cb())
+    readyCbs.current = []
+  },[])
+  const onReady = useCallback((cb: () => void) => {
+    if (readyFired.current) cb()
+    else readyCbs.current.push(cb)
+  },[])
+
   const addAnimation = useCallback((animation: gsap.core.TimelineChild, position: gsap.Position) => {
-    console.log("add animation to:", position, tl.current !== undefined)
+    // Content can mount in waves (e.g. nested queries resolving after the
+    // entrance already played). Parking a tween in a finished, paused timeline
+    // would freeze it at its from-state, so once the entrance is done let the
+    // (live) tween play on its own instead.
+    if (readyFired.current) return
     tl.current?.add(animation, position);
   },[])
+  const schedule = useCallback((fn: () => void, position: gsap.Position) => {
+    // Same late-arrival case: a callback added past the playhead never fires, so
+    // run the reveal immediately once the entrance has finished.
+    if (readyFired.current) { fn(); return }
+    tl.current?.add(fn, position)
+  },[])
+
+  // Throttle ScrollTrigger.refresh() to once per frame so the ResizeObserver
+  // can fire freely while content height animates.
+  const refreshQueued = useRef(false)
+  const scheduleRefresh = useCallback(() => {
+    if (refreshQueued.current) return
+    refreshQueued.current = true
+    requestAnimationFrame(() => {
+      refreshQueued.current = false
+      ScrollTrigger.refresh()
+    })
+  },[])
+
+  const scrollCleanup = useRef<(() => void) | null>(null)
+  const resizeObserver = useRef<ResizeObserver | null>(null)
+
   const resetTimeline = useCallback(() => {
     tl.current?.kill()
     tl.current?.revert()
     ScrollTrigger.getAll().forEach(st => st.kill())
+    resizeObserver.current?.disconnect()
+    scrollCleanup.current?.()
+    scrollCleanup.current = null
+    readyFired.current = false
+    readyCbs.current = []
     tl.current = gsap.timeline({paused:true})
   },[])
+
   const resumeTimeline = useCallback(() => {
-    console.log("resuming timeline:",tl.current)
-    tl.current?.resume()
-  },[])
+    const t = tl.current
+    if (!t) return
+    // When the orchestrated entrance finishes, hand off to scroll control and
+    // realign triggers against the now-settled layout.
+    t.eventCallback("onComplete", () => { fireReady(); ScrollTrigger.refresh() })
+
+    const scroller = getScroller()
+    // If the user scrolls before the entrance finishes, snap it to the end and
+    // switch to scroll control so the timeline and ScrollTriggers never fight
+    // over the same elements.
+    scrollCleanup.current?.()
+    const onFirstScroll = () => { t.progress(1); fireReady() }
+    scroller?.addEventListener("scroll", onFirstScroll, { once: true, passive: true })
+    scrollCleanup.current = () => scroller?.removeEventListener("scroll", onFirstScroll)
+
+    // Continuously realign triggers while content height changes — entrance
+    // growth, scroll-driven collapses, late-loading media.
+    if (scroller instanceof Element) {
+      const target = scroller.firstElementChild ?? scroller
+      resizeObserver.current?.disconnect()
+      resizeObserver.current = new ResizeObserver(scheduleRefresh)
+      resizeObserver.current.observe(target)
+    }
+
+    t.resume()
+  },[getScroller, fireReady, scheduleRefresh])
+
+  // Fonts/markdown/images loading also change content height after the triggers
+  // were created; refresh so start/end stay aligned with the real card sizes.
+  useEffect(() => {
+    const refresh = () => ScrollTrigger.refresh()
+    window.addEventListener("load", refresh)
+    document.fonts?.ready.then(refresh).catch(() => {})
+    return () => window.removeEventListener("load", refresh)
+  }, [])
   return (
-    <GsapContext.Provider value={{ addAnimation, resetTimeline, resumeTimeline, getScroller }}>
+    <GsapContext.Provider value={{ addAnimation, schedule, onReady, requestRefresh: scheduleRefresh, resetTimeline, resumeTimeline, getScroller }}>
       {children}
     </GsapContext.Provider>
   )

src/app/admin/chat/_components/ModelSelector.tsx

@@ -0,0 +1,48 @@
+'use client'
+import { trpc } from '~/app/_trpc/Client'
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '~/components/ui/select'
+
+export default function ModelSelector({ initialValue }: { initialValue: string }) {
+	const utils = trpc.useUtils()
+	const { data: models, isLoading, error } = trpc.chat.listModels.useQuery()
+	const { data: model = initialValue } = trpc.chat.getModel.useQuery(undefined, {
+		initialData: initialValue,
+	})
+
+	const mutation = trpc.chat.updateModel.useMutation({
+		onSuccess: () => utils.chat.getModel.invalidate(),
+	})
+
+	// Ensure the currently-saved model is always selectable, even if the
+	// OpenAI list doesn't include it (e.g. a deprecated model).
+	const options = Array.from(new Set([model, ...(models ?? [])])).filter(Boolean)
+
+	return (
+		<div className="flex flex-col gap-2">
+			<Select value={model} onValueChange={(v) => mutation.mutate({ model: v })}>
+				<SelectTrigger className="w-72">
+					<SelectValue placeholder={isLoading ? 'Loading models…' : 'Select a model'} />
+				</SelectTrigger>
+				<SelectContent>
+					{options.map((id) => (
+						<SelectItem key={id} value={id}>
+							{id}
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+			<div className="flex items-center gap-3 text-sm text-muted-foreground">
+				{mutation.isPending && <span>Saving…</span>}
+				{mutation.isSuccess && !mutation.isPending && <span>Saved</span>}
+				{error && <span className="text-destructive">Failed to load models: {error.message}</span>}
+				{mutation.error && <span className="text-destructive">{mutation.error.message}</span>}
+			</div>
+		</div>
+	)
+}

src/app/admin/chat/page.tsx

@@ -1,18 +1,31 @@
 import { servTrpc } from '~/app/_trpc/ServerClient'
 import SystemPromptForm from './_components/SystemPromptForm'
+import ModelSelector from './_components/ModelSelector'
 
 export default async function SystemPromptPage() {
 	const prompt = await servTrpc.chat.getSystemPrompt()
+	const model = await servTrpc.chat.getModel()
 
 	return (
-		<div className="w-full max-w-2xl p-6 flex flex-col gap-4">
-			<div>
-				<h1 className="text-lg font-semibold">AI System Prompt</h1>
-				<p className="text-sm text-muted-foreground">
-					This prompt is sent to the model on every chat request.
-				</p>
+		<div className="w-full max-w-2xl p-6 flex flex-col gap-8">
+			<div className="flex flex-col gap-4">
+				<div>
+					<h1 className="text-lg font-semibold">AI Model</h1>
+					<p className="text-sm text-muted-foreground">
+						The OpenAI model used to respond to chat requests.
+					</p>
+				</div>
+				<ModelSelector initialValue={model} />
+			</div>
+			<div className="flex flex-col gap-4">
+				<div>
+					<h1 className="text-lg font-semibold">AI System Prompt</h1>
+					<p className="text-sm text-muted-foreground">
+						This prompt is sent to the model on every chat request.
+					</p>
+				</div>
+				<SystemPromptForm initialValue={prompt} />
 			</div>
-			<SystemPromptForm initialValue={prompt} />
 		</div>
 	)
 }

src/app/api/chat/route.ts

@@ -32,6 +32,7 @@ export async function POST(req: Request) {
 	if (!session) return new Response('Session not found', { status: 404 })
 
 	const systemPrompt = await servTrpc.chat.getSystemPrompt() || 'You are an AI recruiter assistant.'
+	const model = await servTrpc.chat.getModel()
 
 	// Save the latest user message
 	const lastMessage = messages[messages.length - 1]
@@ -46,7 +47,7 @@ export async function POST(req: Request) {
 	}
 
 	const result = streamText({
-		model: openai('gpt-5-mini'),
+		model: openai(model),
 		system: systemPrompt,
 		messages: await convertToModelMessages(messages),
 		tools: {

src/app/cv/_components/CvCategory.tsx

@@ -1,24 +1,24 @@
 'use client'
 import { trpc } from "~/app/_trpc/Client"
 import CvEntry from "./CvEntry"
-import type { servTrpc } from "~/app/_trpc/ServerClient"
-import type { inferProcedureOutput } from "@trpc/server"
 import type { RouterOutputs } from "~/server/routers/_app"
 import { cn } from "~/lib/utils"
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
+import { AnimatedCard, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
 import type { ArrayElement } from "type-fest"
 import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp";
 import { ScrollArea } from "~/components/ui/scroll-area";
 type CvCategoryProps = {
   initialData: ArrayElement<RouterOutputs['categoryv2']['listByLayoutPosition']>,
   layout: "row"|"col",
+  position?: number,
   children?: React.ReactElement<Parameters<typeof CvEntry>>
 }
 export default function CvCategory(props:CvCategoryProps)  {
   const category = trpc.categoryv2.getById.useQuery(props.initialData? props.initialData.id : "");
   const entries = trpc.entryv2.byCategoryAndToDateDescending.useQuery(category.data?.id || "")
+  const position = props.position ?? 0
 		return (
-			<Card className={cn(props.layout == "row" ? "w-full" : "","gsapan", "h-screen")}>
+			<AnimatedCard position={position} className={cn(props.layout == "row" ? "w-full" : "", "h-screen")}>
 				<CardHeader>
 					<CardTitle>
 						{category.data?.name}
@@ -28,7 +28,7 @@ export default function CvCategory(props:CvCategoryProps)  {
 					<CardContent className={cn(props.layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col","gap-4","overflow-scroll")}>
 						<ScrollArea>
 						{entries.data?.map((entry,i) => (
-							<AnimatePopUp position={i}key={entry.id}>
+							<AnimatePopUp position={position + 0.4 + i * 0.2} key={entry.id}>
 							<CvEntry className={props.layout == "row" ? "w-full lg:w-fit" : undefined}  initialData={entry}/>
 							</AnimatePopUp>
 						))}
@@ -37,6 +37,6 @@ export default function CvCategory(props:CvCategoryProps)  {
 					:
 					<></>
 				}
-			</Card>
+			</AnimatedCard>
 		)
 }

src/app/cv/page.tsx

@@ -1,62 +1,27 @@
 'use client'
-import { useGSAP } from "@gsap/react";
-import { useGsapContext,useTimeLine } from "../_providers/GsapProvicer";
+import { useTimeLine } from "../_providers/GsapProvicer";
 import { trpc } from "../_trpc/Client";
-import { useRef } from "react";
 import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sidebar";
 import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
 import CvCategory from "./_components/CvCategory";
-import gsap from 'gsap'
 export default function CvPage() {
   const sidebarCategories = trpc.categoryv2.listByLayoutPosition.useQuery("sidebar");
   const col1Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col1");
   const headerCategories = trpc.categoryv2.listByLayoutPosition.useQuery("header");
   const col2Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col2");
-  const gsapContext = useGsapContext()
-  const container = useRef<HTMLDivElement>(null)
-  enum Direction {
-    Left = 1,
-    Up,
-    Right,
-    Down
-  }
-  const nextGsapConf = (direction: Direction) => {
-    switch (direction) {
-      case Direction.Left:
-        return { x: -100, opacity: 0, duration: 0.5 }
-      case Direction.Up:
-        return { y: -100, opacity: 0, duration: 0.5 }
-      case Direction.Right:
-        return { x: 100, opacity: 0, duration: 0.5 }
-      case Direction.Down:
-        return { y: 100, opacity: 0, duration: 0.5 }
-    }
-  }
-  useTimeLine(col2Categories)
-  useGSAP(() => {
-    const items = gsap?.utils.toArray<GSAPTweenTarget>('.gsapan');
-    let dir = Direction.Left;
-    items?.forEach(item => {
-      gsapContext?.addAnimation(gsap.from(item, nextGsapConf(dir)),0)
-      if (dir == Direction.Down) {
-        dir = Direction.Left
-      } else {
-        dir = dir + 1
-      }
-    })
-  }, { scope: container, dependencies: [headerCategories.data, sidebarCategories.data], revertOnUpdate: true })
+  useTimeLine(col2Categories.data)
   return (
     <>
-      <SidebarProvider ref={container}>
+      <SidebarProvider>
         {sidebarCategories.data &&
           <>
             <SidebarTriggerDisappearsOnMobile />
-            <Sidebar className="gsapan ">
+            <Sidebar>
               <SidebarContent className="p-2 lg:pt-[3.2rem]">
-                {sidebarCategories.data?.map((cat) => {
+                {sidebarCategories.data?.map((cat, i) => {
                   if (cat !== undefined) {
                     return (
-                      <CvCategory layout="col" initialData={cat} key={cat.id} />
+                      <CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
                     )
                   }
                 })}
@@ -67,26 +32,20 @@ export default function CvPage() {
         <div className="h-full w-full flex flex-wrap flex-row p-4 pt-8 ">
           <div id="mainwrap" className="flex w-full flex-col gap-4 lg:px-[15vw]">
             <div id="header" className="flex  w-full h-fit flex-row gap-4 flex-wrap">
-              {headerCategories.data?.map((cat) => {
-                return (
-                  <CvCategory layout="row" initialData={cat} key={cat.id} />
-                )
-              })}
+              {headerCategories.data?.map((cat, i) => (
+                <CvCategory layout="row" position={i} initialData={cat} key={cat.id} />
+              ))}
             </div>
             <div id="colwrapper" className="flex flex-col lg:flex-row w-full h-3/4 gap-4">
               <div id="col1" className={`flex flex-col w-full ${col1Categories.data?.length ? col1Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col1Categories.data?.map((cat) => {
-                  return (
-                    <CvCategory layout="col" initialData={cat} key={cat.id} />
-                  )
-                })}
+                {col1Categories.data?.map((cat, i) => (
+                  <CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
+                ))}
               </div>
               <div id="col2" className={`flex flex-col w-full ${col2Categories.data?.length ? col2Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col2Categories.data?.map((cat) => {
-                  return (
-                    <CvCategory layout="col" initialData={cat} key={cat.id} />
-                  )
-                })}
+                {col2Categories.data?.map((cat, i) => (
+                  <CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
+                ))}
               </div>
             </div>
           </div>

src/app/layout.tsx

@@ -12,6 +12,7 @@ import TrpcProvider from "./_trpc/TrpcProvider";
 import ThemeProvider from './_providers/ThemeProvider'
 import GsapProvider from "./_providers/GsapProvicer";
 import {MessagesProvider} from "./_providers/MessagesProvider";
+import { MusicPlayerProvider } from "./music/_components/MusicPlayerProvider";
 import { CodeHighlightStyle } from "./_components/CodeHighlightSyle";
 import { cn } from "~/lib/utils";
 import AnimatedBackGroundContainer from "./_components/Animated/AnimatedBackGroundContainer";
@@ -49,6 +50,7 @@ export default async function RootLayout({
 						<body className="flex flex-col bg-background text-foreground">
 							<ThemeProvider>
 							<MessagesProvider>
+								<MusicPlayerProvider>
 								<AnimatedBackGroundContainer followSpeed={0.003} particleCount={100} orbitRadius={2000}>
 									<TopNav />
 									<main className="absolute lg:top-10 h-screen lg:h-[calc(100vh-var(--spacing)*10)] w-screen">
@@ -57,6 +59,7 @@ export default async function RootLayout({
 									{modal}
 								</AnimatedBackGroundContainer>
 								<ChatFAB />
+								</MusicPlayerProvider>
 								</MessagesProvider>
 							</ThemeProvider>
 						</body>

src/app/music/_components/AudioPlayer.tsx

@@ -1,10 +1,12 @@
 'use client'
 
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { useTheme } from "next-themes";
+import type WaveSurfer from "wavesurfer.js";
 import { Download, Loader2, Pause, Play } from "lucide-react";
-import { Slider } from "~/components/ui/slider";
 import { Button } from "~/components/ui/button";
 import { toast } from "sonner";
+import { useMusicPlayer } from "./MusicPlayerProvider";
 
 function formatTime(seconds: number) {
 	if (!Number.isFinite(seconds)) return "0:00";
@@ -13,29 +15,109 @@ function formatTime(seconds: number) {
 	return `${m}:${s.toString().padStart(2, "0")}`;
 }
 
+function cssVar(name: string, fallback: string) {
+	if (typeof window === "undefined") return fallback;
+	const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+	return v || fallback;
+}
+
+function waveColors() {
+	return {
+		waveColor: cssVar("--muted-foreground", "#9ca3af"),
+		progressColor: cssVar("--primary", "#e2761b"),
+		cursorColor: cssVar("--foreground", "#111827"),
+	};
+}
+
+/**
+ * Per-track waveform. Playback itself is owned by the shared MusicPlayer engine
+ * (so it keeps running across navigation); this wavesurfer instance is only a
+ * visual + seek surface that mirrors the engine when its track is active.
+ */
 export default function AudioPlayer(props: {
-	/** Streaming-friendly source the player actually plays. */
+	id: string;
 	src: string;
-	/** Original high-quality file offered via the download button. */
 	downloadUrl: string;
 	downloadName: string;
 }) {
-	const audioRef = useRef<HTMLAudioElement>(null);
-	const [playing, setPlaying] = useState(false);
-	const [current, setCurrent] = useState(0);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const wsRef = useRef<WaveSurfer | null>(null);
+	const [ready, setReady] = useState(false);
 	const [duration, setDuration] = useState(0);
-	const [seeking, setSeeking] = useState(false);
 	const [downloading, setDownloading] = useState(false);
+	const { resolvedTheme } = useTheme();
 
-	function togglePlay() {
-		const audio = audioRef.current;
-		if (!audio) return;
-		if (audio.paused) {
-			audio.play();
-		} else {
-			audio.pause();
+	const { currentId, isPlaying, currentTime, toggle, seek, subscribeTime } = useMusicPlayer();
+	const isActive = currentId === props.id;
+
+	// Reach live values from the once-created wavesurfer callbacks.
+	const isActiveRef = useRef(isActive);
+	isActiveRef.current = isActive;
+	const currentTimeRef = useRef(currentTime);
+	currentTimeRef.current = currentTime;
+	const toggleRef = useRef(toggle);
+	toggleRef.current = toggle;
+	const seekRef = useRef(seek);
+	seekRef.current = seek;
+
+	useEffect(() => {
+		let ws: WaveSurfer | null = null;
+		let cancelled = false;
+		setReady(false);
+
+		(async () => {
+			const WaveSurferClass = (await import("wavesurfer.js")).default;
+			if (cancelled || !containerRef.current) return;
+			const instance = WaveSurferClass.create({
+				container: containerRef.current,
+				url: props.src,
+				height: 44,
+				barWidth: 2,
+				barGap: 1,
+				barRadius: 2,
+				normalize: true,
+				cursorWidth: 1,
+				...waveColors(),
+			});
+			ws = instance;
+			wsRef.current = instance;
+			instance.on("ready", () => {
+				// This media is for drawing only — never let it make sound.
+				instance.setMuted(true);
+				setReady(true);
+				setDuration(instance.getDuration());
+				if (isActiveRef.current) instance.setTime(currentTimeRef.current);
+			});
+			// Clicking the waveform: start this track if it isn't playing, then seek.
+			instance.on("interaction", (time: number) => {
+				if (!isActiveRef.current) toggleRef.current(props.id);
+				seekRef.current(time);
+			});
+		})();
+
+		return () => {
+			cancelled = true;
+			ws?.destroy();
+			wsRef.current = null;
+		};
+	}, [props.src]);
+
+	// Mirror the engine's playback position onto the cursor while active.
+	useEffect(() => {
+		const ws = wsRef.current;
+		if (!ws || !ready) return;
+		if (!isActive) {
+			ws.setTime(0);
+			return;
 		}
-	}
+		ws.setTime(currentTimeRef.current);
+		return subscribeTime((t) => wsRef.current?.setTime(t));
+	}, [isActive, ready, subscribeTime]);
+
+	// Re-tint the waveform when the user toggles light/dark.
+	useEffect(() => {
+		wsRef.current?.setOptions(waveColors());
+	}, [resolvedTheme]);
 
 	async function handleDownload() {
 		setDownloading(true);
@@ -60,50 +142,33 @@ export default function AudioPlayer(props: {
 		}
 	}
 
+	const playing = isActive && isPlaying;
+
 	return (
 		<div className="flex items-center gap-3 rounded-lg border bg-transparent px-3 py-2">
-			<audio
-				ref={audioRef}
-				src={props.src}
-				preload="metadata"
-				onPlay={() => setPlaying(true)}
-				onPause={() => setPlaying(false)}
-				onLoadedMetadata={(e) => setDuration(e.currentTarget.duration)}
-				onTimeUpdate={(e) => {
-					if (!seeking) setCurrent(e.currentTarget.currentTime);
-				}}
-				onEnded={() => setPlaying(false)}
-			/>
-
 			<Button
 				type="button"
 				size="icon"
 				variant="ghost"
 				aria-label={playing ? "Pause" : "Play"}
-				onClick={togglePlay}
+				disabled={!ready}
+				onClick={() => toggle(props.id)}
 			>
 				{playing ? <Pause /> : <Play />}
 			</Button>
 
 			<span className="w-10 shrink-0 text-right font-mono text-xs text-muted-foreground tabular-nums">
-				{formatTime(current)}
+				{formatTime(isActive ? currentTime : 0)}
 			</span>
 
-			<Slider
-				className="flex-1"
-				min={0}
-				max={duration || 1}
-				step={0.1}
-				value={[current]}
-				onValueChange={([v]) => {
-					setSeeking(true);
-					setCurrent(v ?? 0);
-				}}
-				onValueCommit={([v]) => {
-					if (audioRef.current) audioRef.current.currentTime = v ?? 0;
-					setSeeking(false);
-				}}
-			/>
+			<div className="relative flex-1">
+				<div ref={containerRef} className="w-full" />
+				{!ready && (
+					<div className="absolute inset-0 flex items-center">
+						<div className="h-7 w-full animate-pulse rounded bg-muted-foreground/15" />
+					</div>
+				)}
+			</div>
 
 			<span className="w-10 shrink-0 font-mono text-xs text-muted-foreground tabular-nums">
 				{formatTime(duration)}

src/app/music/_components/MusicMiniPlayer.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { useState } from "react";
+import { Music } from "lucide-react";
+import {
+	Drawer,
+	DrawerContent,
+	DrawerHeader,
+	DrawerTitle,
+	DrawerTrigger,
+} from "~/components/ui/drawer";
+import { Slider } from "~/components/ui/slider";
+import { useMusicPlayer } from "./MusicPlayerProvider";
+import PlayerControls from "./PlayerControls";
+
+function formatTime(seconds: number) {
+	if (!Number.isFinite(seconds)) return "0:00";
+	const m = Math.floor(seconds / 60);
+	const s = Math.floor(seconds % 60);
+	return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+/**
+ * Global, persistent mini-player: a floating button (shown once something is
+ * loaded) that opens a drawer with the transport controls and a scrubber, so
+ * playback can be controlled from any page while it keeps running in the
+ * background.
+ */
+export default function MusicMiniPlayer() {
+	const { currentTrack, isPlaying, currentTime, duration, seek } = useMusicPlayer();
+	const [open, setOpen] = useState(false);
+
+	if (!currentTrack) return null;
+
+	return (
+		<Drawer open={open} onOpenChange={setOpen}>
+			<DrawerTrigger asChild>
+				<button
+					type="button"
+					aria-label="Open player"
+					className="fixed bottom-4 left-4 z-40 flex max-w-[60vw] items-center gap-2 rounded-full border bg-background/80 px-4 py-2 shadow-lg backdrop-blur-md transition-colors hover:bg-background"
+				>
+					<Music className={isPlaying ? "animate-pulse" : ""} />
+					<span className="truncate text-sm">{currentTrack.title}</span>
+				</button>
+			</DrawerTrigger>
+			<DrawerContent>
+				<DrawerHeader>
+					<DrawerTitle>{currentTrack.title}</DrawerTitle>
+				</DrawerHeader>
+				<div className="mx-auto flex w-full max-w-md flex-col gap-4 px-4 pb-8">
+					<div className="flex items-center gap-2">
+						<span className="w-10 text-right font-mono text-xs text-muted-foreground tabular-nums">
+							{formatTime(currentTime)}
+						</span>
+						<Slider
+							className="flex-1"
+							min={0}
+							max={duration || 1}
+							step={0.1}
+							value={[currentTime]}
+							onValueChange={([v]) => seek(v ?? 0)}
+						/>
+						<span className="w-10 font-mono text-xs text-muted-foreground tabular-nums">
+							{formatTime(duration)}
+						</span>
+					</div>
+					<PlayerControls />
+				</div>
+			</DrawerContent>
+		</Drawer>
+	);
+}

src/app/music/_components/MusicPlayerProvider.tsx

@@ -0,0 +1,231 @@
+'use client'
+
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+	type ReactNode,
+} from "react";
+import { trpc } from "~/app/_trpc/Client";
+import MusicMiniPlayer from "./MusicMiniPlayer";
+
+export type PlayerTrack = {
+	id: string;
+	title: string;
+	/** Streaming-friendly source actually played. */
+	src: string;
+	/** Original high-quality file for the download button. */
+	downloadUrl: string;
+	downloadName: string;
+};
+
+type MusicPlayerValue = {
+	tracks: PlayerTrack[];
+	currentId: string | null;
+	currentTrack: PlayerTrack | null;
+	isPlaying: boolean;
+	shuffle: boolean;
+	currentTime: number;
+	duration: number;
+	/** Play button on a track: start it, or toggle play/pause if already current. */
+	toggle: (id: string) => void;
+	/** Global play/pause — acts on the current track (or starts the first one). */
+	togglePlayCurrent: () => void;
+	next: () => void;
+	previous: () => void;
+	toggleShuffle: () => void;
+	seek: (seconds: number) => void;
+	/** Subscribe to playback time updates (for waveform cursors). */
+	subscribeTime: (cb: (time: number) => void) => () => void;
+};
+
+const MusicPlayerContext = createContext<MusicPlayerValue | null>(null);
+
+export function useMusicPlayer() {
+	const ctx = useContext(MusicPlayerContext);
+	if (!ctx) throw new Error("useMusicPlayer must be used within a MusicPlayerProvider");
+	return ctx;
+}
+
+export function MusicPlayerProvider({ children }: { children: ReactNode }) {
+	// The provider owns the playlist so playback survives navigating away from
+	// the music page. The query is cached, so the music page shares this request.
+	const { data } = trpc.music.list.useQuery();
+	const tracks = useMemo<PlayerTrack[]>(
+		() =>
+			(data ?? []).map((t) => ({
+				id: t.id,
+				title: t.title,
+				src: t.streamUrl ?? t.fileUrl,
+				downloadUrl: t.fileUrl,
+				downloadName: t.fileName,
+			})),
+		[data],
+	);
+
+	const [currentId, setCurrentId] = useState<string | null>(null);
+	const [isPlaying, setIsPlaying] = useState(false);
+	const [shuffle, setShuffle] = useState(false);
+	const [currentTime, setCurrentTime] = useState(0);
+	const [duration, setDuration] = useState(0);
+
+	const audioRef = useRef<HTMLAudioElement | null>(null);
+	const tracksRef = useRef(tracks);
+	tracksRef.current = tracks;
+
+	// Lightweight pub/sub so each waveform can follow playback time without every
+	// player re-rendering on the audio element's frequent timeupdate.
+	const timeSubs = useRef<Set<(t: number) => void>>(new Set());
+	const subscribeTime = useCallback((cb: (t: number) => void) => {
+		timeSubs.current.add(cb);
+		return () => {
+			timeSubs.current.delete(cb);
+		};
+	}, []);
+	const emitTime = useCallback((t: number) => {
+		timeSubs.current.forEach((cb) => cb(t));
+	}, []);
+
+	const currentTrack = useMemo(
+		() => tracks.find((t) => t.id === currentId) ?? null,
+		[tracks, currentId],
+	);
+
+	const toggle = useCallback((id: string) => {
+		setCurrentId((prev) => {
+			if (prev === id) {
+				setIsPlaying((p) => !p);
+				return prev;
+			}
+			setIsPlaying(true);
+			return id;
+		});
+	}, []);
+
+	const togglePlayCurrent = useCallback(() => {
+		setCurrentId((prev) => {
+			if (prev) {
+				setIsPlaying((p) => !p);
+				return prev;
+			}
+			const first = tracksRef.current[0]?.id ?? null;
+			if (first) setIsPlaying(true);
+			return first;
+		});
+	}, []);
+
+	const step = useCallback((dir: 1 | -1) => {
+		const ids = tracksRef.current.map((t) => t.id);
+		if (ids.length === 0) return;
+		setCurrentId((prev) => {
+			let nextId: string;
+			if (shuffle && dir === 1 && ids.length > 1) {
+				do {
+					nextId = ids[Math.floor(Math.random() * ids.length)]!;
+				} while (nextId === prev);
+			} else {
+				const idx = prev ? ids.indexOf(prev) : -1;
+				nextId = ids[(idx + dir + ids.length) % ids.length]!;
+			}
+			setIsPlaying(true);
+			return nextId;
+		});
+	}, [shuffle]);
+	const next = useCallback(() => step(1), [step]);
+	const previous = useCallback(() => step(-1), [step]);
+	const toggleShuffle = useCallback(() => setShuffle((s) => !s), []);
+
+	const stepRef = useRef(step);
+	stepRef.current = step;
+
+	const seek = useCallback(
+		(s: number) => {
+			if (audioRef.current) audioRef.current.currentTime = s;
+			setCurrentTime(s);
+			emitTime(s);
+		},
+		[emitTime],
+	);
+
+	// Persistent audio element + listeners, created once on the client.
+	useEffect(() => {
+		const audio = new Audio();
+		audio.preload = "metadata";
+		audioRef.current = audio;
+		const onTime = () => {
+			setCurrentTime(audio.currentTime);
+			emitTime(audio.currentTime);
+		};
+		const onMeta = () => setDuration(audio.duration || 0);
+		const onEnded = () => stepRef.current(1);
+		audio.addEventListener("timeupdate", onTime);
+		audio.addEventListener("loadedmetadata", onMeta);
+		audio.addEventListener("ended", onEnded);
+		return () => {
+			audio.pause();
+			audio.removeEventListener("timeupdate", onTime);
+			audio.removeEventListener("loadedmetadata", onMeta);
+			audio.removeEventListener("ended", onEnded);
+			audioRef.current = null;
+		};
+	}, [emitTime]);
+
+	// Swap the source when the current track changes.
+	useEffect(() => {
+		const audio = audioRef.current;
+		if (!audio) return;
+		if (!currentTrack) {
+			audio.removeAttribute("src");
+			audio.load();
+			return;
+		}
+		if (audio.src !== currentTrack.src) {
+			audio.src = currentTrack.src;
+			audio.load();
+			setCurrentTime(0);
+			setDuration(0);
+		}
+	}, [currentTrack]);
+
+	// Reflect the desired play state onto the element.
+	useEffect(() => {
+		const audio = audioRef.current;
+		if (!audio || !currentTrack) return;
+		if (isPlaying) audio.play().catch(() => {});
+		else audio.pause();
+	}, [isPlaying, currentTrack]);
+
+	const value = useMemo<MusicPlayerValue>(
+		() => ({
+			tracks,
+			currentId,
+			currentTrack,
+			isPlaying,
+			shuffle,
+			currentTime,
+			duration,
+			toggle,
+			togglePlayCurrent,
+			next,
+			previous,
+			toggleShuffle,
+			seek,
+			subscribeTime,
+		}),
+		[
+			tracks, currentId, currentTrack, isPlaying, shuffle, currentTime, duration,
+			toggle, togglePlayCurrent, next, previous, toggleShuffle, seek, subscribeTime,
+		],
+	);
+
+	return (
+		<MusicPlayerContext.Provider value={value}>
+			{children}
+			<MusicMiniPlayer />
+		</MusicPlayerContext.Provider>
+	);
+}

src/app/music/_components/PlayerControls.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { Pause, Play, Shuffle, SkipBack, SkipForward } from "lucide-react";
+import { Button } from "~/components/ui/button";
+import { useMusicPlayer } from "./MusicPlayerProvider";
+
+export default function PlayerControls() {
+	const { isPlaying, shuffle, togglePlayCurrent, next, previous, toggleShuffle } =
+		useMusicPlayer();
+
+	return (
+		<div className="flex items-center justify-center gap-1">
+			<Button type="button" size="icon" variant="ghost" aria-label="Previous track" onClick={previous}>
+				<SkipBack />
+			</Button>
+			<Button
+				type="button"
+				size="icon-lg"
+				variant="secondary"
+				aria-label={isPlaying ? "Pause" : "Play"}
+				onClick={togglePlayCurrent}
+			>
+				{isPlaying ? <Pause /> : <Play />}
+			</Button>
+			<Button type="button" size="icon" variant="ghost" aria-label="Skip to next track" onClick={next}>
+				<SkipForward />
+			</Button>
+			<Button
+				type="button"
+				size="icon"
+				variant={shuffle ? "secondary" : "ghost"}
+				aria-label={shuffle ? "Shuffle on" : "Shuffle off"}
+				aria-pressed={shuffle}
+				onClick={toggleShuffle}
+			>
+				<Shuffle />
+			</Button>
+		</div>
+	);
+}

src/app/music/page.tsx

@@ -15,11 +15,11 @@ export default function MusicPage() {
     <ScrollArea className="px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
 			<AnimatedPageTitle position={0}><span>Just Some </span> <span>Music I Made</span> </AnimatedPageTitle>
 			<div className="flex flex-wrap h-fit content-center">
-				<AnimateTextIn className="flex flex-wrap mr-[1em]" position={0.5}>
+				<AnimateTextIn once className="flex flex-wrap mr-[1em]" position={0.5}>
 					<div><p className="break-after-avoid mr-[1em]">All works on this page are licensed under:</p></div>
 					<div><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div>
 				</AnimateTextIn>
-				<AnimatePopUp position={2} className="items-center content-center">
+				<AnimatePopUp duration={1} ease='elastic.inOut' position={2} once className="items-center content-center">
 					<div className="flex flex-row">
 						<img className="max-w-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" />
 						<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" />
@@ -33,7 +33,7 @@ export default function MusicPage() {
 				<div key={track.id}>
 					<Card.AnimatedCard position={i + 1}>
 						<Card.CardHeader>
-							<AnimateTextIn position={i + 1.2} animation="slide">
+							<AnimateTextIn once position={i + 1.2} animation="slide">
 								<Card.CardTitle>{track.title}</Card.CardTitle>
 							</AnimateTextIn>
 						</Card.CardHeader>
@@ -41,8 +41,9 @@ export default function MusicPage() {
 							{track.description && (
 								<p className="text-sm text-muted-foreground gsapant">{track.description}</p>
 							)}
-							<AnimatePopUp position={i + 1.3}>
+							<AnimatePopUp duration={2} ease='elastic.inOut'  position={i + 1.3} once>
 								<AudioPlayer
+									id={track.id}
 									src={track.streamUrl ?? track.fileUrl}
 									downloadUrl={track.fileUrl}
 									downloadName={track.fileName}

src/app/projects/page.tsx

@@ -41,10 +41,10 @@ export default function ProjectsPage() {
           <Card.AnimatedCard position={i + 1.2} key={project.id}>
             <Card.CardHeader>
               <div className="flex items-start justify-between gap-2 flex-wrap">
-                <AnimateTextIn position={i + 1.4} animation="slide"><Card.CardTitle>{project.title}</Card.CardTitle></AnimateTextIn>
+                <AnimateTextIn once position={i + 1.4} animation="slide"><Card.CardTitle>{project.title}</Card.CardTitle></AnimateTextIn>
                 <div className="flex gap-2 flex-wrap">
                   {project.sourceType && (
-                    <AnimatePopUp position={i + 2} duration={2}>
+                    <AnimatePopUp position={i + 2} duration={2} once>
                       <Badge variant={project.sourceType === "open" ? "secondary" : "outline"}>
                         {project.sourceType === "open" ? "Open Source" : "Closed Source"}
                       </Badge>
@@ -62,7 +62,7 @@ export default function ProjectsPage() {
               <Card.CardContent className="flex flex-col gap-3">
                 {project.description && (
                   <div className="prose prose-sm dark:prose-invert max-w-none text-muted-foreground">
-                    <AnimatePopUp position={i + 1.4} duration={10}>
+                    <AnimatePopUp once position={i + 1.4} duration={10}>
                       <Markdown remarkPlugins={[remarkGfm]}>{project.description}</Markdown>
                     </AnimatePopUp>
                   </div>
@@ -71,7 +71,7 @@ export default function ProjectsPage() {
                   {project.techStack?.stackItems && project.techStack.stackItems.length > 0 && (
                     <div className="flex flex-wrap gap-1.5">
                       {project.techStack.stackItems.map((item, k) => (
-                        <AnimatePopUp key={k} position={(i + 2) + k * 0.5}>  <StackBadge key={item} item={item} /> </AnimatePopUp>
+                        <AnimatePopUp key={k} position={(i + 2) + k * 0.5} once>  <StackBadge key={item} item={item} /> </AnimatePopUp>
                       ))}
                     </div>
                   )}
@@ -111,6 +111,11 @@ export default function ProjectsPage() {
           <div className="pt-5" />
         </div>
       ))}
+      {/* Scroll runway: lets the last cards' ScrollTrigger exit points be
+          reached past the visible area, so on short viewports the second-to-last
+          card animates out off-screen instead of being frozen mid-exit at the
+          bottom of the scroll. Tune the height if a card is still caught. */}
+      <div aria-hidden className="h-[70dvh] shrink-0" />
     </ScrollArea>
   );
 }

src/components/ui/card.tsx

@@ -1,7 +1,7 @@
-import { useGSAP } from "@gsap/react"; import * as React from "react"
+import * as React from "react"
 import { useRef } from "react";
-import { useGsapContext } from "~/app/_providers/GsapProvicer";
 import gsap from 'gsap'
+import { useReveal } from "~/app/_components/Animated/useReveal";
 import { cn } from "~/lib/utils"
 
 function Card({
@@ -27,40 +27,17 @@ function AnimatedCard({
   position = 0,
   size = "default",
   scrollOnly = false,
+  once = false,
   ...props
-}: React.ComponentProps<"div"> & { size?: "default" | "sm", position?: gsap.Position,  scrollOnly?: boolean }) {
-  const gsapContext = useGsapContext()
+}: React.ComponentProps<"div"> & { size?: "default" | "sm", position?: gsap.Position,  scrollOnly?: boolean, once?: boolean }) {
   const ref = useRef<HTMLDivElement | null>(null)
-  useGSAP(() => {
-    const rect = ref.current?.getBoundingClientRect()
-    const scroller = gsapContext?.getScroller()
-    console.log(scroller)
-    let viewportTop = 0
-    let viewportBottom = window.innerHeight
-    if (scroller && scroller instanceof Element) {
-      const scrollerRect = scroller.getBoundingClientRect()
-      viewportTop = scrollerRect.top
-      viewportBottom = scrollerRect.top + scrollerRect.height
-    }
-    const isInView = rect && rect.bottom > viewportTop && rect.top < viewportBottom
-    console.log(isInView)
-    const fromVars = { x: -100, opacity: 0, duration: 0.5 }
-    if (isInView && !scrollOnly) {
-      gsapContext?.addAnimation(gsap.from(ref.current, fromVars), position)
-    } else {
-      gsap.from(ref.current,
-        {
-          ...fromVars,
-          scrollTrigger: {
-            trigger: ref.current,
-            start: 'top bottom',
-            end: 'bottom top',
-            toggleActions: "play reverse play reverse",
-            scroller
-          }
-        })
-    }
-  }, { dependencies: [] })
+  useReveal(ref, {
+    position,
+    scrollOnly,
+    once,
+    debugId: `card-${position}`,
+    makeReveal: (el) => gsap.from(el, { x: -100, opacity: 0, duration: 0.5, paused: true }),
+  })
   return (
     <div
       ref={ref}

src/server/dbschema/schema.ts

@@ -175,6 +175,7 @@ export const chatMessageRelations = relations(chatMessage, ({ one }) => ({
 export const systemSettings = createTable(
 	"systemSetting",
 	(d) => ({
-		systemPropmt: d.text()
+		systemPropmt: d.text(),
+		model: d.text()
 	})
 )

src/server/routers/chat.ts

@@ -7,6 +7,26 @@ import { isAdmin } from '~/app/actions';
 import { z } from 'zod';
 import { eq } from 'drizzle-orm';
 import { clerkClient, auth } from '@clerk/nextjs/server'
+import { env } from '~/env'
+
+export const DEFAULT_MODEL = 'gpt-5-mini'
+
+// Models returned by the OpenAI API that aren't usable for chat completions.
+const NON_CHAT_MODEL = /embedding|image|audio|realtime|transcribe|tts|whisper|moderation|dall-e|search|codex|instruct/
+
+async function readSettings() {
+	return db.select().from(systemSettings).limit(1).then((r) => r[0])
+}
+
+async function writeSettings(values: { systemPropmt?: string | null; model?: string | null }) {
+	const current = await readSettings()
+	await db.delete(systemSettings)
+	await db.insert(systemSettings).values({
+		systemPropmt: values.systemPropmt ?? current?.systemPropmt ?? null,
+		model: values.model ?? current?.model ?? null,
+	})
+}
+
 export const chatRouter = router({
   getSession: publicProcedure.query(async () => {
     const { userId } = await auth();
@@ -66,13 +86,34 @@ export const chatRouter = router({
 
   }),
   getSystemPrompt: publicProcedure.query(async () => {
-    const row = await db.select().from(systemSettings).limit(1).then((r) => r[0])
+    const row = await readSettings()
     return row?.systemPropmt ?? ''
   }),
   updateSystemPrompt: publicProcedure.input(z.object({ prompt: z.string() })).mutation(async ({ input }) => {
     if (!(await isAdmin())) throw new TRPCError({ code: 'FORBIDDEN' })
-    await db.delete(systemSettings)
-    await db.insert(systemSettings).values({ systemPropmt: input.prompt })
+    await writeSettings({ systemPropmt: input.prompt })
+  }),
+  getModel: publicProcedure.query(async () => {
+    const row = await readSettings()
+    return row?.model ?? DEFAULT_MODEL
+  }),
+  listModels: publicProcedure.query(async () => {
+    if (!(await isAdmin())) throw new TRPCError({ code: 'FORBIDDEN' })
+    const res = await fetch('https://api.openai.com/v1/models', {
+      headers: { Authorization: `Bearer ${env.OPENAI_API_KEY}` },
+    })
+    if (!res.ok) {
+      throw new TRPCError({ code: 'INTERNAL_SERVER_ERROR', message: `failed to fetch models (${res.status})` })
+    }
+    const json = (await res.json()) as { data: { id: string }[] }
+    return json.data
+      .map((m) => m.id)
+      .filter((id) => (id.startsWith('gpt') || /^o\d/.test(id) || id.startsWith('chatgpt')) && !NON_CHAT_MODEL.test(id))
+      .sort()
+  }),
+  updateModel: publicProcedure.input(z.object({ model: z.string() })).mutation(async ({ input }) => {
+    if (!(await isAdmin())) throw new TRPCError({ code: 'FORBIDDEN' })
+    await writeSettings({ model: input.model })
   }),
 })