From e56f731eafe2713413c967eaa9a681543597765e Mon Sep 17 00:00:00 2001
From: Louis Jordan <louisjoecodes@gmail.com>
Date: Thu, 12 Mar 2026 13:22:13 +0000
Subject: [PATCH 1/3] feat: music banner

---
 apps/www/app/(app)/layout.tsx                 |    2 +
 .../(app)/radio/components/radio-speaker.tsx  |    2 +-
 apps/www/components/music-banner.tsx          |  145 +
 .../blocks/speaker-01/components/speaker.tsx  | 2650 +++++++++--------
 apps/www/styles/globals.css                   |   19 +
 5 files changed, 1495 insertions(+), 1323 deletions(-)
 create mode 100644 apps/www/components/music-banner.tsx

diff --git a/apps/www/app/(app)/layout.tsx b/apps/www/app/(app)/layout.tsx
index e7b67cf7..86113c1c 100644
--- a/apps/www/app/(app)/layout.tsx
+++ b/apps/www/app/(app)/layout.tsx
@@ -1,9 +1,11 @@
+import { MusicBanner } from "@/components/music-banner"
 import { SiteFooter } from "@/components/site-footer"
 import { SiteHeader } from "@/components/site-header"
 
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="bg-background relative z-10 flex min-h-svh flex-col">
+      <MusicBanner />
       <SiteHeader />
       <main className="flex flex-1 flex-col">{children}</main>
       <SiteFooter />
diff --git a/apps/www/app/(app)/radio/components/radio-speaker.tsx b/apps/www/app/(app)/radio/components/radio-speaker.tsx
index 2edf807c..46c77663 100644
--- a/apps/www/app/(app)/radio/components/radio-speaker.tsx
+++ b/apps/www/app/(app)/radio/components/radio-speaker.tsx
@@ -581,7 +581,7 @@ function SpeakerControls({
           <p className="text-muted-foreground text-xs">
             Powered by{" "}
             <a
-              href="https://elevenlabs.io/music"
+              href="https://elevenmusic.link/ui"
               target="_blank"
               rel="noopener noreferrer"
               className="text-foreground hover:text-primary font-medium transition-colors"
diff --git a/apps/www/components/music-banner.tsx b/apps/www/components/music-banner.tsx
new file mode 100644
index 00000000..c6f7666d
--- /dev/null
+++ b/apps/www/components/music-banner.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { ArrowRight, X } from "lucide-react";
+
+const BANNER_DISMISSED_KEY = "music-banner-dismissed";
+
+function ElevenMusicWordmark({ className }: { className?: string }) {
+	return (
+		<svg
+			className={className}
+			fill="none"
+			viewBox="0 0 275 33"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M-4.78538e-05 31.673V-1.9022e-07H6.60959V31.673H-4.78538e-05ZM13.0064 31.673V-1.9022e-07H19.6161V31.673H13.0064ZM26.0129 31.673V-1.9022e-07H45.5757V5.27884H32.6226V12.82H44.6885V18.0989H32.6226V26.3942H45.5757V31.673H26.0129ZM50.0516 31.673V-1.9022e-07H56.3063V31.673H50.0516ZM71.4362 32.2054C64.3386 32.2054 60.5236 28.4348 60.5236 19.7846C60.5236 11.1344 64.8265 7.40812 71.5249 7.40812C78.3563 7.40812 82.0382 11.09 82.0382 19.8733V21.1154H66.6897C66.9115 26.2611 68.4641 28.1686 71.4362 28.1686C73.7873 28.1686 75.2511 26.7934 75.5173 24.398H81.7721C81.3728 29.6325 77.0255 32.2054 71.4362 32.2054ZM66.734 17.3448H75.8722C75.5617 12.9975 74.0534 11.4005 71.4362 11.4005C68.8633 11.4005 67.1776 13.0418 66.734 17.3448ZM91.8785 31.673L84.1599 7.94044H90.5477L93.1206 16.9012C94.0965 20.1838 94.6732 22.8454 95.2055 25.7732H95.383C95.9153 22.8454 96.5363 20.1838 97.4679 16.9012L100.085 7.94044H106.473L98.7543 31.673H91.8785ZM118.676 32.2054C111.579 32.2054 107.764 28.4348 107.764 19.7846C107.764 11.1344 112.066 7.40812 118.765 7.40812C125.596 7.40812 129.278 11.09 129.278 19.8733V21.1154H113.93C114.151 26.2611 115.704 28.1686 118.676 28.1686C121.027 28.1686 122.491 26.7934 122.757 24.398H129.012C128.613 29.6325 124.265 32.2054 118.676 32.2054ZM113.974 17.3448H123.112C122.802 12.9975 121.293 11.4005 118.676 11.4005C116.103 11.4005 114.418 13.0418 113.974 17.3448ZM147.902 16.4132C147.902 13.3524 146.615 11.9328 144.353 11.9328C141.603 11.9328 139.828 13.9734 139.828 17.6996V31.673H133.573V11.8885L133.485 7.94044H139.695L139.828 11.0013H139.961C141.07 8.96072 143.466 7.40812 146.527 7.40812C151.051 7.40812 154.157 9.93664 154.157 15.4373V31.673H147.902V16.4132ZM162.629 31.673H158.637V-1.9022e-07H163.916L171.146 20.0507C172.211 22.9785 172.788 24.7972 173.631 27.725H173.808C174.651 24.7972 175.228 22.9785 176.292 20.0507L183.479 -1.9022e-07H188.802V31.673H184.809V14.2839C184.809 11.1787 184.854 9.27124 184.987 6.16604H184.809C184.055 8.78328 183.612 10.1141 182.414 13.4411L175.849 31.673H171.59L165.025 13.4411C163.783 10.1141 163.383 8.78328 162.585 6.16604H162.408C162.585 9.27124 162.629 11.1787 162.629 14.2839V31.673ZM215.254 7.94044V28.0355L215.343 31.673H211.439L211.35 27.9468H211.217C210.33 29.943 207.624 32.2054 203.587 32.2054C198.397 32.2054 195.336 28.9227 195.336 23.5995V7.94044H199.24V23.1116C199.24 26.7934 200.97 29.1445 204.563 29.1445C208.644 29.1445 211.35 26.0393 211.35 21.6477V7.94044H215.254ZM229.312 32.2054C223.279 32.2054 219.775 29.5881 219.553 24.5311H223.457C223.678 27.6363 225.852 29.2776 229.312 29.2776C232.861 29.2776 235.168 27.8137 235.168 25.3739C235.168 23.0228 233.571 22.2244 230.066 21.5146L227.893 21.071C222.836 20.0507 219.997 18.7199 219.997 14.2839C219.997 10.3802 223.811 7.40812 229.046 7.40812C234.192 7.40812 238.317 9.62612 238.495 14.4614H234.591C234.458 11.7554 231.974 10.3359 229.046 10.3359C226.207 10.3359 223.767 11.711 223.767 13.9734C223.767 16.147 225.275 16.9455 228.602 17.6553L230.776 18.0989C235.789 19.1192 238.938 20.2282 238.938 25.0634C238.938 29.0558 235.256 32.2054 229.312 32.2054ZM247.578 4.39164H243.319V-1.9022e-07H247.578V4.39164ZM247.401 31.673H243.497V7.94044H247.401V31.673ZM263.738 32.2054C256.463 32.2054 252.248 27.3701 252.248 19.7846C252.248 12.199 256.507 7.40812 263.738 7.40812C269.771 7.40812 273.497 10.5577 273.896 14.9937H269.992C269.371 12.1103 267.02 10.469 263.738 10.469C258.725 10.469 256.152 14.3726 256.152 19.7846C256.152 25.1965 258.681 29.1445 263.738 29.1445C266.932 29.1445 269.593 27.6806 270.17 24.398H274.073C273.275 29.5881 269.016 32.2054 263.738 32.2054Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+}
+
+function EqualizerBars() {
+	return (
+		<div className="flex items-end gap-[3px] h-[14px]" aria-hidden="true">
+			{[0.6, 1, 0.4, 0.8, 0.5].map((scale, i) => (
+				<div
+					key={i}
+					className="w-[2px] rounded-full bg-current"
+					style={{
+						animation: `music-eq ${0.8 + i * 0.15}s ease-in-out infinite alternate`,
+						height: `${scale * 14}px`,
+					}}
+				/>
+			))}
+		</div>
+	);
+}
+
+export function MusicBanner() {
+	const [dismissed, setDismissed] = useState(true);
+	const [isVisible, setIsVisible] = useState(false);
+	const bannerRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		try {
+			const wasDismissed = localStorage.getItem(BANNER_DISMISSED_KEY);
+			if (!wasDismissed) {
+				setDismissed(false);
+				requestAnimationFrame(() => setIsVisible(true));
+			}
+		} catch {
+			setDismissed(false);
+			requestAnimationFrame(() => setIsVisible(true));
+		}
+	}, []);
+
+	const handleDismiss = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setDismissed(true);
+			try {
+				localStorage.setItem(BANNER_DISMISSED_KEY, "1");
+			} catch {}
+		}, 300);
+	};
+
+	if (dismissed) return null;
+
+	return (
+		<div
+			ref={bannerRef}
+			className="relative z-[60] overflow-hidden transition-all duration-300 ease-out"
+			style={{
+				maxHeight: isVisible ? "60px" : "0px",
+				opacity: isVisible ? 1 : 0,
+			}}
+		>
+			{/* Dark background */}
+			<div className="absolute inset-0 bg-[#0a0a0a]" />
+
+			{/* Gradient blur orb — marketing-website style */}
+			<div
+				className="pointer-events-none absolute -top-1/2 left-1/2 h-[200%] w-full max-w-[900px] -translate-x-1/2"
+				style={{
+					borderRadius: "50%",
+					background:
+						"linear-gradient(90deg, #E56C61 0%, #CBB3CB 40%, #C38DC2 60%, #C8A9CC 80%)",
+					filter: "blur(60px)",
+					opacity: 0.15,
+				}}
+			/>
+
+			{/* Subtle animated shimmer */}
+			<div
+				className="pointer-events-none absolute inset-0"
+				style={{
+					background:
+						"linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%)",
+					animation: "banner-shimmer 3s ease-in-out infinite",
+				}}
+			/>
+
+			<Link
+				href="https://elevenmusic.link/ui"
+				target="_blank"
+				rel="noopener noreferrer"
+				className="group relative flex h-[40px] items-center justify-center gap-3 px-4 text-white/90 transition-colors hover:text-white"
+			>
+				<EqualizerBars />
+				<span className="hidden items-center gap-2.5 sm:flex">
+					<span className="text-[13px] font-medium tracking-wide text-white/60">
+						Introducing
+					</span>
+					<ElevenMusicWordmark className="h-[11px] w-auto" />
+				</span>
+				<span className="flex items-center gap-2 sm:hidden">
+					<span className="text-[13px] font-medium tracking-wide text-white/60">
+						Introducing
+					</span>
+					<ElevenMusicWordmark className="h-[10px] w-auto" />
+				</span>
+				<span className="flex items-center gap-1 text-[13px] font-medium text-white/50 transition-colors group-hover:text-white/80">
+					<span className="hidden lg:inline">Try it now</span>
+					<ArrowRight className="size-3 transition-transform group-hover:translate-x-0.5" />
+				</span>
+			</Link>
+
+			{/* Close button */}
+			<button
+				onClick={(e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					handleDismiss();
+				}}
+				className="absolute right-2 top-1/2 z-10 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full text-white/30 transition-colors hover:text-white/60"
+				aria-label="Dismiss banner"
+			>
+				<X className="size-3.5" />
+			</button>
+		</div>
+	);
+}
diff --git a/apps/www/registry/elevenlabs-ui/blocks/speaker-01/components/speaker.tsx b/apps/www/registry/elevenlabs-ui/blocks/speaker-01/components/speaker.tsx
index 8a067dbe..88c57e46 100644
--- a/apps/www/registry/elevenlabs-ui/blocks/speaker-01/components/speaker.tsx
+++ b/apps/www/registry/elevenlabs-ui/blocks/speaker-01/components/speaker.tsx
@@ -1,1350 +1,1356 @@
-"use client"
+"use client";
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
-import Link from "next/link"
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import Link from "next/link";
 import {
-  Music,
-  SkipBack,
-  SkipForward,
-  Sparkles,
-  Volume,
-  Volume1,
-  Volume2,
-  VolumeX,
-} from "lucide-react"
-
-import { cn } from "@/registry/elevenlabs-ui/lib/utils"
+	Music,
+	SkipBack,
+	SkipForward,
+	Sparkles,
+	Volume,
+	Volume1,
+	Volume2,
+	VolumeX,
+} from "lucide-react";
+
+import { cn } from "@/registry/elevenlabs-ui/lib/utils";
 import {
-  AudioPlayerButton,
-  AudioPlayerDuration,
-  AudioPlayerProgress,
-  AudioPlayerProvider,
-  AudioPlayerTime,
-  exampleTracks,
-  useAudioPlayer,
-} from "@/registry/elevenlabs-ui/ui/audio-player"
-import { Button } from "@/registry/elevenlabs-ui/ui/button"
-import { Card } from "@/registry/elevenlabs-ui/ui/card"
-import { Orb } from "@/registry/elevenlabs-ui/ui/orb"
-import { Waveform } from "@/registry/elevenlabs-ui/ui/waveform"
+	AudioPlayerButton,
+	AudioPlayerDuration,
+	AudioPlayerProgress,
+	AudioPlayerProvider,
+	AudioPlayerTime,
+	exampleTracks,
+	useAudioPlayer,
+} from "@/registry/elevenlabs-ui/ui/audio-player";
+import { Button } from "@/registry/elevenlabs-ui/ui/button";
+import { Card } from "@/registry/elevenlabs-ui/ui/card";
+import { Orb } from "@/registry/elevenlabs-ui/ui/orb";
+import { Waveform } from "@/registry/elevenlabs-ui/ui/waveform";
 
 const globalAudioState = {
-  isPlaying: false,
-  volume: 0.7,
-  isDark: false,
-}
+	isPlaying: false,
+	volume: 0.7,
+	isDark: false,
+};
 
 const PlayButton = memo(
-  ({ currentTrackIndex }: { currentTrackIndex: number }) => {
-    const player = useAudioPlayer()
-    return (
-      <AudioPlayerButton
-        variant="outline"
-        size="icon"
-        item={
-          player.activeItem
-            ? {
-                id: exampleTracks[currentTrackIndex].id,
-                src: exampleTracks[currentTrackIndex].url,
-                data: { name: exampleTracks[currentTrackIndex].name },
-              }
-            : undefined
-        }
-        className={cn(
-          "border-border h-14 w-14 rounded-full transition-all duration-300",
-          player.isPlaying
-            ? "bg-foreground/10 hover:bg-foreground/15 border-foreground/30 dark:bg-primary/20 dark:hover:bg-primary/30 dark:border-primary/50"
-            : "bg-background hover:bg-muted"
-        )}
-      />
-    )
-  }
-)
-
-PlayButton.displayName = "PlayButton"
+	({ currentTrackIndex }: { currentTrackIndex: number }) => {
+		const player = useAudioPlayer();
+		return (
+			<AudioPlayerButton
+				variant="outline"
+				size="icon"
+				item={
+					player.activeItem
+						? {
+								id: exampleTracks[currentTrackIndex].id,
+								src: exampleTracks[currentTrackIndex].url,
+								data: { name: exampleTracks[currentTrackIndex].name },
+							}
+						: undefined
+				}
+				className={cn(
+					"border-border h-14 w-14 rounded-full transition-all duration-300",
+					player.isPlaying
+						? "bg-foreground/10 hover:bg-foreground/15 border-foreground/30 dark:bg-primary/20 dark:hover:bg-primary/30 dark:border-primary/50"
+						: "bg-background hover:bg-muted",
+				)}
+			/>
+		);
+	},
+);
+
+PlayButton.displayName = "PlayButton";
 
 const TimeDisplay = memo(() => {
-  return (
-    <div className="flex items-center gap-2">
-      <AudioPlayerTime className="text-xs" />
-      <AudioPlayerProgress className="flex-1" />
-      <AudioPlayerDuration className="text-xs" />
-    </div>
-  )
-})
+	return (
+		<div className="flex items-center gap-2">
+			<AudioPlayerTime className="text-xs" />
+			<AudioPlayerProgress className="flex-1" />
+			<AudioPlayerDuration className="text-xs" />
+		</div>
+	);
+});
 
-TimeDisplay.displayName = "TimeDisplay"
+TimeDisplay.displayName = "TimeDisplay";
 
 const SpeakerContextBridge = ({ className }: { className?: string }) => {
-  const player = useAudioPlayer()
-  const playerRefStatic = useRef(player)
+	const player = useAudioPlayer();
+	const playerRefStatic = useRef(player);
 
-  playerRefStatic.current = player
+	playerRefStatic.current = player;
 
-  return useMemo(
-    () => <SpeakerControls className={className} playerRef={playerRefStatic} />,
-    [className]
-  )
-}
+	return useMemo(
+		() => <SpeakerControls className={className} playerRef={playerRefStatic} />,
+		[className],
+	);
+};
 
 export function Speaker({ className }: { className?: string }) {
-  return (
-    <AudioPlayerProvider>
-      <SpeakerContextBridge className={className} />
-    </AudioPlayerProvider>
-  )
+	return (
+		<AudioPlayerProvider>
+			<SpeakerContextBridge className={className} />
+		</AudioPlayerProvider>
+	);
 }
 
 const SpeakerOrb = memo(
-  ({
-    seed,
-    side,
-    isDark,
-    audioDataRef,
-  }: {
-    seed: number
-    side: "left" | "right"
-    isDark: boolean
-    audioDataRef: React.RefObject<number[]>
-  }) => {
-    const getInputVolume = useCallback(() => {
-      const audioData = audioDataRef?.current || []
-      if (
-        !globalAudioState.isPlaying ||
-        globalAudioState.volume === 0 ||
-        audioData.length === 0
-      )
-        return 0
-      const lowFreqEnd = Math.floor(audioData.length * 0.25)
-      let sum = 0
-      for (let i = 0; i < lowFreqEnd; i++) {
-        sum += audioData[i]
-      }
-      const avgLow = sum / lowFreqEnd
-      const amplified = Math.pow(avgLow, 0.5) * 3.5
-      return Math.max(0.2, Math.min(1.0, amplified))
-    }, [audioDataRef])
-
-    const getOutputVolume = useCallback(() => {
-      const audioData = audioDataRef?.current || []
-      if (
-        !globalAudioState.isPlaying ||
-        globalAudioState.volume === 0 ||
-        audioData.length === 0
-      )
-        return 0
-      const midStart = Math.floor(audioData.length * 0.25)
-      const midEnd = Math.floor(audioData.length * 0.75)
-      let sum = 0
-      for (let i = midStart; i < midEnd; i++) {
-        sum += audioData[i]
-      }
-      const avgMid = sum / (midEnd - midStart)
-      const modifier = side === "left" ? 0.9 : 1.1
-      const amplified = Math.pow(avgMid, 0.5) * 4.0
-      return Math.max(0.25, Math.min(1.0, amplified * modifier))
-    }, [side, audioDataRef])
-
-    const colors: [string, string] = useMemo(
-      () => (isDark ? ["#A0A0A0", "#232323"] : ["#F4F4F4", "#E0E0E0"]),
-      [isDark]
-    )
-
-    return (
-      <Orb
-        colors={colors}
-        seed={seed}
-        volumeMode="manual"
-        getInputVolume={getInputVolume}
-        getOutputVolume={getOutputVolume}
-      />
-    )
-  },
-  (prevProps, nextProps) => {
-    return (
-      prevProps.isDark === nextProps.isDark &&
-      prevProps.seed === nextProps.seed &&
-      prevProps.side === nextProps.side
-    )
-  }
-)
-
-SpeakerOrb.displayName = "SpeakerOrb"
+	({
+		seed,
+		side,
+		isDark,
+		audioDataRef,
+	}: {
+		seed: number;
+		side: "left" | "right";
+		isDark: boolean;
+		audioDataRef: React.RefObject<number[]>;
+	}) => {
+		const getInputVolume = useCallback(() => {
+			const audioData = audioDataRef?.current || [];
+			if (
+				!globalAudioState.isPlaying ||
+				globalAudioState.volume === 0 ||
+				audioData.length === 0
+			)
+				return 0;
+			const lowFreqEnd = Math.floor(audioData.length * 0.25);
+			let sum = 0;
+			for (let i = 0; i < lowFreqEnd; i++) {
+				sum += audioData[i];
+			}
+			const avgLow = sum / lowFreqEnd;
+			const amplified = Math.pow(avgLow, 0.5) * 3.5;
+			return Math.max(0.2, Math.min(1.0, amplified));
+		}, [audioDataRef]);
+
+		const getOutputVolume = useCallback(() => {
+			const audioData = audioDataRef?.current || [];
+			if (
+				!globalAudioState.isPlaying ||
+				globalAudioState.volume === 0 ||
+				audioData.length === 0
+			)
+				return 0;
+			const midStart = Math.floor(audioData.length * 0.25);
+			const midEnd = Math.floor(audioData.length * 0.75);
+			let sum = 0;
+			for (let i = midStart; i < midEnd; i++) {
+				sum += audioData[i];
+			}
+			const avgMid = sum / (midEnd - midStart);
+			const modifier = side === "left" ? 0.9 : 1.1;
+			const amplified = Math.pow(avgMid, 0.5) * 4.0;
+			return Math.max(0.25, Math.min(1.0, amplified * modifier));
+		}, [side, audioDataRef]);
+
+		const colors: [string, string] = useMemo(
+			() => (isDark ? ["#A0A0A0", "#232323"] : ["#F4F4F4", "#E0E0E0"]),
+			[isDark],
+		);
+
+		return (
+			<Orb
+				colors={colors}
+				seed={seed}
+				volumeMode="manual"
+				getInputVolume={getInputVolume}
+				getOutputVolume={getOutputVolume}
+			/>
+		);
+	},
+	(prevProps, nextProps) => {
+		return (
+			prevProps.isDark === nextProps.isDark &&
+			prevProps.seed === nextProps.seed &&
+			prevProps.side === nextProps.side
+		);
+	},
+);
+
+SpeakerOrb.displayName = "SpeakerOrb";
 
 const SpeakerOrbsSection = memo(
-  ({
-    isDark,
-    audioDataRef,
-  }: {
-    isDark: boolean
-    audioDataRef: React.RefObject<number[]>
-  }) => {
-    return (
-      <div className="mt-8 grid grid-cols-2 gap-8">
-        <div className="relative aspect-square">
-          <div className="bg-muted relative h-full w-full rounded-full p-1 shadow-[inset_0_2px_8px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_2px_8px_rgba(0,0,0,0.5)]">
-            <div className="bg-background h-full w-full overflow-hidden rounded-full shadow-[inset_0_0_12px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_0_12px_rgba(0,0,0,0.3)]">
-              <SpeakerOrb
-                key={`left-${isDark}`}
-                seed={100}
-                side="left"
-                isDark={isDark}
-                audioDataRef={audioDataRef}
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="relative aspect-square">
-          <div className="bg-muted relative h-full w-full rounded-full p-1 shadow-[inset_0_2px_8px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_2px_8px_rgba(0,0,0,0.5)]">
-            <div className="bg-background h-full w-full overflow-hidden rounded-full shadow-[inset_0_0_12px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_0_12px_rgba(0,0,0,0.3)]">
-              <SpeakerOrb
-                key={`right-${isDark}`}
-                seed={2000}
-                side="right"
-                isDark={isDark}
-                audioDataRef={audioDataRef}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  },
-  (prevProps, nextProps) => {
-    return prevProps.isDark === nextProps.isDark
-  }
-)
-
-SpeakerOrbsSection.displayName = "SpeakerOrbsSection"
+	({
+		isDark,
+		audioDataRef,
+	}: {
+		isDark: boolean;
+		audioDataRef: React.RefObject<number[]>;
+	}) => {
+		return (
+			<div className="mt-8 grid grid-cols-2 gap-8">
+				<div className="relative aspect-square">
+					<div className="bg-muted relative h-full w-full rounded-full p-1 shadow-[inset_0_2px_8px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_2px_8px_rgba(0,0,0,0.5)]">
+						<div className="bg-background h-full w-full overflow-hidden rounded-full shadow-[inset_0_0_12px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_0_12px_rgba(0,0,0,0.3)]">
+							<SpeakerOrb
+								key={`left-${isDark}`}
+								seed={100}
+								side="left"
+								isDark={isDark}
+								audioDataRef={audioDataRef}
+							/>
+						</div>
+					</div>
+				</div>
+
+				<div className="relative aspect-square">
+					<div className="bg-muted relative h-full w-full rounded-full p-1 shadow-[inset_0_2px_8px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_2px_8px_rgba(0,0,0,0.5)]">
+						<div className="bg-background h-full w-full overflow-hidden rounded-full shadow-[inset_0_0_12px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_0_12px_rgba(0,0,0,0.3)]">
+							<SpeakerOrb
+								key={`right-${isDark}`}
+								seed={2000}
+								side="right"
+								isDark={isDark}
+								audioDataRef={audioDataRef}
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		);
+	},
+	(prevProps, nextProps) => {
+		return prevProps.isDark === nextProps.isDark;
+	},
+);
+
+SpeakerOrbsSection.displayName = "SpeakerOrbsSection";
 
 const VolumeSlider = memo(
-  ({
-    volume,
-    setVolume,
-  }: {
-    volume: number
-    setVolume: (value: number | ((prev: number) => number)) => void
-  }) => {
-    const [isDragging, setIsDragging] = useState(false)
-
-    const getVolumeIcon = () => {
-      if (volume === 0) return VolumeX
-      if (volume <= 0.33) return Volume
-      if (volume <= 0.66) return Volume1
-      return Volume2
-    }
-
-    const VolumeIcon = getVolumeIcon()
-
-    return (
-      <div className="flex items-center justify-center gap-4 pt-4">
-        <button
-          onClick={() => setVolume((prev: number) => (prev > 0 ? 0 : 0.7))}
-          className="text-muted-foreground hover:text-foreground transition-colors"
-        >
-          <VolumeIcon
-            className={cn(
-              "h-4 w-4 transition-all",
-              volume === 0 && "text-muted-foreground/50"
-            )}
-          />
-        </button>
-        <div
-          className="volume-slider bg-foreground/10 group relative h-1 w-48 cursor-pointer rounded-full"
-          onClick={(e) => {
-            if (isDragging) return
-            const rect = e.currentTarget.getBoundingClientRect()
-            const x = Math.max(
-              0,
-              Math.min(1, (e.clientX - rect.left) / rect.width)
-            )
-            setVolume(x)
-          }}
-          onMouseDown={(e) => {
-            e.preventDefault()
-            setIsDragging(true)
-            const sliderRect = e.currentTarget.getBoundingClientRect()
-
-            // Set initial volume immediately
-            const initialX = Math.max(
-              0,
-              Math.min(1, (e.clientX - sliderRect.left) / sliderRect.width)
-            )
-            setVolume(initialX)
-
-            const handleMove = (e: MouseEvent) => {
-              const x = Math.max(
-                0,
-                Math.min(1, (e.clientX - sliderRect.left) / sliderRect.width)
-              )
-              setVolume(x)
-            }
-            const handleUp = () => {
-              setIsDragging(false)
-              document.removeEventListener("mousemove", handleMove)
-              document.removeEventListener("mouseup", handleUp)
-            }
-            document.addEventListener("mousemove", handleMove)
-            document.addEventListener("mouseup", handleUp)
-          }}
-        >
-          <div
-            className={cn(
-              "bg-primary absolute top-0 left-0 h-full rounded-full",
-              !isDragging && "transition-all duration-150"
-            )}
-            style={{ width: `${volume * 100}%` }}
-          />
-        </div>
-        <span className="text-muted-foreground w-12 text-right font-mono text-xs">
-          {Math.round(volume * 100)}%
-        </span>
-      </div>
-    )
-  }
-)
-
-VolumeSlider.displayName = "VolumeSlider"
+	({
+		volume,
+		setVolume,
+	}: {
+		volume: number;
+		setVolume: (value: number | ((prev: number) => number)) => void;
+	}) => {
+		const [isDragging, setIsDragging] = useState(false);
+
+		const getVolumeIcon = () => {
+			if (volume === 0) return VolumeX;
+			if (volume <= 0.33) return Volume;
+			if (volume <= 0.66) return Volume1;
+			return Volume2;
+		};
+
+		const VolumeIcon = getVolumeIcon();
+
+		return (
+			<div className="flex items-center justify-center gap-4 pt-4">
+				<button
+					onClick={() => setVolume((prev: number) => (prev > 0 ? 0 : 0.7))}
+					className="text-muted-foreground hover:text-foreground transition-colors"
+				>
+					<VolumeIcon
+						className={cn(
+							"h-4 w-4 transition-all",
+							volume === 0 && "text-muted-foreground/50",
+						)}
+					/>
+				</button>
+				<div
+					className="volume-slider bg-foreground/10 group relative h-1 w-48 cursor-pointer rounded-full"
+					onClick={(e) => {
+						if (isDragging) return;
+						const rect = e.currentTarget.getBoundingClientRect();
+						const x = Math.max(
+							0,
+							Math.min(1, (e.clientX - rect.left) / rect.width),
+						);
+						setVolume(x);
+					}}
+					onMouseDown={(e) => {
+						e.preventDefault();
+						setIsDragging(true);
+						const sliderRect = e.currentTarget.getBoundingClientRect();
+
+						// Set initial volume immediately
+						const initialX = Math.max(
+							0,
+							Math.min(1, (e.clientX - sliderRect.left) / sliderRect.width),
+						);
+						setVolume(initialX);
+
+						const handleMove = (e: MouseEvent) => {
+							const x = Math.max(
+								0,
+								Math.min(1, (e.clientX - sliderRect.left) / sliderRect.width),
+							);
+							setVolume(x);
+						};
+						const handleUp = () => {
+							setIsDragging(false);
+							document.removeEventListener("mousemove", handleMove);
+							document.removeEventListener("mouseup", handleUp);
+						};
+						document.addEventListener("mousemove", handleMove);
+						document.addEventListener("mouseup", handleUp);
+					}}
+				>
+					<div
+						className={cn(
+							"bg-primary absolute top-0 left-0 h-full rounded-full",
+							!isDragging && "transition-all duration-150",
+						)}
+						style={{ width: `${volume * 100}%` }}
+					/>
+				</div>
+				<span className="text-muted-foreground w-12 text-right font-mono text-xs">
+					{Math.round(volume * 100)}%
+				</span>
+			</div>
+		);
+	},
+);
+
+VolumeSlider.displayName = "VolumeSlider";
 
 function SpeakerControls({
-  className,
-  playerRef,
+	className,
+	playerRef,
 }: {
-  className?: string
-  playerRef: React.RefObject<ReturnType<typeof useAudioPlayer>>
+	className?: string;
+	playerRef: React.RefObject<ReturnType<typeof useAudioPlayer>>;
 }) {
-  const playerApiRef = playerRef
-  const isPlayingRef = useRef(false)
-
-  const [volume, setVolume] = useState(0.7)
-  const [currentTrackIndex, setCurrentTrackIndex] = useState(0)
-  const [showTrackList, setShowTrackList] = useState(false)
-  const audioDataRef = useRef<number[]>([])
-  const [isDark, setIsDark] = useState(false)
-  const [isScrubbing, setIsScrubbing] = useState(false)
-  const [isMomentumActive, setIsMomentumActive] = useState(false)
-  const [precomputedWaveform, setPrecomputedWaveform] = useState<number[]>([])
-  const waveformOffset = useRef(0)
-  const waveformElementRef = useRef<HTMLDivElement>(null)
-  const [ambienceMode, setAmbienceMode] = useState(false)
-  const containerWidthRef = useRef(300)
-  const analyserRef = useRef<AnalyserNode | null>(null)
-  const audioContextRef = useRef<AudioContext | null>(null)
-  const sourceRef = useRef<MediaElementAudioSourceNode | null>(null)
-  const audioBufferRef = useRef<AudioBuffer | null>(null)
-  const scratchBufferRef = useRef<AudioBufferSourceNode | null>(null)
-  const totalBarsRef = useRef(600)
-  const convolverRef = useRef<ConvolverNode | null>(null)
-  const delayRef = useRef<DelayNode | null>(null)
-  const feedbackRef = useRef<GainNode | null>(null)
-  const wetGainRef = useRef<GainNode | null>(null)
-  const dryGainRef = useRef<GainNode | null>(null)
-  const masterGainRef = useRef<GainNode | null>(null)
-  const lowPassFilterRef = useRef<BiquadFilterNode | null>(null)
-  const highPassFilterRef = useRef<BiquadFilterNode | null>(null)
-
-  useEffect(() => {
-    const checkTheme = () => {
-      const isDarkMode = document.documentElement.classList.contains("dark")
-      setIsDark(isDarkMode)
-    }
-
-    checkTheme()
-
-    const observer = new MutationObserver(checkTheme)
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class"],
-    })
-
-    return () => observer.disconnect()
-  }, [])
-
-  useEffect(() => {
-    const container = document.querySelector(".waveform-container")
-    if (container) {
-      const rect = container.getBoundingClientRect()
-      containerWidthRef.current = rect.width
-      waveformOffset.current = rect.width
-      if (waveformElementRef.current) {
-        waveformElementRef.current.style.transform = `translateX(${rect.width}px)`
-      }
-    }
-  }, [])
-
-  useEffect(() => {
-    if (precomputedWaveform.length > 0 && containerWidthRef.current > 0) {
-      waveformOffset.current = containerWidthRef.current
-      if (waveformElementRef.current) {
-        waveformElementRef.current.style.transform = `translateX(${containerWidthRef.current}px)`
-      }
-      if (playerApiRef.current.ref.current) {
-        playerApiRef.current.ref.current.currentTime = 0
-      }
-    }
-  }, [precomputedWaveform])
-
-  const precomputeWaveform = useCallback(async (audioUrl: string) => {
-    try {
-      const response = await fetch(audioUrl)
-      const arrayBuffer = await response.arrayBuffer()
-
-      const offlineContext = new OfflineAudioContext(1, 44100 * 5, 44100)
-      const audioBuffer = await offlineContext.decodeAudioData(
-        arrayBuffer.slice(0)
-      )
-
-      if (!audioContextRef.current) {
-        const audioContext = new (window.AudioContext ||
-          (window as unknown as { webkitAudioContext: typeof AudioContext })
-            .webkitAudioContext)()
-        audioContextRef.current = audioContext
-      }
-
-      audioBufferRef.current =
-        await audioContextRef.current.decodeAudioData(arrayBuffer)
-
-      const channelData = audioBuffer.getChannelData(0)
-      const samplesPerBar = Math.floor(
-        channelData.length / totalBarsRef.current
-      )
-      const waveformData: number[] = []
-
-      for (let i = 0; i < totalBarsRef.current; i++) {
-        const start = i * samplesPerBar
-        const end = start + samplesPerBar
-        let sum = 0
-        let count = 0
-
-        for (let j = start; j < end && j < channelData.length; j += 100) {
-          sum += Math.abs(channelData[j])
-          count++
-        }
-
-        const average = count > 0 ? sum / count : 0
-        waveformData.push(Math.min(1, average * 3))
-      }
-
-      setPrecomputedWaveform(waveformData)
-    } catch (error) {
-      console.error("Error precomputing waveform:", error)
-    }
-  }, [])
-
-  useEffect(() => {
-    const track = {
-      id: exampleTracks[0].id,
-      src: exampleTracks[0].url,
-      data: { name: exampleTracks[0].name },
-    }
-    playerApiRef.current.setActiveItem(track)
-    precomputeWaveform(track.src)
-  }, [precomputeWaveform])
-
-  const createImpulseResponse = (
-    audioContext: AudioContext,
-    duration: number,
-    decay: number
-  ) => {
-    const sampleRate = audioContext.sampleRate
-    const length = sampleRate * duration
-    const impulse = audioContext.createBuffer(2, length, sampleRate)
-
-    for (let channel = 0; channel < 2; channel++) {
-      const channelData = impulse.getChannelData(channel)
-      for (let i = 0; i < length; i++) {
-        const envelope = Math.pow(1 - i / length, decay)
-        const earlyReflections = i < length * 0.1 ? Math.random() * 0.5 : 0
-        const diffusion = (Math.random() * 2 - 1) * envelope
-        const stereoWidth = channel === 0 ? 0.9 : 1.1
-
-        channelData[i] = (diffusion + earlyReflections) * stereoWidth * 0.8
-      }
-    }
-    return impulse
-  }
-
-  const setupAudioContext = useCallback((ambience: boolean) => {
-    if (!playerApiRef.current.ref.current) {
-      return
-    }
-
-    if (
-      audioContextRef.current &&
-      sourceRef.current &&
-      wetGainRef.current &&
-      dryGainRef.current
-    ) {
-      return
-    }
-
-    try {
-      let audioContext = audioContextRef.current
-      let source = sourceRef.current
-      let analyser = analyserRef.current
-
-      if (!audioContext) {
-        audioContext = new (window.AudioContext ||
-          (window as unknown as { webkitAudioContext: typeof AudioContext })
-            .webkitAudioContext)()
-        audioContextRef.current = audioContext
-      }
-
-      if (audioContext.state === "suspended") {
-        audioContext.resume()
-      }
-
-      if (!source) {
-        source = audioContext.createMediaElementSource(
-          playerApiRef.current.ref.current
-        )
-        sourceRef.current = source
-      }
-
-      if (!analyser) {
-        analyser = audioContext.createAnalyser()
-        analyser.fftSize = 512
-        analyser.smoothingTimeConstant = 0.7
-        analyserRef.current = analyser
-      }
-
-      const convolver = audioContext.createConvolver()
-      convolver.buffer = createImpulseResponse(audioContext, 6, 1.5)
-
-      const delay = audioContext.createDelay(2)
-      delay.delayTime.value = 0.001
-
-      const feedback = audioContext.createGain()
-      feedback.gain.value = 0.05
-
-      const lowPassFilter = audioContext.createBiquadFilter()
-      lowPassFilter.type = "lowpass"
-      lowPassFilter.frequency.value = 1500
-      lowPassFilter.Q.value = 0.5
-
-      const highPassFilter = audioContext.createBiquadFilter()
-      highPassFilter.type = "highpass"
-      highPassFilter.frequency.value = 100
-      highPassFilter.Q.value = 0.7
-
-      const wetGain = audioContext.createGain()
-      wetGain.gain.value = ambience ? 0.85 : 0
-
-      const dryGain = audioContext.createGain()
-      dryGain.gain.value = ambience ? 0.4 : 1
-
-      const masterGain = audioContext.createGain()
-      masterGain.gain.value = 1
-
-      const compressor = audioContext.createDynamicsCompressor()
-      compressor.threshold.value = -12
-      compressor.knee.value = 2
-      compressor.ratio.value = 8
-      compressor.attack.value = 0.003
-      compressor.release.value = 0.1
-
-      try {
-        source.disconnect()
-        if (analyserRef.current) analyserRef.current.disconnect()
-      } catch (e) {}
-
-      source.connect(dryGain)
-      dryGain.connect(masterGain)
-
-      source.connect(highPassFilter)
-      highPassFilter.connect(convolver)
-      convolver.connect(delay)
-
-      delay.connect(feedback)
-      feedback.connect(lowPassFilter)
-      lowPassFilter.connect(delay)
-
-      delay.connect(wetGain)
-      wetGain.connect(masterGain)
-
-      masterGain.connect(compressor)
-      compressor.connect(analyser)
-      analyser.connect(audioContext.destination)
-
-      convolverRef.current = convolver
-      delayRef.current = delay
-      feedbackRef.current = feedback
-      wetGainRef.current = wetGain
-      dryGainRef.current = dryGain
-      masterGainRef.current = masterGain
-      lowPassFilterRef.current = lowPassFilter
-      highPassFilterRef.current = highPassFilter
-    } catch (error) {
-      console.error("Error setting up audio context:", error)
-    }
-  }, [])
-
-  useEffect(() => {
-    const handlePlay = () => {
-      isPlayingRef.current = true
-      globalAudioState.isPlaying = true
-
-      if (!analyserRef.current) {
-        setTimeout(() => {
-          setupAudioContext(ambienceMode)
-        }, 100)
-      }
-    }
-    const handlePause = () => {
-      isPlayingRef.current = false
-      globalAudioState.isPlaying = false
-    }
-
-    const checkInterval = setInterval(() => {
-      const audioEl = playerApiRef.current.ref.current
-      if (audioEl) {
-        clearInterval(checkInterval)
-
-        audioEl.addEventListener("play", handlePlay)
-        audioEl.addEventListener("pause", handlePause)
-        audioEl.addEventListener("ended", handlePause)
-
-        if (!audioEl.paused) {
-          handlePlay()
-        }
-      }
-    }, 100)
-
-    return () => {
-      clearInterval(checkInterval)
-      const audioEl = playerApiRef.current.ref.current
-      if (audioEl) {
-        audioEl.removeEventListener("play", handlePlay)
-        audioEl.removeEventListener("pause", handlePause)
-        audioEl.removeEventListener("ended", handlePause)
-      }
-    }
-  }, [ambienceMode, setupAudioContext])
-
-  useEffect(() => {
-    globalAudioState.isDark = isDark
-  }, [isDark])
-
-  useEffect(() => {
-    if (playerApiRef.current.ref.current) {
-      playerApiRef.current.ref.current.volume = volume
-    }
-    globalAudioState.volume = volume
-  }, [volume])
-
-  useEffect(() => {
-    if (!audioContextRef.current) {
-      return
-    }
-
-    const targetWet = ambienceMode ? 0.7 : 0
-    const targetDry = ambienceMode ? 0.5 : 1
-    const currentTime = audioContextRef.current.currentTime
-
-    if (wetGainRef.current && dryGainRef.current) {
-      wetGainRef.current.gain.cancelScheduledValues(currentTime)
-      dryGainRef.current.gain.cancelScheduledValues(currentTime)
-
-      wetGainRef.current.gain.setValueAtTime(
-        wetGainRef.current.gain.value,
-        currentTime
-      )
-      dryGainRef.current.gain.setValueAtTime(
-        dryGainRef.current.gain.value,
-        currentTime
-      )
-
-      wetGainRef.current.gain.linearRampToValueAtTime(
-        targetWet,
-        currentTime + 0.5
-      )
-      dryGainRef.current.gain.linearRampToValueAtTime(
-        targetDry,
-        currentTime + 0.5
-      )
-    }
-
-    if (feedbackRef.current) {
-      feedbackRef.current.gain.cancelScheduledValues(currentTime)
-      feedbackRef.current.gain.setValueAtTime(
-        feedbackRef.current.gain.value,
-        currentTime
-      )
-      feedbackRef.current.gain.linearRampToValueAtTime(
-        ambienceMode ? 0.25 : 0.05,
-        currentTime + 0.5
-      )
-    }
-
-    if (delayRef.current) {
-      delayRef.current.delayTime.cancelScheduledValues(currentTime)
-      delayRef.current.delayTime.setValueAtTime(
-        delayRef.current.delayTime.value,
-        currentTime
-      )
-      delayRef.current.delayTime.linearRampToValueAtTime(
-        ambienceMode ? 0.25 : 0.001,
-        currentTime + 0.5
-      )
-    }
-
-    if (lowPassFilterRef.current) {
-      lowPassFilterRef.current.frequency.cancelScheduledValues(currentTime)
-      lowPassFilterRef.current.frequency.setValueAtTime(
-        lowPassFilterRef.current.frequency.value,
-        currentTime
-      )
-      lowPassFilterRef.current.frequency.linearRampToValueAtTime(
-        ambienceMode ? 800 : 1500,
-        currentTime + 0.5
-      )
-      lowPassFilterRef.current.Q.linearRampToValueAtTime(
-        ambienceMode ? 0.7 : 0.5,
-        currentTime + 0.5
-      )
-    }
-
-    if (highPassFilterRef.current) {
-      highPassFilterRef.current.frequency.cancelScheduledValues(currentTime)
-      highPassFilterRef.current.frequency.setValueAtTime(
-        highPassFilterRef.current.frequency.value,
-        currentTime
-      )
-      highPassFilterRef.current.frequency.linearRampToValueAtTime(
-        ambienceMode ? 200 : 100,
-        currentTime + 0.5
-      )
-    }
-
-    if (masterGainRef.current) {
-      masterGainRef.current.gain.cancelScheduledValues(currentTime)
-      masterGainRef.current.gain.setValueAtTime(
-        masterGainRef.current.gain.value,
-        currentTime
-      )
-      masterGainRef.current.gain.linearRampToValueAtTime(
-        ambienceMode ? 1.2 : 1,
-        currentTime + 0.5
-      )
-    }
-  }, [ambienceMode])
-
-  useEffect(() => {
-    if (!isScrubbing && !isMomentumActive && playerApiRef.current.ref.current) {
-      let animationId: number
-
-      const updatePosition = () => {
-        const audioEl = playerApiRef.current.ref.current
-        if (
-          audioEl &&
-          !isScrubbing &&
-          !isMomentumActive &&
-          waveformElementRef.current
-        ) {
-          const duration = audioEl.duration
-          const currentTime = audioEl.currentTime
-          if (!isNaN(duration) && duration > 0) {
-            const position = currentTime / duration
-            const containerWidth = containerWidthRef.current
-            const totalWidth = totalBarsRef.current * 5
-            const newOffset = containerWidth - position * totalWidth
-            waveformOffset.current = newOffset
-            waveformElementRef.current.style.transform = `translateX(${newOffset}px)`
-          }
-        }
-        animationId = requestAnimationFrame(updatePosition)
-      }
-
-      animationId = requestAnimationFrame(updatePosition)
-      return () => cancelAnimationFrame(animationId)
-    }
-  }, [isScrubbing, isMomentumActive])
-
-  useEffect(() => {
-    let animationId: number
-
-    const updateWaveform = () => {
-      if (analyserRef.current && isPlayingRef.current) {
-        const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount)
-        analyserRef.current.getByteFrequencyData(dataArray)
-
-        const normalizedData = Array.from(dataArray).map((value) => {
-          const normalized = value / 255
-          return normalized
-        })
-
-        audioDataRef.current = normalizedData
-      } else if (!isPlayingRef.current && audioDataRef.current.length > 0) {
-        audioDataRef.current = audioDataRef.current.map((v) => v * 0.9)
-      }
-
-      animationId = requestAnimationFrame(updateWaveform)
-    }
-
-    animationId = requestAnimationFrame(updateWaveform)
-
-    return () => {
-      if (animationId) {
-        cancelAnimationFrame(animationId)
-      }
-    }
-  }, [])
-
-  const playTrack = useCallback(
-    (index: number) => {
-      setCurrentTrackIndex(index)
-      const track = {
-        id: exampleTracks[index].id,
-        src: exampleTracks[index].url,
-        data: { name: exampleTracks[index].name },
-      }
-      playerApiRef.current.play(track)
-      setShowTrackList(false)
-      precomputeWaveform(track.src)
-    },
-    [precomputeWaveform]
-  )
-
-  const nextTrack = () => {
-    const nextIndex = (currentTrackIndex + 1) % exampleTracks.length
-    playTrack(nextIndex)
-  }
-
-  const prevTrack = () => {
-    const prevIndex =
-      (currentTrackIndex - 1 + exampleTracks.length) % exampleTracks.length
-    playTrack(prevIndex)
-  }
-
-  const playScratchSound = (position: number, speed: number = 1) => {
-    if (!audioContextRef.current) {
-      const audioContext = new (window.AudioContext ||
-        (window as unknown as { webkitAudioContext: typeof AudioContext })
-          .webkitAudioContext)()
-      audioContextRef.current = audioContext
-    }
-
-    if (audioContextRef.current.state === "suspended") {
-      audioContextRef.current.resume()
-    }
-
-    if (!audioBufferRef.current) {
-      return
-    }
-
-    stopScratchSound()
-
-    try {
-      const source = audioContextRef.current.createBufferSource()
-      source.buffer = audioBufferRef.current
-
-      const startTime = Math.max(
-        0,
-        Math.min(
-          audioBufferRef.current.duration - 0.1,
-          position * audioBufferRef.current.duration
-        )
-      )
-
-      const filter = audioContextRef.current.createBiquadFilter()
-      filter.type = "lowpass"
-      filter.frequency.value = Math.max(800, 2500 - speed * 1500)
-      filter.Q.value = 3
-
-      source.playbackRate.value = Math.max(0.4, Math.min(2.5, 1 + speed * 0.5))
-
-      const gainNode = audioContextRef.current.createGain()
-      gainNode.gain.value = 1.0
-
-      source.connect(filter)
-      filter.connect(gainNode)
-      gainNode.connect(audioContextRef.current.destination)
-
-      source.start(0, startTime, 0.06)
-
-      scratchBufferRef.current = source
-    } catch (error) {
-      console.error("Error playing scratch sound:", error)
-    }
-  }
-
-  const stopScratchSound = () => {
-    if (scratchBufferRef.current) {
-      try {
-        scratchBufferRef.current.stop()
-      } catch {}
-      scratchBufferRef.current = null
-    }
-  }
-
-  const tracks = exampleTracks.map((t) => ({
-    id: t.id,
-    title: t.name,
-    artist: "ElevenLabs Music",
-  }))
-  const currentTrack = tracks[currentTrackIndex]
-
-  return (
-    <Card className={cn("relative", className)}>
-      <div className="bg-muted-foreground/30 absolute top-0 left-1/2 h-3 w-48 -translate-x-1/2 rounded-b-full" />
-      <div className="bg-muted-foreground/20 absolute top-0 left-1/2 h-2 w-44 -translate-x-1/2 rounded-b-full" />
-
-      <div className="relative space-y-6 p-4">
-        <div className="border-border rounded-lg border bg-black/5 p-4 backdrop-blur-sm dark:bg-black/50">
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <div className="min-w-0 flex-1">
-                <h3 className="text-foreground truncate text-sm font-medium">
-                  {currentTrack.title}
-                </h3>
-                <Link
-                  href="https://elevenlabs.io/music"
-                  className="text-muted-foreground truncate text-xs"
-                >
-                  {currentTrack.artist}
-                </Link>
-              </div>
-              <div className="flex gap-1">
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className={cn(
-                    "h-8 w-8 transition-all",
-                    ambienceMode
-                      ? "text-primary hover:text-primary/80"
-                      : "text-muted-foreground hover:text-foreground"
-                  )}
-                  onClick={() => setAmbienceMode(!ambienceMode)}
-                >
-                  <Sparkles className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="text-muted-foreground hover:text-foreground h-8 w-8"
-                  onClick={() => setShowTrackList(!showTrackList)}
-                >
-                  <Music className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-
-            <div
-              className="waveform-container bg-foreground/10 relative h-12 cursor-grab overflow-hidden rounded-lg p-2 active:cursor-grabbing dark:bg-black/80"
-              onTouchStart={(e) => {
-                e.preventDefault()
-                setIsScrubbing(true)
-
-                const wasPlaying = isPlayingRef.current
-
-                if (isPlayingRef.current) {
-                  playerApiRef.current.pause()
-                }
-
-                const rect = e.currentTarget.getBoundingClientRect()
-                const startX = e.touches[0].clientX
-                const containerWidth = rect.width
-                containerWidthRef.current = containerWidth
-                const totalWidth = totalBarsRef.current * 5
-                const currentOffset = waveformOffset.current
-                let lastTouchX = startX
-                let lastScratchTime = 0
-                const scratchThrottle = 10
-
-                let velocity = 0
-                let lastTime = Date.now()
-                let lastClientX = e.touches[0].clientX
-
-                const handleMove = (e: TouchEvent) => {
-                  const touch = e.touches[0]
-                  const deltaX = touch.clientX - startX
-                  const newOffset = currentOffset + deltaX
-
-                  const minOffset = containerWidth - totalWidth
-                  const maxOffset = containerWidth
-                  const clampedOffset = Math.max(
-                    minOffset,
-                    Math.min(maxOffset, newOffset)
-                  )
-                  waveformOffset.current = clampedOffset
-                  if (waveformElementRef.current) {
-                    waveformElementRef.current.style.transform = `translateX(${clampedOffset}px)`
-                  }
-
-                  const position = Math.max(
-                    0,
-                    Math.min(1, (containerWidth - clampedOffset) / totalWidth)
-                  )
-
-                  const audioEl = playerApiRef.current.ref.current
-                  if (audioEl && !isNaN(audioEl.duration)) {
-                    audioEl.currentTime = position * audioEl.duration
-                  }
-
-                  const now = Date.now()
-                  const touchDelta = touch.clientX - lastTouchX
-
-                  const timeDelta = now - lastTime
-                  if (timeDelta > 0) {
-                    const instantVelocity =
-                      (touch.clientX - lastClientX) / timeDelta
-                    velocity = velocity * 0.6 + instantVelocity * 0.4
-                  }
-                  lastTime = now
-                  lastClientX = touch.clientX
-
-                  if (Math.abs(touchDelta) > 0) {
-                    if (now - lastScratchTime >= scratchThrottle) {
-                      const speed = Math.min(3, Math.abs(touchDelta) / 3)
-                      playScratchSound(position, speed)
-                      lastScratchTime = now
-                    }
-                  }
-                  lastTouchX = touch.clientX
-                }
-
-                const handleEnd = () => {
-                  setIsScrubbing(false)
-                  stopScratchSound()
-
-                  if (Math.abs(velocity) > 0.1) {
-                    setIsMomentumActive(true)
-                    let momentumOffset = waveformOffset.current
-                    let currentVelocity = velocity * 15
-                    const friction = 0.92
-                    const minVelocity = 0.5
-                    let lastScratchFrame = 0
-                    const scratchFrameInterval = 50
-
-                    const animateMomentum = () => {
-                      if (Math.abs(currentVelocity) > minVelocity) {
-                        momentumOffset += currentVelocity
-                        currentVelocity *= friction
-
-                        const minOffset = containerWidth - totalWidth
-                        const maxOffset = containerWidth
-                        const clampedOffset = Math.max(
-                          minOffset,
-                          Math.min(maxOffset, momentumOffset)
-                        )
-
-                        if (clampedOffset !== momentumOffset) {
-                          currentVelocity = 0
-                        }
-
-                        momentumOffset = clampedOffset
-                        waveformOffset.current = clampedOffset
-                        if (waveformElementRef.current) {
-                          waveformElementRef.current.style.transform = `translateX(${clampedOffset}px)`
-                        }
-
-                        const position = Math.max(
-                          0,
-                          Math.min(
-                            1,
-                            (containerWidth - clampedOffset) / totalWidth
-                          )
-                        )
-
-                        const audioEl2 = playerApiRef.current.ref.current
-                        if (audioEl2 && !isNaN(audioEl2.duration)) {
-                          audioEl2.currentTime = position * audioEl2.duration
-                        }
-
-                        const now = Date.now()
-                        if (now - lastScratchFrame >= scratchFrameInterval) {
-                          const speed = Math.min(
-                            2.5,
-                            Math.abs(currentVelocity) / 10
-                          )
-                          if (speed > 0.1) {
-                            playScratchSound(position, speed)
-                          }
-                          lastScratchFrame = now
-                        }
-
-                        requestAnimationFrame(animateMomentum)
-                      } else {
-                        stopScratchSound()
-                        setIsMomentumActive(false)
-                        if (wasPlaying) {
-                          setTimeout(() => {
-                            playerApiRef.current.play()
-                          }, 10)
-                        }
-                      }
-                    }
-
-                    requestAnimationFrame(animateMomentum)
-                  } else {
-                    if (wasPlaying) {
-                      playerApiRef.current.play()
-                    }
-                  }
-
-                  document.removeEventListener("touchmove", handleMove)
-                  document.removeEventListener("touchend", handleEnd)
-                }
-
-                document.addEventListener("touchmove", handleMove)
-                document.addEventListener("touchend", handleEnd)
-              }}
-              onMouseDown={(e) => {
-                e.preventDefault()
-                setIsScrubbing(true)
-
-                const wasPlaying = isPlayingRef.current
-
-                if (isPlayingRef.current) {
-                  playerApiRef.current.pause()
-                }
-
-                const rect = e.currentTarget.getBoundingClientRect()
-                const startX = e.clientX
-                const containerWidth = rect.width
-                containerWidthRef.current = containerWidth
-                const totalWidth = totalBarsRef.current * 5
-                const currentOffset = waveformOffset.current
-                let lastMouseX = startX
-                let lastScratchTime = 0
-                const scratchThrottle = 10
-
-                let velocity = 0
-                let lastTime = Date.now()
-                let lastClientX = e.clientX
-
-                const handleMove = (e: MouseEvent) => {
-                  const deltaX = e.clientX - startX
-                  const newOffset = currentOffset + deltaX
-
-                  const minOffset = containerWidth - totalWidth
-                  const maxOffset = containerWidth
-                  const clampedOffset = Math.max(
-                    minOffset,
-                    Math.min(maxOffset, newOffset)
-                  )
-                  waveformOffset.current = clampedOffset
-                  if (waveformElementRef.current) {
-                    waveformElementRef.current.style.transform = `translateX(${clampedOffset}px)`
-                  }
-
-                  const position = Math.max(
-                    0,
-                    Math.min(1, (containerWidth - clampedOffset) / totalWidth)
-                  )
-
-                  const audioEl = playerApiRef.current.ref.current
-                  if (audioEl && !isNaN(audioEl.duration)) {
-                    audioEl.currentTime = position * audioEl.duration
-                  }
-
-                  const now = Date.now()
-                  const mouseDelta = e.clientX - lastMouseX
-
-                  const timeDelta = now - lastTime
-                  if (timeDelta > 0) {
-                    const instantVelocity =
-                      (e.clientX - lastClientX) / timeDelta
-                    velocity = velocity * 0.6 + instantVelocity * 0.4
-                  }
-                  lastTime = now
-                  lastClientX = e.clientX
-
-                  if (Math.abs(mouseDelta) > 0) {
-                    if (now - lastScratchTime >= scratchThrottle) {
-                      const speed = Math.min(3, Math.abs(mouseDelta) / 3)
-                      playScratchSound(position, speed)
-                      lastScratchTime = now
-                    }
-                  }
-                  lastMouseX = e.clientX
-                }
-
-                const handleUp = () => {
-                  setIsScrubbing(false)
-                  stopScratchSound()
-
-                  if (Math.abs(velocity) > 0.1) {
-                    setIsMomentumActive(true)
-                    let momentumOffset = waveformOffset.current
-                    let currentVelocity = velocity * 15
-                    const friction = 0.92
-                    const minVelocity = 0.5
-                    let lastScratchFrame = 0
-                    const scratchFrameInterval = 50
-
-                    const animateMomentum = () => {
-                      if (Math.abs(currentVelocity) > minVelocity) {
-                        momentumOffset += currentVelocity
-                        currentVelocity *= friction
-
-                        const minOffset = containerWidth - totalWidth
-                        const maxOffset = containerWidth
-                        const clampedOffset = Math.max(
-                          minOffset,
-                          Math.min(maxOffset, momentumOffset)
-                        )
-
-                        if (clampedOffset !== momentumOffset) {
-                          currentVelocity = 0
-                        }
-
-                        momentumOffset = clampedOffset
-                        waveformOffset.current = clampedOffset
-                        if (waveformElementRef.current) {
-                          waveformElementRef.current.style.transform = `translateX(${clampedOffset}px)`
-                        }
-
-                        const position = Math.max(
-                          0,
-                          Math.min(
-                            1,
-                            (containerWidth - clampedOffset) / totalWidth
-                          )
-                        )
-
-                        const audioEl2 = playerApiRef.current.ref.current
-                        if (audioEl2 && !isNaN(audioEl2.duration)) {
-                          audioEl2.currentTime = position * audioEl2.duration
-                        }
-
-                        const now = Date.now()
-                        if (now - lastScratchFrame >= scratchFrameInterval) {
-                          const speed = Math.min(
-                            2.5,
-                            Math.abs(currentVelocity) / 10
-                          )
-                          if (speed > 0.1) {
-                            playScratchSound(position, speed)
-                          }
-                          lastScratchFrame = now
-                        }
-
-                        requestAnimationFrame(animateMomentum)
-                      } else {
-                        stopScratchSound()
-                        setIsMomentumActive(false)
-                        if (wasPlaying) {
-                          setTimeout(() => {
-                            playerApiRef.current.play()
-                          }, 10)
-                        }
-                      }
-                    }
-
-                    requestAnimationFrame(animateMomentum)
-                  } else {
-                    if (wasPlaying) {
-                      playerApiRef.current.play()
-                    }
-                  }
-
-                  document.removeEventListener("mousemove", handleMove)
-                  document.removeEventListener("mouseup", handleUp)
-                }
-
-                document.addEventListener("mousemove", handleMove)
-                document.addEventListener("mouseup", handleUp)
-              }}
-            >
-              <div className="relative h-full w-full overflow-hidden">
-                <div
-                  ref={waveformElementRef}
-                  style={{
-                    transform: `translateX(${waveformOffset.current}px)`,
-                    transition:
-                      isScrubbing || isMomentumActive
-                        ? "none"
-                        : "transform 0.016s linear",
-                    width: `${totalBarsRef.current * 5}px`,
-                    position: "absolute",
-                    left: 0,
-                  }}
-                >
-                  <Waveform
-                    key={isDark ? "dark" : "light"}
-                    data={
-                      precomputedWaveform.length > 0
-                        ? precomputedWaveform
-                        : audioDataRef.current
-                    }
-                    height={32}
-                    barWidth={3}
-                    barGap={2}
-                    fadeEdges={true}
-                    fadeWidth={24}
-                    barRadius={1}
-                    barColor={isDark ? "#a1a1aa" : "#71717a"}
-                  />
-                </div>
-              </div>
-            </div>
-
-            <TimeDisplay />
-          </div>
-        </div>
-
-        {showTrackList && (
-          <div className="bg-card/95 border-border absolute top-36 right-8 left-8 z-10 rounded-lg border p-3 shadow-xl backdrop-blur">
-            <h4 className="text-muted-foreground mb-2 font-mono text-xs tracking-wider uppercase">
-              Playlist
-            </h4>
-            <div className="max-h-32 space-y-1 overflow-y-auto">
-              {tracks.map((track, index) => (
-                <button
-                  key={track.id}
-                  onClick={() => playTrack(index)}
-                  className={cn(
-                    "w-full rounded px-2 py-1 text-left text-xs transition-all",
-                    currentTrackIndex === index
-                      ? "bg-foreground/10 text-foreground dark:bg-primary/20 dark:text-primary"
-                      : "hover:bg-muted text-muted-foreground"
-                  )}
-                >
-                  <div className="flex items-center gap-2">
-                    <span className="text-muted-foreground/60">
-                      {index + 1}
-                    </span>
-                    <div className="min-w-0 flex-1">
-                      <div className="truncate">{track.title}</div>
-                      <div className="text-muted-foreground/60 truncate text-xs">
-                        {track.artist}
-                      </div>
-                    </div>
-                  </div>
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
-
-        <div className="flex justify-center gap-3">
-          <Button
-            variant="outline"
-            size="icon"
-            className="border-border bg-background hover:bg-muted h-10 w-10 rounded-full"
-            onClick={prevTrack}
-          >
-            <SkipBack className="text-muted-foreground h-4 w-4" />
-          </Button>
-
-          <PlayButton currentTrackIndex={currentTrackIndex} />
-
-          <Button
-            variant="outline"
-            size="icon"
-            className="border-border bg-background hover:bg-muted h-10 w-10 rounded-full"
-            onClick={nextTrack}
-          >
-            <SkipForward className="text-muted-foreground h-4 w-4" />
-          </Button>
-        </div>
-
-        <SpeakerOrbsSection isDark={isDark} audioDataRef={audioDataRef} />
-
-        <VolumeSlider volume={volume} setVolume={setVolume} />
-      </div>
-    </Card>
-  )
+	const playerApiRef = playerRef;
+	const isPlayingRef = useRef(false);
+
+	const [volume, setVolume] = useState(0.7);
+	const [currentTrackIndex, setCurrentTrackIndex] = useState(0);
+	const [showTrackList, setShowTrackList] = useState(false);
+	const audioDataRef = useRef<number[]>([]);
+	const [isDark, setIsDark] = useState(false);
+	const [isScrubbing, setIsScrubbing] = useState(false);
+	const [isMomentumActive, setIsMomentumActive] = useState(false);
+	const [precomputedWaveform, setPrecomputedWaveform] = useState<number[]>([]);
+	const waveformOffset = useRef(0);
+	const waveformElementRef = useRef<HTMLDivElement>(null);
+	const [ambienceMode, setAmbienceMode] = useState(false);
+	const containerWidthRef = useRef(300);
+	const analyserRef = useRef<AnalyserNode | null>(null);
+	const audioContextRef = useRef<AudioContext | null>(null);
+	const sourceRef = useRef<MediaElementAudioSourceNode | null>(null);
+	const audioBufferRef = useRef<AudioBuffer | null>(null);
+	const scratchBufferRef = useRef<AudioBufferSourceNode | null>(null);
+	const totalBarsRef = useRef(600);
+	const convolverRef = useRef<ConvolverNode | null>(null);
+	const delayRef = useRef<DelayNode | null>(null);
+	const feedbackRef = useRef<GainNode | null>(null);
+	const wetGainRef = useRef<GainNode | null>(null);
+	const dryGainRef = useRef<GainNode | null>(null);
+	const masterGainRef = useRef<GainNode | null>(null);
+	const lowPassFilterRef = useRef<BiquadFilterNode | null>(null);
+	const highPassFilterRef = useRef<BiquadFilterNode | null>(null);
+
+	useEffect(() => {
+		const checkTheme = () => {
+			const isDarkMode = document.documentElement.classList.contains("dark");
+			setIsDark(isDarkMode);
+		};
+
+		checkTheme();
+
+		const observer = new MutationObserver(checkTheme);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["class"],
+		});
+
+		return () => observer.disconnect();
+	}, []);
+
+	useEffect(() => {
+		const container = document.querySelector(".waveform-container");
+		if (container) {
+			const rect = container.getBoundingClientRect();
+			containerWidthRef.current = rect.width;
+			waveformOffset.current = rect.width;
+			if (waveformElementRef.current) {
+				waveformElementRef.current.style.transform = `translateX(${rect.width}px)`;
+			}
+		}
+	}, []);
+
+	useEffect(() => {
+		if (precomputedWaveform.length > 0 && containerWidthRef.current > 0) {
+			waveformOffset.current = containerWidthRef.current;
+			if (waveformElementRef.current) {
+				waveformElementRef.current.style.transform = `translateX(${containerWidthRef.current}px)`;
+			}
+			if (playerApiRef.current.ref.current) {
+				playerApiRef.current.ref.current.currentTime = 0;
+			}
+		}
+	}, [precomputedWaveform]);
+
+	const precomputeWaveform = useCallback(async (audioUrl: string) => {
+		try {
+			const response = await fetch(audioUrl);
+			const arrayBuffer = await response.arrayBuffer();
+
+			const offlineContext = new OfflineAudioContext(1, 44100 * 5, 44100);
+			const audioBuffer = await offlineContext.decodeAudioData(
+				arrayBuffer.slice(0),
+			);
+
+			if (!audioContextRef.current) {
+				const audioContext = new (
+					window.AudioContext ||
+					(window as unknown as { webkitAudioContext: typeof AudioContext })
+						.webkitAudioContext
+				)();
+				audioContextRef.current = audioContext;
+			}
+
+			audioBufferRef.current =
+				await audioContextRef.current.decodeAudioData(arrayBuffer);
+
+			const channelData = audioBuffer.getChannelData(0);
+			const samplesPerBar = Math.floor(
+				channelData.length / totalBarsRef.current,
+			);
+			const waveformData: number[] = [];
+
+			for (let i = 0; i < totalBarsRef.current; i++) {
+				const start = i * samplesPerBar;
+				const end = start + samplesPerBar;
+				let sum = 0;
+				let count = 0;
+
+				for (let j = start; j < end && j < channelData.length; j += 100) {
+					sum += Math.abs(channelData[j]);
+					count++;
+				}
+
+				const average = count > 0 ? sum / count : 0;
+				waveformData.push(Math.min(1, average * 3));
+			}
+
+			setPrecomputedWaveform(waveformData);
+		} catch (error) {
+			console.error("Error precomputing waveform:", error);
+		}
+	}, []);
+
+	useEffect(() => {
+		const track = {
+			id: exampleTracks[0].id,
+			src: exampleTracks[0].url,
+			data: { name: exampleTracks[0].name },
+		};
+		playerApiRef.current.setActiveItem(track);
+		precomputeWaveform(track.src);
+	}, [precomputeWaveform]);
+
+	const createImpulseResponse = (
+		audioContext: AudioContext,
+		duration: number,
+		decay: number,
+	) => {
+		const sampleRate = audioContext.sampleRate;
+		const length = sampleRate * duration;
+		const impulse = audioContext.createBuffer(2, length, sampleRate);
+
+		for (let channel = 0; channel < 2; channel++) {
+			const channelData = impulse.getChannelData(channel);
+			for (let i = 0; i < length; i++) {
+				const envelope = Math.pow(1 - i / length, decay);
+				const earlyReflections = i < length * 0.1 ? Math.random() * 0.5 : 0;
+				const diffusion = (Math.random() * 2 - 1) * envelope;
+				const stereoWidth = channel === 0 ? 0.9 : 1.1;
+
+				channelData[i] = (diffusion + earlyReflections) * stereoWidth * 0.8;
+			}
+		}
+		return impulse;
+	};
+
+	const setupAudioContext = useCallback((ambience: boolean) => {
+		if (!playerApiRef.current.ref.current) {
+			return;
+		}
+
+		if (
+			audioContextRef.current &&
+			sourceRef.current &&
+			wetGainRef.current &&
+			dryGainRef.current
+		) {
+			return;
+		}
+
+		try {
+			let audioContext = audioContextRef.current;
+			let source = sourceRef.current;
+			let analyser = analyserRef.current;
+
+			if (!audioContext) {
+				audioContext = new (
+					window.AudioContext ||
+					(window as unknown as { webkitAudioContext: typeof AudioContext })
+						.webkitAudioContext
+				)();
+				audioContextRef.current = audioContext;
+			}
+
+			if (audioContext.state === "suspended") {
+				audioContext.resume();
+			}
+
+			if (!source) {
+				source = audioContext.createMediaElementSource(
+					playerApiRef.current.ref.current,
+				);
+				sourceRef.current = source;
+			}
+
+			if (!analyser) {
+				analyser = audioContext.createAnalyser();
+				analyser.fftSize = 512;
+				analyser.smoothingTimeConstant = 0.7;
+				analyserRef.current = analyser;
+			}
+
+			const convolver = audioContext.createConvolver();
+			convolver.buffer = createImpulseResponse(audioContext, 6, 1.5);
+
+			const delay = audioContext.createDelay(2);
+			delay.delayTime.value = 0.001;
+
+			const feedback = audioContext.createGain();
+			feedback.gain.value = 0.05;
+
+			const lowPassFilter = audioContext.createBiquadFilter();
+			lowPassFilter.type = "lowpass";
+			lowPassFilter.frequency.value = 1500;
+			lowPassFilter.Q.value = 0.5;
+
+			const highPassFilter = audioContext.createBiquadFilter();
+			highPassFilter.type = "highpass";
+			highPassFilter.frequency.value = 100;
+			highPassFilter.Q.value = 0.7;
+
+			const wetGain = audioContext.createGain();
+			wetGain.gain.value = ambience ? 0.85 : 0;
+
+			const dryGain = audioContext.createGain();
+			dryGain.gain.value = ambience ? 0.4 : 1;
+
+			const masterGain = audioContext.createGain();
+			masterGain.gain.value = 1;
+
+			const compressor = audioContext.createDynamicsCompressor();
+			compressor.threshold.value = -12;
+			compressor.knee.value = 2;
+			compressor.ratio.value = 8;
+			compressor.attack.value = 0.003;
+			compressor.release.value = 0.1;
+
+			try {
+				source.disconnect();
+				if (analyserRef.current) analyserRef.current.disconnect();
+			} catch (e) {}
+
+			source.connect(dryGain);
+			dryGain.connect(masterGain);
+
+			source.connect(highPassFilter);
+			highPassFilter.connect(convolver);
+			convolver.connect(delay);
+
+			delay.connect(feedback);
+			feedback.connect(lowPassFilter);
+			lowPassFilter.connect(delay);
+
+			delay.connect(wetGain);
+			wetGain.connect(masterGain);
+
+			masterGain.connect(compressor);
+			compressor.connect(analyser);
+			analyser.connect(audioContext.destination);
+
+			convolverRef.current = convolver;
+			delayRef.current = delay;
+			feedbackRef.current = feedback;
+			wetGainRef.current = wetGain;
+			dryGainRef.current = dryGain;
+			masterGainRef.current = masterGain;
+			lowPassFilterRef.current = lowPassFilter;
+			highPassFilterRef.current = highPassFilter;
+		} catch (error) {
+			console.error("Error setting up audio context:", error);
+		}
+	}, []);
+
+	useEffect(() => {
+		const handlePlay = () => {
+			isPlayingRef.current = true;
+			globalAudioState.isPlaying = true;
+
+			if (!analyserRef.current) {
+				setTimeout(() => {
+					setupAudioContext(ambienceMode);
+				}, 100);
+			}
+		};
+		const handlePause = () => {
+			isPlayingRef.current = false;
+			globalAudioState.isPlaying = false;
+		};
+
+		const checkInterval = setInterval(() => {
+			const audioEl = playerApiRef.current.ref.current;
+			if (audioEl) {
+				clearInterval(checkInterval);
+
+				audioEl.addEventListener("play", handlePlay);
+				audioEl.addEventListener("pause", handlePause);
+				audioEl.addEventListener("ended", handlePause);
+
+				if (!audioEl.paused) {
+					handlePlay();
+				}
+			}
+		}, 100);
+
+		return () => {
+			clearInterval(checkInterval);
+			const audioEl = playerApiRef.current.ref.current;
+			if (audioEl) {
+				audioEl.removeEventListener("play", handlePlay);
+				audioEl.removeEventListener("pause", handlePause);
+				audioEl.removeEventListener("ended", handlePause);
+			}
+		};
+	}, [ambienceMode, setupAudioContext]);
+
+	useEffect(() => {
+		globalAudioState.isDark = isDark;
+	}, [isDark]);
+
+	useEffect(() => {
+		if (playerApiRef.current.ref.current) {
+			playerApiRef.current.ref.current.volume = volume;
+		}
+		globalAudioState.volume = volume;
+	}, [volume]);
+
+	useEffect(() => {
+		if (!audioContextRef.current) {
+			return;
+		}
+
+		const targetWet = ambienceMode ? 0.7 : 0;
+		const targetDry = ambienceMode ? 0.5 : 1;
+		const currentTime = audioContextRef.current.currentTime;
+
+		if (wetGainRef.current && dryGainRef.current) {
+			wetGainRef.current.gain.cancelScheduledValues(currentTime);
+			dryGainRef.current.gain.cancelScheduledValues(currentTime);
+
+			wetGainRef.current.gain.setValueAtTime(
+				wetGainRef.current.gain.value,
+				currentTime,
+			);
+			dryGainRef.current.gain.setValueAtTime(
+				dryGainRef.current.gain.value,
+				currentTime,
+			);
+
+			wetGainRef.current.gain.linearRampToValueAtTime(
+				targetWet,
+				currentTime + 0.5,
+			);
+			dryGainRef.current.gain.linearRampToValueAtTime(
+				targetDry,
+				currentTime + 0.5,
+			);
+		}
+
+		if (feedbackRef.current) {
+			feedbackRef.current.gain.cancelScheduledValues(currentTime);
+			feedbackRef.current.gain.setValueAtTime(
+				feedbackRef.current.gain.value,
+				currentTime,
+			);
+			feedbackRef.current.gain.linearRampToValueAtTime(
+				ambienceMode ? 0.25 : 0.05,
+				currentTime + 0.5,
+			);
+		}
+
+		if (delayRef.current) {
+			delayRef.current.delayTime.cancelScheduledValues(currentTime);
+			delayRef.current.delayTime.setValueAtTime(
+				delayRef.current.delayTime.value,
+				currentTime,
+			);
+			delayRef.current.delayTime.linearRampToValueAtTime(
+				ambienceMode ? 0.25 : 0.001,
+				currentTime + 0.5,
+			);
+		}
+
+		if (lowPassFilterRef.current) {
+			lowPassFilterRef.current.frequency.cancelScheduledValues(currentTime);
+			lowPassFilterRef.current.frequency.setValueAtTime(
+				lowPassFilterRef.current.frequency.value,
+				currentTime,
+			);
+			lowPassFilterRef.current.frequency.linearRampToValueAtTime(
+				ambienceMode ? 800 : 1500,
+				currentTime + 0.5,
+			);
+			lowPassFilterRef.current.Q.linearRampToValueAtTime(
+				ambienceMode ? 0.7 : 0.5,
+				currentTime + 0.5,
+			);
+		}
+
+		if (highPassFilterRef.current) {
+			highPassFilterRef.current.frequency.cancelScheduledValues(currentTime);
+			highPassFilterRef.current.frequency.setValueAtTime(
+				highPassFilterRef.current.frequency.value,
+				currentTime,
+			);
+			highPassFilterRef.current.frequency.linearRampToValueAtTime(
+				ambienceMode ? 200 : 100,
+				currentTime + 0.5,
+			);
+		}
+
+		if (masterGainRef.current) {
+			masterGainRef.current.gain.cancelScheduledValues(currentTime);
+			masterGainRef.current.gain.setValueAtTime(
+				masterGainRef.current.gain.value,
+				currentTime,
+			);
+			masterGainRef.current.gain.linearRampToValueAtTime(
+				ambienceMode ? 1.2 : 1,
+				currentTime + 0.5,
+			);
+		}
+	}, [ambienceMode]);
+
+	useEffect(() => {
+		if (!isScrubbing && !isMomentumActive && playerApiRef.current.ref.current) {
+			let animationId: number;
+
+			const updatePosition = () => {
+				const audioEl = playerApiRef.current.ref.current;
+				if (
+					audioEl &&
+					!isScrubbing &&
+					!isMomentumActive &&
+					waveformElementRef.current
+				) {
+					const duration = audioEl.duration;
+					const currentTime = audioEl.currentTime;
+					if (!isNaN(duration) && duration > 0) {
+						const position = currentTime / duration;
+						const containerWidth = containerWidthRef.current;
+						const totalWidth = totalBarsRef.current * 5;
+						const newOffset = containerWidth - position * totalWidth;
+						waveformOffset.current = newOffset;
+						waveformElementRef.current.style.transform = `translateX(${newOffset}px)`;
+					}
+				}
+				animationId = requestAnimationFrame(updatePosition);
+			};
+
+			animationId = requestAnimationFrame(updatePosition);
+			return () => cancelAnimationFrame(animationId);
+		}
+	}, [isScrubbing, isMomentumActive]);
+
+	useEffect(() => {
+		let animationId: number;
+
+		const updateWaveform = () => {
+			if (analyserRef.current && isPlayingRef.current) {
+				const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount);
+				analyserRef.current.getByteFrequencyData(dataArray);
+
+				const normalizedData = Array.from(dataArray).map((value) => {
+					const normalized = value / 255;
+					return normalized;
+				});
+
+				audioDataRef.current = normalizedData;
+			} else if (!isPlayingRef.current && audioDataRef.current.length > 0) {
+				audioDataRef.current = audioDataRef.current.map((v) => v * 0.9);
+			}
+
+			animationId = requestAnimationFrame(updateWaveform);
+		};
+
+		animationId = requestAnimationFrame(updateWaveform);
+
+		return () => {
+			if (animationId) {
+				cancelAnimationFrame(animationId);
+			}
+		};
+	}, []);
+
+	const playTrack = useCallback(
+		(index: number) => {
+			setCurrentTrackIndex(index);
+			const track = {
+				id: exampleTracks[index].id,
+				src: exampleTracks[index].url,
+				data: { name: exampleTracks[index].name },
+			};
+			playerApiRef.current.play(track);
+			setShowTrackList(false);
+			precomputeWaveform(track.src);
+		},
+		[precomputeWaveform],
+	);
+
+	const nextTrack = () => {
+		const nextIndex = (currentTrackIndex + 1) % exampleTracks.length;
+		playTrack(nextIndex);
+	};
+
+	const prevTrack = () => {
+		const prevIndex =
+			(currentTrackIndex - 1 + exampleTracks.length) % exampleTracks.length;
+		playTrack(prevIndex);
+	};
+
+	const playScratchSound = (position: number, speed: number = 1) => {
+		if (!audioContextRef.current) {
+			const audioContext = new (
+				window.AudioContext ||
+				(window as unknown as { webkitAudioContext: typeof AudioContext })
+					.webkitAudioContext
+			)();
+			audioContextRef.current = audioContext;
+		}
+
+		if (audioContextRef.current.state === "suspended") {
+			audioContextRef.current.resume();
+		}
+
+		if (!audioBufferRef.current) {
+			return;
+		}
+
+		stopScratchSound();
+
+		try {
+			const source = audioContextRef.current.createBufferSource();
+			source.buffer = audioBufferRef.current;
+
+			const startTime = Math.max(
+				0,
+				Math.min(
+					audioBufferRef.current.duration - 0.1,
+					position * audioBufferRef.current.duration,
+				),
+			);
+
+			const filter = audioContextRef.current.createBiquadFilter();
+			filter.type = "lowpass";
+			filter.frequency.value = Math.max(800, 2500 - speed * 1500);
+			filter.Q.value = 3;
+
+			source.playbackRate.value = Math.max(0.4, Math.min(2.5, 1 + speed * 0.5));
+
+			const gainNode = audioContextRef.current.createGain();
+			gainNode.gain.value = 1.0;
+
+			source.connect(filter);
+			filter.connect(gainNode);
+			gainNode.connect(audioContextRef.current.destination);
+
+			source.start(0, startTime, 0.06);
+
+			scratchBufferRef.current = source;
+		} catch (error) {
+			console.error("Error playing scratch sound:", error);
+		}
+	};
+
+	const stopScratchSound = () => {
+		if (scratchBufferRef.current) {
+			try {
+				scratchBufferRef.current.stop();
+			} catch {}
+			scratchBufferRef.current = null;
+		}
+	};
+
+	const tracks = exampleTracks.map((t) => ({
+		id: t.id,
+		title: t.name,
+		artist: "ElevenLabs Music",
+	}));
+	const currentTrack = tracks[currentTrackIndex];
+
+	return (
+		<Card className={cn("relative", className)}>
+			<div className="bg-muted-foreground/30 absolute top-0 left-1/2 h-3 w-48 -translate-x-1/2 rounded-b-full" />
+			<div className="bg-muted-foreground/20 absolute top-0 left-1/2 h-2 w-44 -translate-x-1/2 rounded-b-full" />
+
+			<div className="relative space-y-6 p-4">
+				<div className="border-border rounded-lg border bg-black/5 p-4 backdrop-blur-sm dark:bg-black/50">
+					<div className="space-y-2">
+						<div className="flex items-center justify-between">
+							<div className="min-w-0 flex-1">
+								<h3 className="text-foreground truncate text-sm font-medium">
+									{currentTrack.title}
+								</h3>
+								<Link
+									href="https://elevenmusic.link/ui"
+									className="text-muted-foreground truncate text-xs"
+								>
+									{currentTrack.artist}
+								</Link>
+							</div>
+							<div className="flex gap-1">
+								<Button
+									variant="ghost"
+									size="icon"
+									className={cn(
+										"h-8 w-8 transition-all",
+										ambienceMode
+											? "text-primary hover:text-primary/80"
+											: "text-muted-foreground hover:text-foreground",
+									)}
+									onClick={() => setAmbienceMode(!ambienceMode)}
+								>
+									<Sparkles className="h-4 w-4" />
+								</Button>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="text-muted-foreground hover:text-foreground h-8 w-8"
+									onClick={() => setShowTrackList(!showTrackList)}
+								>
+									<Music className="h-4 w-4" />
+								</Button>
+							</div>
+						</div>
+
+						<div
+							className="waveform-container bg-foreground/10 relative h-12 cursor-grab overflow-hidden rounded-lg p-2 active:cursor-grabbing dark:bg-black/80"
+							onTouchStart={(e) => {
+								e.preventDefault();
+								setIsScrubbing(true);
+
+								const wasPlaying = isPlayingRef.current;
+
+								if (isPlayingRef.current) {
+									playerApiRef.current.pause();
+								}
+
+								const rect = e.currentTarget.getBoundingClientRect();
+								const startX = e.touches[0].clientX;
+								const containerWidth = rect.width;
+								containerWidthRef.current = containerWidth;
+								const totalWidth = totalBarsRef.current * 5;
+								const currentOffset = waveformOffset.current;
+								let lastTouchX = startX;
+								let lastScratchTime = 0;
+								const scratchThrottle = 10;
+
+								let velocity = 0;
+								let lastTime = Date.now();
+								let lastClientX = e.touches[0].clientX;
+
+								const handleMove = (e: TouchEvent) => {
+									const touch = e.touches[0];
+									const deltaX = touch.clientX - startX;
+									const newOffset = currentOffset + deltaX;
+
+									const minOffset = containerWidth - totalWidth;
+									const maxOffset = containerWidth;
+									const clampedOffset = Math.max(
+										minOffset,
+										Math.min(maxOffset, newOffset),
+									);
+									waveformOffset.current = clampedOffset;
+									if (waveformElementRef.current) {
+										waveformElementRef.current.style.transform = `translateX(${clampedOffset}px)`;
+									}
+
+									const position = Math.max(
+										0,
+										Math.min(1, (containerWidth - clampedOffset) / totalWidth),
+									);
+
+									const audioEl = playerApiRef.current.ref.current;
+									if (audioEl && !isNaN(audioEl.duration)) {
+										audioEl.currentTime = position * audioEl.duration;
+									}
+
+									const now = Date.now();
+									const touchDelta = touch.clientX - lastTouchX;
+
+									const timeDelta = now - lastTime;
+									if (timeDelta > 0) {
+										const instantVelocity =
+											(touch.clientX - lastClientX) / timeDelta;
+										velocity = velocity * 0.6 + instantVelocity * 0.4;
+									}
+									lastTime = now;
+									lastClientX = touch.clientX;
+
+									if (Math.abs(touchDelta) > 0) {
+										if (now - lastScratchTime >= scratchThrottle) {
+											const speed = Math.min(3, Math.abs(touchDelta) / 3);
+											playScratchSound(position, speed);
+											lastScratchTime = now;
+										}
+									}
+									lastTouchX = touch.clientX;
+								};
+
+								const handleEnd = () => {
+									setIsScrubbing(false);
+									stopScratchSound();
+
+									if (Math.abs(velocity) > 0.1) {
+										setIsMomentumActive(true);
+										let momentumOffset = waveformOffset.current;
+										let currentVelocity = velocity * 15;
+										const friction = 0.92;
+										const minVelocity = 0.5;
+										let lastScratchFrame = 0;
+										const scratchFrameInterval = 50;
+
+										const animateMomentum = () => {
+											if (Math.abs(currentVelocity) > minVelocity) {
+												momentumOffset += currentVelocity;
+												currentVelocity *= friction;
+
+												const minOffset = containerWidth - totalWidth;
+												const maxOffset = containerWidth;
+												const clampedOffset = Math.max(
+													minOffset,
+													Math.min(maxOffset, momentumOffset),
+												);
+
+												if (clampedOffset !== momentumOffset) {
+													currentVelocity = 0;
+												}
+
+												momentumOffset = clampedOffset;
+												waveformOffset.current = clampedOffset;
+												if (waveformElementRef.current) {
+													waveformElementRef.current.style.transform = `translateX(${clampedOffset}px)`;
+												}
+
+												const position = Math.max(
+													0,
+													Math.min(
+														1,
+														(containerWidth - clampedOffset) / totalWidth,
+													),
+												);
+
+												const audioEl2 = playerApiRef.current.ref.current;
+												if (audioEl2 && !isNaN(audioEl2.duration)) {
+													audioEl2.currentTime = position * audioEl2.duration;
+												}
+
+												const now = Date.now();
+												if (now - lastScratchFrame >= scratchFrameInterval) {
+													const speed = Math.min(
+														2.5,
+														Math.abs(currentVelocity) / 10,
+													);
+													if (speed > 0.1) {
+														playScratchSound(position, speed);
+													}
+													lastScratchFrame = now;
+												}
+
+												requestAnimationFrame(animateMomentum);
+											} else {
+												stopScratchSound();
+												setIsMomentumActive(false);
+												if (wasPlaying) {
+													setTimeout(() => {
+														playerApiRef.current.play();
+													}, 10);
+												}
+											}
+										};
+
+										requestAnimationFrame(animateMomentum);
+									} else {
+										if (wasPlaying) {
+											playerApiRef.current.play();
+										}
+									}
+
+									document.removeEventListener("touchmove", handleMove);
+									document.removeEventListener("touchend", handleEnd);
+								};
+
+								document.addEventListener("touchmove", handleMove);
+								document.addEventListener("touchend", handleEnd);
+							}}
+							onMouseDown={(e) => {
+								e.preventDefault();
+								setIsScrubbing(true);
+
+								const wasPlaying = isPlayingRef.current;
+
+								if (isPlayingRef.current) {
+									playerApiRef.current.pause();
+								}
+
+								const rect = e.currentTarget.getBoundingClientRect();
+								const startX = e.clientX;
+								const containerWidth = rect.width;
+								containerWidthRef.current = containerWidth;
+								const totalWidth = totalBarsRef.current * 5;
+								const currentOffset = waveformOffset.current;
+								let lastMouseX = startX;
+								let lastScratchTime = 0;
+								const scratchThrottle = 10;
+
+								let velocity = 0;
+								let lastTime = Date.now();
+								let lastClientX = e.clientX;
+
+								const handleMove = (e: MouseEvent) => {
+									const deltaX = e.clientX - startX;
+									const newOffset = currentOffset + deltaX;
+
+									const minOffset = containerWidth - totalWidth;
+									const maxOffset = containerWidth;
+									const clampedOffset = Math.max(
+										minOffset,
+										Math.min(maxOffset, newOffset),
+									);
+									waveformOffset.current = clampedOffset;
+									if (waveformElementRef.current) {
+										waveformElementRef.current.style.transform = `translateX(${clampedOffset}px)`;
+									}
+
+									const position = Math.max(
+										0,
+										Math.min(1, (containerWidth - clampedOffset) / totalWidth),
+									);
+
+									const audioEl = playerApiRef.current.ref.current;
+									if (audioEl && !isNaN(audioEl.duration)) {
+										audioEl.currentTime = position * audioEl.duration;
+									}
+
+									const now = Date.now();
+									const mouseDelta = e.clientX - lastMouseX;
+
+									const timeDelta = now - lastTime;
+									if (timeDelta > 0) {
+										const instantVelocity =
+											(e.clientX - lastClientX) / timeDelta;
+										velocity = velocity * 0.6 + instantVelocity * 0.4;
+									}
+									lastTime = now;
+									lastClientX = e.clientX;
+
+									if (Math.abs(mouseDelta) > 0) {
+										if (now - lastScratchTime >= scratchThrottle) {
+											const speed = Math.min(3, Math.abs(mouseDelta) / 3);
+											playScratchSound(position, speed);
+											lastScratchTime = now;
+										}
+									}
+									lastMouseX = e.clientX;
+								};
+
+								const handleUp = () => {
+									setIsScrubbing(false);
+									stopScratchSound();
+
+									if (Math.abs(velocity) > 0.1) {
+										setIsMomentumActive(true);
+										let momentumOffset = waveformOffset.current;
+										let currentVelocity = velocity * 15;
+										const friction = 0.92;
+										const minVelocity = 0.5;
+										let lastScratchFrame = 0;
+										const scratchFrameInterval = 50;
+
+										const animateMomentum = () => {
+											if (Math.abs(currentVelocity) > minVelocity) {
+												momentumOffset += currentVelocity;
+												currentVelocity *= friction;
+
+												const minOffset = containerWidth - totalWidth;
+												const maxOffset = containerWidth;
+												const clampedOffset = Math.max(
+													minOffset,
+													Math.min(maxOffset, momentumOffset),
+												);
+
+												if (clampedOffset !== momentumOffset) {
+													currentVelocity = 0;
+												}
+
+												momentumOffset = clampedOffset;
+												waveformOffset.current = clampedOffset;
+												if (waveformElementRef.current) {
+													waveformElementRef.current.style.transform = `translateX(${clampedOffset}px)`;
+												}
+
+												const position = Math.max(
+													0,
+													Math.min(
+														1,
+														(containerWidth - clampedOffset) / totalWidth,
+													),
+												);
+
+												const audioEl2 = playerApiRef.current.ref.current;
+												if (audioEl2 && !isNaN(audioEl2.duration)) {
+													audioEl2.currentTime = position * audioEl2.duration;
+												}
+
+												const now = Date.now();
+												if (now - lastScratchFrame >= scratchFrameInterval) {
+													const speed = Math.min(
+														2.5,
+														Math.abs(currentVelocity) / 10,
+													);
+													if (speed > 0.1) {
+														playScratchSound(position, speed);
+													}
+													lastScratchFrame = now;
+												}
+
+												requestAnimationFrame(animateMomentum);
+											} else {
+												stopScratchSound();
+												setIsMomentumActive(false);
+												if (wasPlaying) {
+													setTimeout(() => {
+														playerApiRef.current.play();
+													}, 10);
+												}
+											}
+										};
+
+										requestAnimationFrame(animateMomentum);
+									} else {
+										if (wasPlaying) {
+											playerApiRef.current.play();
+										}
+									}
+
+									document.removeEventListener("mousemove", handleMove);
+									document.removeEventListener("mouseup", handleUp);
+								};
+
+								document.addEventListener("mousemove", handleMove);
+								document.addEventListener("mouseup", handleUp);
+							}}
+						>
+							<div className="relative h-full w-full overflow-hidden">
+								<div
+									ref={waveformElementRef}
+									style={{
+										transform: `translateX(${waveformOffset.current}px)`,
+										transition:
+											isScrubbing || isMomentumActive
+												? "none"
+												: "transform 0.016s linear",
+										width: `${totalBarsRef.current * 5}px`,
+										position: "absolute",
+										left: 0,
+									}}
+								>
+									<Waveform
+										key={isDark ? "dark" : "light"}
+										data={
+											precomputedWaveform.length > 0
+												? precomputedWaveform
+												: audioDataRef.current
+										}
+										height={32}
+										barWidth={3}
+										barGap={2}
+										fadeEdges={true}
+										fadeWidth={24}
+										barRadius={1}
+										barColor={isDark ? "#a1a1aa" : "#71717a"}
+									/>
+								</div>
+							</div>
+						</div>
+
+						<TimeDisplay />
+					</div>
+				</div>
+
+				{showTrackList && (
+					<div className="bg-card/95 border-border absolute top-36 right-8 left-8 z-10 rounded-lg border p-3 shadow-xl backdrop-blur">
+						<h4 className="text-muted-foreground mb-2 font-mono text-xs tracking-wider uppercase">
+							Playlist
+						</h4>
+						<div className="max-h-32 space-y-1 overflow-y-auto">
+							{tracks.map((track, index) => (
+								<button
+									key={track.id}
+									onClick={() => playTrack(index)}
+									className={cn(
+										"w-full rounded px-2 py-1 text-left text-xs transition-all",
+										currentTrackIndex === index
+											? "bg-foreground/10 text-foreground dark:bg-primary/20 dark:text-primary"
+											: "hover:bg-muted text-muted-foreground",
+									)}
+								>
+									<div className="flex items-center gap-2">
+										<span className="text-muted-foreground/60">
+											{index + 1}
+										</span>
+										<div className="min-w-0 flex-1">
+											<div className="truncate">{track.title}</div>
+											<div className="text-muted-foreground/60 truncate text-xs">
+												{track.artist}
+											</div>
+										</div>
+									</div>
+								</button>
+							))}
+						</div>
+					</div>
+				)}
+
+				<div className="flex justify-center gap-3">
+					<Button
+						variant="outline"
+						size="icon"
+						className="border-border bg-background hover:bg-muted h-10 w-10 rounded-full"
+						onClick={prevTrack}
+					>
+						<SkipBack className="text-muted-foreground h-4 w-4" />
+					</Button>
+
+					<PlayButton currentTrackIndex={currentTrackIndex} />
+
+					<Button
+						variant="outline"
+						size="icon"
+						className="border-border bg-background hover:bg-muted h-10 w-10 rounded-full"
+						onClick={nextTrack}
+					>
+						<SkipForward className="text-muted-foreground h-4 w-4" />
+					</Button>
+				</div>
+
+				<SpeakerOrbsSection isDark={isDark} audioDataRef={audioDataRef} />
+
+				<VolumeSlider volume={volume} setVolume={setVolume} />
+			</div>
+		</Card>
+	);
 }
diff --git a/apps/www/styles/globals.css b/apps/www/styles/globals.css
index 772953f4..88a836b8 100644
--- a/apps/www/styles/globals.css
+++ b/apps/www/styles/globals.css
@@ -221,6 +221,25 @@
   }
 }
 
+@keyframes music-eq {
+  0% {
+    transform: scaleY(0.3);
+  }
+  100% {
+    transform: scaleY(1);
+  }
+}
+
+@keyframes banner-shimmer {
+  0%,
+  100% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+}
+
 @keyframes fade-in {
   from {
     opacity: 0;

From e27efab885d6631ab7f8298ec8fba4b700f55ede Mon Sep 17 00:00:00 2001
From: Louis Jordan <louisjoecodes@gmail.com>
Date: Thu, 12 Mar 2026 14:20:40 +0000
Subject: [PATCH 2/3] feat: add music banner

---
 apps/www/components/music-banner.tsx | 245 +++++++++++++++++++++------
 apps/www/styles/globals.css          |  19 ---
 2 files changed, 192 insertions(+), 72 deletions(-)

diff --git a/apps/www/components/music-banner.tsx b/apps/www/components/music-banner.tsx
index c6f7666d..456742d5 100644
--- a/apps/www/components/music-banner.tsx
+++ b/apps/www/components/music-banner.tsx
@@ -22,19 +22,175 @@ function ElevenMusicWordmark({ className }: { className?: string }) {
 	);
 }
 
-function EqualizerBars() {
+// Detect dark mode from the DOM
+function isDarkMode() {
+	if (typeof document === "undefined") return true;
+	return document.documentElement.classList.contains("dark");
+}
+
+// Theme-aware color palettes
+const THEME_COLORS = {
+	dark: {
+		rings: [
+			["229, 108, 97", "212, 143, 160"],
+			["195, 141, 194", "170, 130, 200"],
+			["139, 126, 200", "160, 150, 210"],
+			["200, 169, 204", "229, 108, 97"],
+		],
+		highlight: "255, 255, 255",
+		glowMultiplier: 1,
+		alphaBase: 0.3,
+	},
+	light: {
+		rings: [
+			["180, 70, 60", "170, 100, 120"],
+			["150, 100, 155", "130, 90, 160"],
+			["100, 85, 165", "120, 110, 175"],
+			["160, 125, 165", "180, 70, 60"],
+		],
+		highlight: "0, 0, 0",
+		glowMultiplier: 0.6,
+		alphaBase: 0.2,
+	},
+} as const;
+
+function SonicRippleCanvas({ className }: { className?: string }) {
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const animRef = useRef<number>(0);
+
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) return;
+
+		const dpr = window.devicePixelRatio || 1;
+		const rect = container.getBoundingClientRect();
+		canvas.width = rect.width * dpr;
+		canvas.height = rect.height * dpr;
+		canvas.style.width = `${rect.width}px`;
+		canvas.style.height = `${rect.height}px`;
+
+		const ctx = canvas.getContext("2d")!;
+		ctx.scale(dpr, dpr);
+
+		const cx = rect.width / 2;
+		const cy = rect.height / 2;
+		const maxR = Math.max(rect.width, rect.height) * 0.8;
+
+		const rings: Array<{ r: number; birth: number; colorIdx: number }> = [];
+		let lastSpawn = 0;
+		const spawnInterval = 1100;
+		let colorCounter = 0;
+		const startTime = performance.now();
+
+		// Read theme once at mount, and listen for changes
+		let theme = isDarkMode() ? THEME_COLORS.dark : THEME_COLORS.light;
+
+		const observer = new MutationObserver(() => {
+			theme = isDarkMode() ? THEME_COLORS.dark : THEME_COLORS.light;
+		});
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["class"],
+		});
+
+		const easeOut = (t: number) => 1 - (1 - t) * (1 - t) * (1 - t);
+
+		const animate = (t: number) => {
+			ctx.clearRect(0, 0, rect.width, rect.height);
+
+			// Global fade-in over first 1s
+			const elapsed = t - startTime;
+			const globalAlpha = Math.min(1, elapsed / 1000);
+
+			if (t - lastSpawn > spawnInterval) {
+				rings.push({ r: 0, birth: t, colorIdx: colorCounter });
+				colorCounter = (colorCounter + 1) % theme.rings.length;
+				lastSpawn = t;
+			}
+
+			for (let i = rings.length - 1; i >= 0; i--) {
+				const ring = rings[i];
+				const age = (t - ring.birth) / 1000;
+				const progress = Math.min(1, (age * 60) / maxR);
+
+				ring.r = easeOut(progress) * maxR;
+
+				if (ring.r > maxR) {
+					rings.splice(i, 1);
+					continue;
+				}
+
+				const life = 1 - ring.r / maxR;
+				const fadeIn = Math.min(1, age * 2.5);
+				const alpha =
+					life * life * theme.alphaBase * fadeIn * globalAlpha;
+
+				const [c1, c2] = theme.rings[ring.colorIdx % theme.rings.length];
+				const ry = Math.min(ring.r * 0.45, rect.height * 0.42);
+
+				// Outer glow ring
+				ctx.beginPath();
+				ctx.ellipse(cx, cy, ring.r, ry, 0, 0, Math.PI * 2);
+				ctx.strokeStyle = `rgba(${c1}, ${alpha * 0.4 * theme.glowMultiplier})`;
+				ctx.globalAlpha = 1;
+				ctx.lineWidth = (4 + 6 * life) * life;
+				ctx.stroke();
+
+				// Main ring with glow
+				ctx.beginPath();
+				ctx.ellipse(cx, cy, ring.r, ry, 0, 0, Math.PI * 2);
+				ctx.strokeStyle = `rgba(${c2}, ${alpha * 0.9})`;
+				ctx.lineWidth = 1.5 * life + 0.5;
+				ctx.shadowColor = `rgba(${c1}, ${alpha * 0.6 * theme.glowMultiplier})`;
+				ctx.shadowBlur = 12 * life * theme.glowMultiplier;
+				ctx.stroke();
+				ctx.shadowBlur = 0;
+
+				// Inner highlight ring
+				if (life > 0.3) {
+					ctx.beginPath();
+					ctx.ellipse(cx, cy, ring.r, ry, 0, 0, Math.PI * 2);
+					ctx.strokeStyle = `rgba(${theme.highlight}, ${alpha * 0.12 * life})`;
+					ctx.lineWidth = 0.5;
+					ctx.stroke();
+				}
+			}
+
+			// Fade edges
+			ctx.globalAlpha = 1;
+			ctx.globalCompositeOperation = "destination-out";
+			const fadeL = ctx.createLinearGradient(0, 0, 100, 0);
+			fadeL.addColorStop(0, "rgba(0,0,0,1)");
+			fadeL.addColorStop(1, "rgba(0,0,0,0)");
+			ctx.fillStyle = fadeL;
+			ctx.fillRect(0, 0, 100, rect.height);
+			const fadeR = ctx.createLinearGradient(
+				rect.width - 100,
+				0,
+				rect.width,
+				0,
+			);
+			fadeR.addColorStop(0, "rgba(0,0,0,0)");
+			fadeR.addColorStop(1, "rgba(0,0,0,1)");
+			ctx.fillStyle = fadeR;
+			ctx.fillRect(rect.width - 100, 0, 100, rect.height);
+			ctx.globalCompositeOperation = "source-over";
+
+			animRef.current = requestAnimationFrame(animate);
+		};
+
+		animRef.current = requestAnimationFrame(animate);
+		return () => {
+			cancelAnimationFrame(animRef.current);
+			observer.disconnect();
+		};
+	}, []);
+
 	return (
-		<div className="flex items-end gap-[3px] h-[14px]" aria-hidden="true">
-			{[0.6, 1, 0.4, 0.8, 0.5].map((scale, i) => (
-				<div
-					key={i}
-					className="w-[2px] rounded-full bg-current"
-					style={{
-						animation: `music-eq ${0.8 + i * 0.15}s ease-in-out infinite alternate`,
-						height: `${scale * 14}px`,
-					}}
-				/>
-			))}
+		<div ref={containerRef} className={className}>
+			<canvas ref={canvasRef} className="block h-full w-full" />
 		</div>
 	);
 }
@@ -47,14 +203,14 @@ export function MusicBanner() {
 	useEffect(() => {
 		try {
 			const wasDismissed = localStorage.getItem(BANNER_DISMISSED_KEY);
-			if (!wasDismissed) {
-				setDismissed(false);
-				requestAnimationFrame(() => setIsVisible(true));
-			}
-		} catch {
-			setDismissed(false);
-			requestAnimationFrame(() => setIsVisible(true));
-		}
+			if (wasDismissed) return;
+		} catch {}
+
+		setDismissed(false);
+
+		// Small delay so the page layout settles, then ease in
+		const timer = setTimeout(() => setIsVisible(true), 50);
+		return () => clearTimeout(timer);
 	}, []);
 
 	const handleDismiss = () => {
@@ -64,7 +220,7 @@ export function MusicBanner() {
 			try {
 				localStorage.setItem(BANNER_DISMISSED_KEY, "1");
 			} catch {}
-		}, 300);
+		}, 500);
 	};
 
 	if (dismissed) return null;
@@ -72,70 +228,53 @@ export function MusicBanner() {
 	return (
 		<div
 			ref={bannerRef}
-			className="relative z-[60] overflow-hidden transition-all duration-300 ease-out"
+			className="relative z-[60] h-[44px] overflow-hidden"
 			style={{
-				maxHeight: isVisible ? "60px" : "0px",
 				opacity: isVisible ? 1 : 0,
+				marginTop: isVisible ? 0 : -44,
+				transition:
+					"opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.7s cubic-bezier(0.22, 1, 0.36, 1)",
 			}}
 		>
-			{/* Dark background */}
-			<div className="absolute inset-0 bg-[#0a0a0a]" />
-
-			{/* Gradient blur orb — marketing-website style */}
-			<div
-				className="pointer-events-none absolute -top-1/2 left-1/2 h-[200%] w-full max-w-[900px] -translate-x-1/2"
-				style={{
-					borderRadius: "50%",
-					background:
-						"linear-gradient(90deg, #E56C61 0%, #CBB3CB 40%, #C38DC2 60%, #C8A9CC 80%)",
-					filter: "blur(60px)",
-					opacity: 0.15,
-				}}
-			/>
+			{/* Background matches the page — seamless integration */}
+			<div className="absolute inset-0 bg-background" />
 
-			{/* Subtle animated shimmer */}
-			<div
-				className="pointer-events-none absolute inset-0"
-				style={{
-					background:
-						"linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%)",
-					animation: "banner-shimmer 3s ease-in-out infinite",
-				}}
-			/>
+			{/* Subtle bottom separator that dissolves into the page */}
+			<div className="absolute inset-x-0 bottom-0 h-px bg-border/40" />
+
+			<SonicRippleCanvas className="pointer-events-none absolute inset-0" />
 
 			<Link
 				href="https://elevenmusic.link/ui"
 				target="_blank"
 				rel="noopener noreferrer"
-				className="group relative flex h-[40px] items-center justify-center gap-3 px-4 text-white/90 transition-colors hover:text-white"
+				className="group relative flex h-[44px] items-center justify-center gap-3 px-4 text-foreground/90 transition-colors hover:text-foreground"
 			>
-				<EqualizerBars />
 				<span className="hidden items-center gap-2.5 sm:flex">
-					<span className="text-[13px] font-medium tracking-wide text-white/60">
+					<span className="text-[13px] font-medium tracking-wide text-foreground/45">
 						Introducing
 					</span>
 					<ElevenMusicWordmark className="h-[11px] w-auto" />
 				</span>
 				<span className="flex items-center gap-2 sm:hidden">
-					<span className="text-[13px] font-medium tracking-wide text-white/60">
+					<span className="text-[13px] font-medium tracking-wide text-foreground/45">
 						Introducing
 					</span>
 					<ElevenMusicWordmark className="h-[10px] w-auto" />
 				</span>
-				<span className="flex items-center gap-1 text-[13px] font-medium text-white/50 transition-colors group-hover:text-white/80">
+				<span className="flex items-center gap-1 text-[13px] font-medium text-foreground/35 transition-colors group-hover:text-foreground/70">
 					<span className="hidden lg:inline">Try it now</span>
 					<ArrowRight className="size-3 transition-transform group-hover:translate-x-0.5" />
 				</span>
 			</Link>
 
-			{/* Close button */}
 			<button
 				onClick={(e) => {
 					e.preventDefault();
 					e.stopPropagation();
 					handleDismiss();
 				}}
-				className="absolute right-2 top-1/2 z-10 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full text-white/30 transition-colors hover:text-white/60"
+				className="absolute right-2 top-1/2 z-10 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full text-foreground/20 transition-colors hover:text-foreground/50"
 				aria-label="Dismiss banner"
 			>
 				<X className="size-3.5" />
diff --git a/apps/www/styles/globals.css b/apps/www/styles/globals.css
index 88a836b8..772953f4 100644
--- a/apps/www/styles/globals.css
+++ b/apps/www/styles/globals.css
@@ -221,25 +221,6 @@
   }
 }
 
-@keyframes music-eq {
-  0% {
-    transform: scaleY(0.3);
-  }
-  100% {
-    transform: scaleY(1);
-  }
-}
-
-@keyframes banner-shimmer {
-  0%,
-  100% {
-    transform: translateX(-100%);
-  }
-  50% {
-    transform: translateX(100%);
-  }
-}
-
 @keyframes fade-in {
   from {
     opacity: 0;

From 5f1074e614e10b502caf23174304cf0ccc4de6a9 Mon Sep 17 00:00:00 2001
From: Louis Jordan <louisjoecodes@gmail.com>
Date: Thu, 12 Mar 2026 14:23:01 +0000
Subject: [PATCH 3/3] chore: fmt

---
 apps/www/components/music-banner.tsx          |  526 ++--
 .../blocks/speaker-01/components/speaker.tsx  | 2650 ++++++++---------
 2 files changed, 1582 insertions(+), 1594 deletions(-)

diff --git a/apps/www/components/music-banner.tsx b/apps/www/components/music-banner.tsx
index 456742d5..bdbc6aa7 100644
--- a/apps/www/components/music-banner.tsx
+++ b/apps/www/components/music-banner.tsx
@@ -1,284 +1,278 @@
-"use client";
+"use client"
 
-import { useEffect, useRef, useState } from "react";
-import Link from "next/link";
-import { ArrowRight, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react"
+import Link from "next/link"
+import { ArrowRight, X } from "lucide-react"
 
-const BANNER_DISMISSED_KEY = "music-banner-dismissed";
+const BANNER_DISMISSED_KEY = "music-banner-dismissed"
 
 function ElevenMusicWordmark({ className }: { className?: string }) {
-	return (
-		<svg
-			className={className}
-			fill="none"
-			viewBox="0 0 275 33"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M-4.78538e-05 31.673V-1.9022e-07H6.60959V31.673H-4.78538e-05ZM13.0064 31.673V-1.9022e-07H19.6161V31.673H13.0064ZM26.0129 31.673V-1.9022e-07H45.5757V5.27884H32.6226V12.82H44.6885V18.0989H32.6226V26.3942H45.5757V31.673H26.0129ZM50.0516 31.673V-1.9022e-07H56.3063V31.673H50.0516ZM71.4362 32.2054C64.3386 32.2054 60.5236 28.4348 60.5236 19.7846C60.5236 11.1344 64.8265 7.40812 71.5249 7.40812C78.3563 7.40812 82.0382 11.09 82.0382 19.8733V21.1154H66.6897C66.9115 26.2611 68.4641 28.1686 71.4362 28.1686C73.7873 28.1686 75.2511 26.7934 75.5173 24.398H81.7721C81.3728 29.6325 77.0255 32.2054 71.4362 32.2054ZM66.734 17.3448H75.8722C75.5617 12.9975 74.0534 11.4005 71.4362 11.4005C68.8633 11.4005 67.1776 13.0418 66.734 17.3448ZM91.8785 31.673L84.1599 7.94044H90.5477L93.1206 16.9012C94.0965 20.1838 94.6732 22.8454 95.2055 25.7732H95.383C95.9153 22.8454 96.5363 20.1838 97.4679 16.9012L100.085 7.94044H106.473L98.7543 31.673H91.8785ZM118.676 32.2054C111.579 32.2054 107.764 28.4348 107.764 19.7846C107.764 11.1344 112.066 7.40812 118.765 7.40812C125.596 7.40812 129.278 11.09 129.278 19.8733V21.1154H113.93C114.151 26.2611 115.704 28.1686 118.676 28.1686C121.027 28.1686 122.491 26.7934 122.757 24.398H129.012C128.613 29.6325 124.265 32.2054 118.676 32.2054ZM113.974 17.3448H123.112C122.802 12.9975 121.293 11.4005 118.676 11.4005C116.103 11.4005 114.418 13.0418 113.974 17.3448ZM147.902 16.4132C147.902 13.3524 146.615 11.9328 144.353 11.9328C141.603 11.9328 139.828 13.9734 139.828 17.6996V31.673H133.573V11.8885L133.485 7.94044H139.695L139.828 11.0013H139.961C141.07 8.96072 143.466 7.40812 146.527 7.40812C151.051 7.40812 154.157 9.93664 154.157 15.4373V31.673H147.902V16.4132ZM162.629 31.673H158.637V-1.9022e-07H163.916L171.146 20.0507C172.211 22.9785 172.788 24.7972 173.631 27.725H173.808C174.651 24.7972 175.228 22.9785 176.292 20.0507L183.479 -1.9022e-07H188.802V31.673H184.809V14.2839C184.809 11.1787 184.854 9.27124 184.987 6.16604H184.809C184.055 8.78328 183.612 10.1141 182.414 13.4411L175.849 31.673H171.59L165.025 13.4411C163.783 10.1141 163.383 8.78328 162.585 6.16604H162.408C162.585 9.27124 162.629 11.1787 162.629 14.2839V31.673ZM215.254 7.94044V28.0355L215.343 31.673H211.439L211.35 27.9468H211.217C210.33 29.943 207.624 32.2054 203.587 32.2054C198.397 32.2054 195.336 28.9227 195.336 23.5995V7.94044H199.24V23.1116C199.24 26.7934 200.97 29.1445 204.563 29.1445C208.644 29.1445 211.35 26.0393 211.35 21.6477V7.94044H215.254ZM229.312 32.2054C223.279 32.2054 219.775 29.5881 219.553 24.5311H223.457C223.678 27.6363 225.852 29.2776 229.312 29.2776C232.861 29.2776 235.168 27.8137 235.168 25.3739C235.168 23.0228 233.571 22.2244 230.066 21.5146L227.893 21.071C222.836 20.0507 219.997 18.7199 219.997 14.2839C219.997 10.3802 223.811 7.40812 229.046 7.40812C234.192 7.40812 238.317 9.62612 238.495 14.4614H234.591C234.458 11.7554 231.974 10.3359 229.046 10.3359C226.207 10.3359 223.767 11.711 223.767 13.9734C223.767 16.147 225.275 16.9455 228.602 17.6553L230.776 18.0989C235.789 19.1192 238.938 20.2282 238.938 25.0634C238.938 29.0558 235.256 32.2054 229.312 32.2054ZM247.578 4.39164H243.319V-1.9022e-07H247.578V4.39164ZM247.401 31.673H243.497V7.94044H247.401V31.673ZM263.738 32.2054C256.463 32.2054 252.248 27.3701 252.248 19.7846C252.248 12.199 256.507 7.40812 263.738 7.40812C269.771 7.40812 273.497 10.5577 273.896 14.9937H269.992C269.371 12.1103 267.02 10.469 263.738 10.469C258.725 10.469 256.152 14.3726 256.152 19.7846C256.152 25.1965 258.681 29.1445 263.738 29.1445C266.932 29.1445 269.593 27.6806 270.17 24.398H274.073C273.275 29.5881 269.016 32.2054 263.738 32.2054Z"
-				fill="currentColor"
-			/>
-		</svg>
-	);
+  return (
+    <svg
+      className={className}
+      fill="none"
+      viewBox="0 0 275 33"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M-4.78538e-05 31.673V-1.9022e-07H6.60959V31.673H-4.78538e-05ZM13.0064 31.673V-1.9022e-07H19.6161V31.673H13.0064ZM26.0129 31.673V-1.9022e-07H45.5757V5.27884H32.6226V12.82H44.6885V18.0989H32.6226V26.3942H45.5757V31.673H26.0129ZM50.0516 31.673V-1.9022e-07H56.3063V31.673H50.0516ZM71.4362 32.2054C64.3386 32.2054 60.5236 28.4348 60.5236 19.7846C60.5236 11.1344 64.8265 7.40812 71.5249 7.40812C78.3563 7.40812 82.0382 11.09 82.0382 19.8733V21.1154H66.6897C66.9115 26.2611 68.4641 28.1686 71.4362 28.1686C73.7873 28.1686 75.2511 26.7934 75.5173 24.398H81.7721C81.3728 29.6325 77.0255 32.2054 71.4362 32.2054ZM66.734 17.3448H75.8722C75.5617 12.9975 74.0534 11.4005 71.4362 11.4005C68.8633 11.4005 67.1776 13.0418 66.734 17.3448ZM91.8785 31.673L84.1599 7.94044H90.5477L93.1206 16.9012C94.0965 20.1838 94.6732 22.8454 95.2055 25.7732H95.383C95.9153 22.8454 96.5363 20.1838 97.4679 16.9012L100.085 7.94044H106.473L98.7543 31.673H91.8785ZM118.676 32.2054C111.579 32.2054 107.764 28.4348 107.764 19.7846C107.764 11.1344 112.066 7.40812 118.765 7.40812C125.596 7.40812 129.278 11.09 129.278 19.8733V21.1154H113.93C114.151 26.2611 115.704 28.1686 118.676 28.1686C121.027 28.1686 122.491 26.7934 122.757 24.398H129.012C128.613 29.6325 124.265 32.2054 118.676 32.2054ZM113.974 17.3448H123.112C122.802 12.9975 121.293 11.4005 118.676 11.4005C116.103 11.4005 114.418 13.0418 113.974 17.3448ZM147.902 16.4132C147.902 13.3524 146.615 11.9328 144.353 11.9328C141.603 11.9328 139.828 13.9734 139.828 17.6996V31.673H133.573V11.8885L133.485 7.94044H139.695L139.828 11.0013H139.961C141.07 8.96072 143.466 7.40812 146.527 7.40812C151.051 7.40812 154.157 9.93664 154.157 15.4373V31.673H147.902V16.4132ZM162.629 31.673H158.637V-1.9022e-07H163.916L171.146 20.0507C172.211 22.9785 172.788 24.7972 173.631 27.725H173.808C174.651 24.7972 175.228 22.9785 176.292 20.0507L183.479 -1.9022e-07H188.802V31.673H184.809V14.2839C184.809 11.1787 184.854 9.27124 184.987 6.16604H184.809C184.055 8.78328 183.612 10.1141 182.414 13.4411L175.849 31.673H171.59L165.025 13.4411C163.783 10.1141 163.383 8.78328 162.585 6.16604H162.408C162.585 9.27124 162.629 11.1787 162.629 14.2839V31.673ZM215.254 7.94044V28.0355L215.343 31.673H211.439L211.35 27.9468H211.217C210.33 29.943 207.624 32.2054 203.587 32.2054C198.397 32.2054 195.336 28.9227 195.336 23.5995V7.94044H199.24V23.1116C199.24 26.7934 200.97 29.1445 204.563 29.1445C208.644 29.1445 211.35 26.0393 211.35 21.6477V7.94044H215.254ZM229.312 32.2054C223.279 32.2054 219.775 29.5881 219.553 24.5311H223.457C223.678 27.6363 225.852 29.2776 229.312 29.2776C232.861 29.2776 235.168 27.8137 235.168 25.3739C235.168 23.0228 233.571 22.2244 230.066 21.5146L227.893 21.071C222.836 20.0507 219.997 18.7199 219.997 14.2839C219.997 10.3802 223.811 7.40812 229.046 7.40812C234.192 7.40812 238.317 9.62612 238.495 14.4614H234.591C234.458 11.7554 231.974 10.3359 229.046 10.3359C226.207 10.3359 223.767 11.711 223.767 13.9734C223.767 16.147 225.275 16.9455 228.602 17.6553L230.776 18.0989C235.789 19.1192 238.938 20.2282 238.938 25.0634C238.938 29.0558 235.256 32.2054 229.312 32.2054ZM247.578 4.39164H243.319V-1.9022e-07H247.578V4.39164ZM247.401 31.673H243.497V7.94044H247.401V31.673ZM263.738 32.2054C256.463 32.2054 252.248 27.3701 252.248 19.7846C252.248 12.199 256.507 7.40812 263.738 7.40812C269.771 7.40812 273.497 10.5577 273.896 14.9937H269.992C269.371 12.1103 267.02 10.469 263.738 10.469C258.725 10.469 256.152 14.3726 256.152 19.7846C256.152 25.1965 258.681 29.1445 263.738 29.1445C266.932 29.1445 269.593 27.6806 270.17 24.398H274.073C273.275 29.5881 269.016 32.2054 263.738 32.2054Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
 }
 
 // Detect dark mode from the DOM
 function isDarkMode() {
-	if (typeof document === "undefined") return true;
-	return document.documentElement.classList.contains("dark");
+  if (typeof document === "undefined") return true
+  return document.documentElement.classList.contains("dark")
 }
 
 // Theme-aware color palettes
 const THEME_COLORS = {
-	dark: {
-		rings: [
-			["229, 108, 97", "212, 143, 160"],
-			["195, 141, 194", "170, 130, 200"],
-			["139, 126, 200", "160, 150, 210"],
-			["200, 169, 204", "229, 108, 97"],
-		],
-		highlight: "255, 255, 255",
-		glowMultiplier: 1,
-		alphaBase: 0.3,
-	},
-	light: {
-		rings: [
-			["180, 70, 60", "170, 100, 120"],
-			["150, 100, 155", "130, 90, 160"],
-			["100, 85, 165", "120, 110, 175"],
-			["160, 125, 165", "180, 70, 60"],
-		],
-		highlight: "0, 0, 0",
-		glowMultiplier: 0.6,
-		alphaBase: 0.2,
-	},
-} as const;
+  dark: {
+    rings: [
+      ["229, 108, 97", "212, 143, 160"],
+      ["195, 141, 194", "170, 130, 200"],
+      ["139, 126, 200", "160, 150, 210"],
+      ["200, 169, 204", "229, 108, 97"],
+    ],
+    highlight: "255, 255, 255",
+    glowMultiplier: 1,
+    alphaBase: 0.3,
+  },
+  light: {
+    rings: [
+      ["180, 70, 60", "170, 100, 120"],
+      ["150, 100, 155", "130, 90, 160"],
+      ["100, 85, 165", "120, 110, 175"],
+      ["160, 125, 165", "180, 70, 60"],
+    ],
+    highlight: "0, 0, 0",
+    glowMultiplier: 0.6,
+    alphaBase: 0.2,
+  },
+} as const
 
 function SonicRippleCanvas({ className }: { className?: string }) {
-	const canvasRef = useRef<HTMLCanvasElement>(null);
-	const containerRef = useRef<HTMLDivElement>(null);
-	const animRef = useRef<number>(0);
-
-	useEffect(() => {
-		const canvas = canvasRef.current;
-		const container = containerRef.current;
-		if (!canvas || !container) return;
-
-		const dpr = window.devicePixelRatio || 1;
-		const rect = container.getBoundingClientRect();
-		canvas.width = rect.width * dpr;
-		canvas.height = rect.height * dpr;
-		canvas.style.width = `${rect.width}px`;
-		canvas.style.height = `${rect.height}px`;
-
-		const ctx = canvas.getContext("2d")!;
-		ctx.scale(dpr, dpr);
-
-		const cx = rect.width / 2;
-		const cy = rect.height / 2;
-		const maxR = Math.max(rect.width, rect.height) * 0.8;
-
-		const rings: Array<{ r: number; birth: number; colorIdx: number }> = [];
-		let lastSpawn = 0;
-		const spawnInterval = 1100;
-		let colorCounter = 0;
-		const startTime = performance.now();
-
-		// Read theme once at mount, and listen for changes
-		let theme = isDarkMode() ? THEME_COLORS.dark : THEME_COLORS.light;
-
-		const observer = new MutationObserver(() => {
-			theme = isDarkMode() ? THEME_COLORS.dark : THEME_COLORS.light;
-		});
-		observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: ["class"],
-		});
-
-		const easeOut = (t: number) => 1 - (1 - t) * (1 - t) * (1 - t);
-
-		const animate = (t: number) => {
-			ctx.clearRect(0, 0, rect.width, rect.height);
-
-			// Global fade-in over first 1s
-			const elapsed = t - startTime;
-			const globalAlpha = Math.min(1, elapsed / 1000);
-
-			if (t - lastSpawn > spawnInterval) {
-				rings.push({ r: 0, birth: t, colorIdx: colorCounter });
-				colorCounter = (colorCounter + 1) % theme.rings.length;
-				lastSpawn = t;
-			}
-
-			for (let i = rings.length - 1; i >= 0; i--) {
-				const ring = rings[i];
-				const age = (t - ring.birth) / 1000;
-				const progress = Math.min(1, (age * 60) / maxR);
-
-				ring.r = easeOut(progress) * maxR;
-
-				if (ring.r > maxR) {
-					rings.splice(i, 1);
-					continue;
-				}
-
-				const life = 1 - ring.r / maxR;
-				const fadeIn = Math.min(1, age * 2.5);
-				const alpha =
-					life * life * theme.alphaBase * fadeIn * globalAlpha;
-
-				const [c1, c2] = theme.rings[ring.colorIdx % theme.rings.length];
-				const ry = Math.min(ring.r * 0.45, rect.height * 0.42);
-
-				// Outer glow ring
-				ctx.beginPath();
-				ctx.ellipse(cx, cy, ring.r, ry, 0, 0, Math.PI * 2);
-				ctx.strokeStyle = `rgba(${c1}, ${alpha * 0.4 * theme.glowMultiplier})`;
-				ctx.globalAlpha = 1;
-				ctx.lineWidth = (4 + 6 * life) * life;
-				ctx.stroke();
-
-				// Main ring with glow
-				ctx.beginPath();
-				ctx.ellipse(cx, cy, ring.r, ry, 0, 0, Math.PI * 2);
-				ctx.strokeStyle = `rgba(${c2}, ${alpha * 0.9})`;
-				ctx.lineWidth = 1.5 * life + 0.5;
-				ctx.shadowColor = `rgba(${c1}, ${alpha * 0.6 * theme.glowMultiplier})`;
-				ctx.shadowBlur = 12 * life * theme.glowMultiplier;
-				ctx.stroke();
-				ctx.shadowBlur = 0;
-
-				// Inner highlight ring
-				if (life > 0.3) {
-					ctx.beginPath();
-					ctx.ellipse(cx, cy, ring.r, ry, 0, 0, Math.PI * 2);
-					ctx.strokeStyle = `rgba(${theme.highlight}, ${alpha * 0.12 * life})`;
-					ctx.lineWidth = 0.5;
-					ctx.stroke();
-				}
-			}
-
-			// Fade edges
-			ctx.globalAlpha = 1;
-			ctx.globalCompositeOperation = "destination-out";
-			const fadeL = ctx.createLinearGradient(0, 0, 100, 0);
-			fadeL.addColorStop(0, "rgba(0,0,0,1)");
-			fadeL.addColorStop(1, "rgba(0,0,0,0)");
-			ctx.fillStyle = fadeL;
-			ctx.fillRect(0, 0, 100, rect.height);
-			const fadeR = ctx.createLinearGradient(
-				rect.width - 100,
-				0,
-				rect.width,
-				0,
-			);
-			fadeR.addColorStop(0, "rgba(0,0,0,0)");
-			fadeR.addColorStop(1, "rgba(0,0,0,1)");
-			ctx.fillStyle = fadeR;
-			ctx.fillRect(rect.width - 100, 0, 100, rect.height);
-			ctx.globalCompositeOperation = "source-over";
-
-			animRef.current = requestAnimationFrame(animate);
-		};
-
-		animRef.current = requestAnimationFrame(animate);
-		return () => {
-			cancelAnimationFrame(animRef.current);
-			observer.disconnect();
-		};
-	}, []);
-
-	return (
-		<div ref={containerRef} className={className}>
-			<canvas ref={canvasRef} className="block h-full w-full" />
-		</div>
-	);
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const animRef = useRef<number>(0)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    const container = containerRef.current
+    if (!canvas || !container) return
+
+    const dpr = window.devicePixelRatio || 1
+    const rect = container.getBoundingClientRect()
+    canvas.width = rect.width * dpr
+    canvas.height = rect.height * dpr
+    canvas.style.width = `${rect.width}px`
+    canvas.style.height = `${rect.height}px`
+
+    const ctx = canvas.getContext("2d")!
+    ctx.scale(dpr, dpr)
+
+    const cx = rect.width / 2
+    const cy = rect.height / 2
+    const maxR = Math.max(rect.width, rect.height) * 0.8
+
+    const rings: Array<{ r: number; birth: number; colorIdx: number }> = []
+    let lastSpawn = 0
+    const spawnInterval = 1100
+    let colorCounter = 0
+    const startTime = performance.now()
+
+    // Read theme once at mount, and listen for changes
+    let theme = isDarkMode() ? THEME_COLORS.dark : THEME_COLORS.light
+
+    const observer = new MutationObserver(() => {
+      theme = isDarkMode() ? THEME_COLORS.dark : THEME_COLORS.light
+    })
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    })
+
+    const easeOut = (t: number) => 1 - (1 - t) * (1 - t) * (1 - t)
+
+    const animate = (t: number) => {
+      ctx.clearRect(0, 0, rect.width, rect.height)
+
+      // Global fade-in over first 1s
+      const elapsed = t - startTime
+      const globalAlpha = Math.min(1, elapsed / 1000)
+
+      if (t - lastSpawn > spawnInterval) {
+        rings.push({ r: 0, birth: t, colorIdx: colorCounter })
+        colorCounter = (colorCounter + 1) % theme.rings.length
+        lastSpawn = t
+      }
+
+      for (let i = rings.length - 1; i >= 0; i--) {
+        const ring = rings[i]
+        const age = (t - ring.birth) / 1000
+        const progress = Math.min(1, (age * 60) / maxR)
+
+        ring.r = easeOut(progress) * maxR
+
+        if (ring.r > maxR) {
+          rings.splice(i, 1)
+          continue
+        }
+
+        const life = 1 - ring.r / maxR
+        const fadeIn = Math.min(1, age * 2.5)
+        const alpha = life * life * theme.alphaBase * fadeIn * globalAlpha
+
+        const [c1, c2] = theme.rings[ring.colorIdx % theme.rings.length]
+        const ry = Math.min(ring.r * 0.45, rect.height * 0.42)
+
+        // Outer glow ring
+        ctx.beginPath()
+        ctx.ellipse(cx, cy, ring.r, ry, 0, 0, Math.PI * 2)
+        ctx.strokeStyle = `rgba(${c1}, ${alpha * 0.4 * theme.glowMultiplier})`
+        ctx.globalAlpha = 1
+        ctx.lineWidth = (4 + 6 * life) * life
+        ctx.stroke()
+
+        // Main ring with glow
+        ctx.beginPath()
+        ctx.ellipse(cx, cy, ring.r, ry, 0, 0, Math.PI * 2)
+        ctx.strokeStyle = `rgba(${c2}, ${alpha * 0.9})`
+        ctx.lineWidth = 1.5 * life + 0.5
+        ctx.shadowColor = `rgba(${c1}, ${alpha * 0.6 * theme.glowMultiplier})`
+        ctx.shadowBlur = 12 * life * theme.glowMultiplier
+        ctx.stroke()
+        ctx.shadowBlur = 0
+
+        // Inner highlight ring
+        if (life > 0.3) {
+          ctx.beginPath()
+          ctx.ellipse(cx, cy, ring.r, ry, 0, 0, Math.PI * 2)
+          ctx.strokeStyle = `rgba(${theme.highlight}, ${alpha * 0.12 * life})`
+          ctx.lineWidth = 0.5
+          ctx.stroke()
+        }
+      }
+
+      // Fade edges
+      ctx.globalAlpha = 1
+      ctx.globalCompositeOperation = "destination-out"
+      const fadeL = ctx.createLinearGradient(0, 0, 100, 0)
+      fadeL.addColorStop(0, "rgba(0,0,0,1)")
+      fadeL.addColorStop(1, "rgba(0,0,0,0)")
+      ctx.fillStyle = fadeL
+      ctx.fillRect(0, 0, 100, rect.height)
+      const fadeR = ctx.createLinearGradient(rect.width - 100, 0, rect.width, 0)
+      fadeR.addColorStop(0, "rgba(0,0,0,0)")
+      fadeR.addColorStop(1, "rgba(0,0,0,1)")
+      ctx.fillStyle = fadeR
+      ctx.fillRect(rect.width - 100, 0, 100, rect.height)
+      ctx.globalCompositeOperation = "source-over"
+
+      animRef.current = requestAnimationFrame(animate)
+    }
+
+    animRef.current = requestAnimationFrame(animate)
+    return () => {
+      cancelAnimationFrame(animRef.current)
+      observer.disconnect()
+    }
+  }, [])
+
+  return (
+    <div ref={containerRef} className={className}>
+      <canvas ref={canvasRef} className="block h-full w-full" />
+    </div>
+  )
 }
 
 export function MusicBanner() {
-	const [dismissed, setDismissed] = useState(true);
-	const [isVisible, setIsVisible] = useState(false);
-	const bannerRef = useRef<HTMLDivElement>(null);
-
-	useEffect(() => {
-		try {
-			const wasDismissed = localStorage.getItem(BANNER_DISMISSED_KEY);
-			if (wasDismissed) return;
-		} catch {}
-
-		setDismissed(false);
-
-		// Small delay so the page layout settles, then ease in
-		const timer = setTimeout(() => setIsVisible(true), 50);
-		return () => clearTimeout(timer);
-	}, []);
-
-	const handleDismiss = () => {
-		setIsVisible(false);
-		setTimeout(() => {
-			setDismissed(true);
-			try {
-				localStorage.setItem(BANNER_DISMISSED_KEY, "1");
-			} catch {}
-		}, 500);
-	};
-
-	if (dismissed) return null;
-
-	return (
-		<div
-			ref={bannerRef}
-			className="relative z-[60] h-[44px] overflow-hidden"
-			style={{
-				opacity: isVisible ? 1 : 0,
-				marginTop: isVisible ? 0 : -44,
-				transition:
-					"opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.7s cubic-bezier(0.22, 1, 0.36, 1)",
-			}}
-		>
-			{/* Background matches the page — seamless integration */}
-			<div className="absolute inset-0 bg-background" />
-
-			{/* Subtle bottom separator that dissolves into the page */}
-			<div className="absolute inset-x-0 bottom-0 h-px bg-border/40" />
-
-			<SonicRippleCanvas className="pointer-events-none absolute inset-0" />
-
-			<Link
-				href="https://elevenmusic.link/ui"
-				target="_blank"
-				rel="noopener noreferrer"
-				className="group relative flex h-[44px] items-center justify-center gap-3 px-4 text-foreground/90 transition-colors hover:text-foreground"
-			>
-				<span className="hidden items-center gap-2.5 sm:flex">
-					<span className="text-[13px] font-medium tracking-wide text-foreground/45">
-						Introducing
-					</span>
-					<ElevenMusicWordmark className="h-[11px] w-auto" />
-				</span>
-				<span className="flex items-center gap-2 sm:hidden">
-					<span className="text-[13px] font-medium tracking-wide text-foreground/45">
-						Introducing
-					</span>
-					<ElevenMusicWordmark className="h-[10px] w-auto" />
-				</span>
-				<span className="flex items-center gap-1 text-[13px] font-medium text-foreground/35 transition-colors group-hover:text-foreground/70">
-					<span className="hidden lg:inline">Try it now</span>
-					<ArrowRight className="size-3 transition-transform group-hover:translate-x-0.5" />
-				</span>
-			</Link>
-
-			<button
-				onClick={(e) => {
-					e.preventDefault();
-					e.stopPropagation();
-					handleDismiss();
-				}}
-				className="absolute right-2 top-1/2 z-10 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full text-foreground/20 transition-colors hover:text-foreground/50"
-				aria-label="Dismiss banner"
-			>
-				<X className="size-3.5" />
-			</button>
-		</div>
-	);
+  const [dismissed, setDismissed] = useState(true)
+  const [isVisible, setIsVisible] = useState(false)
+  const bannerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    try {
+      const wasDismissed = localStorage.getItem(BANNER_DISMISSED_KEY)
+      if (wasDismissed) return
+    } catch {}
+
+    setDismissed(false)
+
+    // Small delay so the page layout settles, then ease in
+    const timer = setTimeout(() => setIsVisible(true), 50)
+    return () => clearTimeout(timer)
+  }, [])
+
+  const handleDismiss = () => {
+    setIsVisible(false)
+    setTimeout(() => {
+      setDismissed(true)
+      try {
+        localStorage.setItem(BANNER_DISMISSED_KEY, "1")
+      } catch {}
+    }, 500)
+  }
+
+  if (dismissed) return null
+
+  return (
+    <div
+      ref={bannerRef}
+      className="relative z-[60] h-[44px] overflow-hidden"
+      style={{
+        opacity: isVisible ? 1 : 0,
+        marginTop: isVisible ? 0 : -44,
+        transition:
+          "opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.7s cubic-bezier(0.22, 1, 0.36, 1)",
+      }}
+    >
+      {/* Background matches the page — seamless integration */}
+      <div className="bg-background absolute inset-0" />
+
+      {/* Subtle bottom separator that dissolves into the page */}
+      <div className="bg-border/40 absolute inset-x-0 bottom-0 h-px" />
+
+      <SonicRippleCanvas className="pointer-events-none absolute inset-0" />
+
+      <Link
+        href="https://elevenmusic.link/ui"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="group text-foreground/90 hover:text-foreground relative flex h-[44px] items-center justify-center gap-3 px-4 transition-colors"
+      >
+        <span className="hidden items-center gap-2.5 sm:flex">
+          <span className="text-foreground/45 text-[13px] font-medium tracking-wide">
+            Introducing
+          </span>
+          <ElevenMusicWordmark className="h-[11px] w-auto" />
+        </span>
+        <span className="flex items-center gap-2 sm:hidden">
+          <span className="text-foreground/45 text-[13px] font-medium tracking-wide">
+            Introducing
+          </span>
+          <ElevenMusicWordmark className="h-[10px] w-auto" />
+        </span>
+        <span className="text-foreground/35 group-hover:text-foreground/70 flex items-center gap-1 text-[13px] font-medium transition-colors">
+          <span className="hidden lg:inline">Try it now</span>
+          <ArrowRight className="size-3 transition-transform group-hover:translate-x-0.5" />
+        </span>
+      </Link>
+
+      <button
+        onClick={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          handleDismiss()
+        }}
+        className="text-foreground/20 hover:text-foreground/50 absolute top-1/2 right-2 z-10 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full transition-colors"
+        aria-label="Dismiss banner"
+      >
+        <X className="size-3.5" />
+      </button>
+    </div>
+  )
 }
diff --git a/apps/www/registry/elevenlabs-ui/blocks/speaker-01/components/speaker.tsx b/apps/www/registry/elevenlabs-ui/blocks/speaker-01/components/speaker.tsx
index 88c57e46..52706d3c 100644
--- a/apps/www/registry/elevenlabs-ui/blocks/speaker-01/components/speaker.tsx
+++ b/apps/www/registry/elevenlabs-ui/blocks/speaker-01/components/speaker.tsx
@@ -1,1356 +1,1350 @@
-"use client";
+"use client"
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import Link from "next/link";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import Link from "next/link"
 import {
-	Music,
-	SkipBack,
-	SkipForward,
-	Sparkles,
-	Volume,
-	Volume1,
-	Volume2,
-	VolumeX,
-} from "lucide-react";
-
-import { cn } from "@/registry/elevenlabs-ui/lib/utils";
+  Music,
+  SkipBack,
+  SkipForward,
+  Sparkles,
+  Volume,
+  Volume1,
+  Volume2,
+  VolumeX,
+} from "lucide-react"
+
+import { cn } from "@/registry/elevenlabs-ui/lib/utils"
 import {
-	AudioPlayerButton,
-	AudioPlayerDuration,
-	AudioPlayerProgress,
-	AudioPlayerProvider,
-	AudioPlayerTime,
-	exampleTracks,
-	useAudioPlayer,
-} from "@/registry/elevenlabs-ui/ui/audio-player";
-import { Button } from "@/registry/elevenlabs-ui/ui/button";
-import { Card } from "@/registry/elevenlabs-ui/ui/card";
-import { Orb } from "@/registry/elevenlabs-ui/ui/orb";
-import { Waveform } from "@/registry/elevenlabs-ui/ui/waveform";
+  AudioPlayerButton,
+  AudioPlayerDuration,
+  AudioPlayerProgress,
+  AudioPlayerProvider,
+  AudioPlayerTime,
+  exampleTracks,
+  useAudioPlayer,
+} from "@/registry/elevenlabs-ui/ui/audio-player"
+import { Button } from "@/registry/elevenlabs-ui/ui/button"
+import { Card } from "@/registry/elevenlabs-ui/ui/card"
+import { Orb } from "@/registry/elevenlabs-ui/ui/orb"
+import { Waveform } from "@/registry/elevenlabs-ui/ui/waveform"
 
 const globalAudioState = {
-	isPlaying: false,
-	volume: 0.7,
-	isDark: false,
-};
+  isPlaying: false,
+  volume: 0.7,
+  isDark: false,
+}
 
 const PlayButton = memo(
-	({ currentTrackIndex }: { currentTrackIndex: number }) => {
-		const player = useAudioPlayer();
-		return (
-			<AudioPlayerButton
-				variant="outline"
-				size="icon"
-				item={
-					player.activeItem
-						? {
-								id: exampleTracks[currentTrackIndex].id,
-								src: exampleTracks[currentTrackIndex].url,
-								data: { name: exampleTracks[currentTrackIndex].name },
-							}
-						: undefined
-				}
-				className={cn(
-					"border-border h-14 w-14 rounded-full transition-all duration-300",
-					player.isPlaying
-						? "bg-foreground/10 hover:bg-foreground/15 border-foreground/30 dark:bg-primary/20 dark:hover:bg-primary/30 dark:border-primary/50"
-						: "bg-background hover:bg-muted",
-				)}
-			/>
-		);
-	},
-);
-
-PlayButton.displayName = "PlayButton";
+  ({ currentTrackIndex }: { currentTrackIndex: number }) => {
+    const player = useAudioPlayer()
+    return (
+      <AudioPlayerButton
+        variant="outline"
+        size="icon"
+        item={
+          player.activeItem
+            ? {
+                id: exampleTracks[currentTrackIndex].id,
+                src: exampleTracks[currentTrackIndex].url,
+                data: { name: exampleTracks[currentTrackIndex].name },
+              }
+            : undefined
+        }
+        className={cn(
+          "border-border h-14 w-14 rounded-full transition-all duration-300",
+          player.isPlaying
+            ? "bg-foreground/10 hover:bg-foreground/15 border-foreground/30 dark:bg-primary/20 dark:hover:bg-primary/30 dark:border-primary/50"
+            : "bg-background hover:bg-muted"
+        )}
+      />
+    )
+  }
+)
+
+PlayButton.displayName = "PlayButton"
 
 const TimeDisplay = memo(() => {
-	return (
-		<div className="flex items-center gap-2">
-			<AudioPlayerTime className="text-xs" />
-			<AudioPlayerProgress className="flex-1" />
-			<AudioPlayerDuration className="text-xs" />
-		</div>
-	);
-});
+  return (
+    <div className="flex items-center gap-2">
+      <AudioPlayerTime className="text-xs" />
+      <AudioPlayerProgress className="flex-1" />
+      <AudioPlayerDuration className="text-xs" />
+    </div>
+  )
+})
 
-TimeDisplay.displayName = "TimeDisplay";
+TimeDisplay.displayName = "TimeDisplay"
 
 const SpeakerContextBridge = ({ className }: { className?: string }) => {
-	const player = useAudioPlayer();
-	const playerRefStatic = useRef(player);
+  const player = useAudioPlayer()
+  const playerRefStatic = useRef(player)
 
-	playerRefStatic.current = player;
+  playerRefStatic.current = player
 
-	return useMemo(
-		() => <SpeakerControls className={className} playerRef={playerRefStatic} />,
-		[className],
-	);
-};
+  return useMemo(
+    () => <SpeakerControls className={className} playerRef={playerRefStatic} />,
+    [className]
+  )
+}
 
 export function Speaker({ className }: { className?: string }) {
-	return (
-		<AudioPlayerProvider>
-			<SpeakerContextBridge className={className} />
-		</AudioPlayerProvider>
-	);
+  return (
+    <AudioPlayerProvider>
+      <SpeakerContextBridge className={className} />
+    </AudioPlayerProvider>
+  )
 }
 
 const SpeakerOrb = memo(
-	({
-		seed,
-		side,
-		isDark,
-		audioDataRef,
-	}: {
-		seed: number;
-		side: "left" | "right";
-		isDark: boolean;
-		audioDataRef: React.RefObject<number[]>;
-	}) => {
-		const getInputVolume = useCallback(() => {
-			const audioData = audioDataRef?.current || [];
-			if (
-				!globalAudioState.isPlaying ||
-				globalAudioState.volume === 0 ||
-				audioData.length === 0
-			)
-				return 0;
-			const lowFreqEnd = Math.floor(audioData.length * 0.25);
-			let sum = 0;
-			for (let i = 0; i < lowFreqEnd; i++) {
-				sum += audioData[i];
-			}
-			const avgLow = sum / lowFreqEnd;
-			const amplified = Math.pow(avgLow, 0.5) * 3.5;
-			return Math.max(0.2, Math.min(1.0, amplified));
-		}, [audioDataRef]);
-
-		const getOutputVolume = useCallback(() => {
-			const audioData = audioDataRef?.current || [];
-			if (
-				!globalAudioState.isPlaying ||
-				globalAudioState.volume === 0 ||
-				audioData.length === 0
-			)
-				return 0;
-			const midStart = Math.floor(audioData.length * 0.25);
-			const midEnd = Math.floor(audioData.length * 0.75);
-			let sum = 0;
-			for (let i = midStart; i < midEnd; i++) {
-				sum += audioData[i];
-			}
-			const avgMid = sum / (midEnd - midStart);
-			const modifier = side === "left" ? 0.9 : 1.1;
-			const amplified = Math.pow(avgMid, 0.5) * 4.0;
-			return Math.max(0.25, Math.min(1.0, amplified * modifier));
-		}, [side, audioDataRef]);
-
-		const colors: [string, string] = useMemo(
-			() => (isDark ? ["#A0A0A0", "#232323"] : ["#F4F4F4", "#E0E0E0"]),
-			[isDark],
-		);
-
-		return (
-			<Orb
-				colors={colors}
-				seed={seed}
-				volumeMode="manual"
-				getInputVolume={getInputVolume}
-				getOutputVolume={getOutputVolume}
-			/>
-		);
-	},
-	(prevProps, nextProps) => {
-		return (
-			prevProps.isDark === nextProps.isDark &&
-			prevProps.seed === nextProps.seed &&
-			prevProps.side === nextProps.side
-		);
-	},
-);
-
-SpeakerOrb.displayName = "SpeakerOrb";
+  ({
+    seed,
+    side,
+    isDark,
+    audioDataRef,
+  }: {
+    seed: number
+    side: "left" | "right"
+    isDark: boolean
+    audioDataRef: React.RefObject<number[]>
+  }) => {
+    const getInputVolume = useCallback(() => {
+      const audioData = audioDataRef?.current || []
+      if (
+        !globalAudioState.isPlaying ||
+        globalAudioState.volume === 0 ||
+        audioData.length === 0
+      )
+        return 0
+      const lowFreqEnd = Math.floor(audioData.length * 0.25)
+      let sum = 0
+      for (let i = 0; i < lowFreqEnd; i++) {
+        sum += audioData[i]
+      }
+      const avgLow = sum / lowFreqEnd
+      const amplified = Math.pow(avgLow, 0.5) * 3.5
+      return Math.max(0.2, Math.min(1.0, amplified))
+    }, [audioDataRef])
+
+    const getOutputVolume = useCallback(() => {
+      const audioData = audioDataRef?.current || []
+      if (
+        !globalAudioState.isPlaying ||
+        globalAudioState.volume === 0 ||
+        audioData.length === 0
+      )
+        return 0
+      const midStart = Math.floor(audioData.length * 0.25)
+      const midEnd = Math.floor(audioData.length * 0.75)
+      let sum = 0
+      for (let i = midStart; i < midEnd; i++) {
+        sum += audioData[i]
+      }
+      const avgMid = sum / (midEnd - midStart)
+      const modifier = side === "left" ? 0.9 : 1.1
+      const amplified = Math.pow(avgMid, 0.5) * 4.0
+      return Math.max(0.25, Math.min(1.0, amplified * modifier))
+    }, [side, audioDataRef])
+
+    const colors: [string, string] = useMemo(
+      () => (isDark ? ["#A0A0A0", "#232323"] : ["#F4F4F4", "#E0E0E0"]),
+      [isDark]
+    )
+
+    return (
+      <Orb
+        colors={colors}
+        seed={seed}
+        volumeMode="manual"
+        getInputVolume={getInputVolume}
+        getOutputVolume={getOutputVolume}
+      />
+    )
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.isDark === nextProps.isDark &&
+      prevProps.seed === nextProps.seed &&
+      prevProps.side === nextProps.side
+    )
+  }
+)
+
+SpeakerOrb.displayName = "SpeakerOrb"
 
 const SpeakerOrbsSection = memo(
-	({
-		isDark,
-		audioDataRef,
-	}: {
-		isDark: boolean;
-		audioDataRef: React.RefObject<number[]>;
-	}) => {
-		return (
-			<div className="mt-8 grid grid-cols-2 gap-8">
-				<div className="relative aspect-square">
-					<div className="bg-muted relative h-full w-full rounded-full p-1 shadow-[inset_0_2px_8px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_2px_8px_rgba(0,0,0,0.5)]">
-						<div className="bg-background h-full w-full overflow-hidden rounded-full shadow-[inset_0_0_12px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_0_12px_rgba(0,0,0,0.3)]">
-							<SpeakerOrb
-								key={`left-${isDark}`}
-								seed={100}
-								side="left"
-								isDark={isDark}
-								audioDataRef={audioDataRef}
-							/>
-						</div>
-					</div>
-				</div>
-
-				<div className="relative aspect-square">
-					<div className="bg-muted relative h-full w-full rounded-full p-1 shadow-[inset_0_2px_8px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_2px_8px_rgba(0,0,0,0.5)]">
-						<div className="bg-background h-full w-full overflow-hidden rounded-full shadow-[inset_0_0_12px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_0_12px_rgba(0,0,0,0.3)]">
-							<SpeakerOrb
-								key={`right-${isDark}`}
-								seed={2000}
-								side="right"
-								isDark={isDark}
-								audioDataRef={audioDataRef}
-							/>
-						</div>
-					</div>
-				</div>
-			</div>
-		);
-	},
-	(prevProps, nextProps) => {
-		return prevProps.isDark === nextProps.isDark;
-	},
-);
-
-SpeakerOrbsSection.displayName = "SpeakerOrbsSection";
+  ({
+    isDark,
+    audioDataRef,
+  }: {
+    isDark: boolean
+    audioDataRef: React.RefObject<number[]>
+  }) => {
+    return (
+      <div className="mt-8 grid grid-cols-2 gap-8">
+        <div className="relative aspect-square">
+          <div className="bg-muted relative h-full w-full rounded-full p-1 shadow-[inset_0_2px_8px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_2px_8px_rgba(0,0,0,0.5)]">
+            <div className="bg-background h-full w-full overflow-hidden rounded-full shadow-[inset_0_0_12px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_0_12px_rgba(0,0,0,0.3)]">
+              <SpeakerOrb
+                key={`left-${isDark}`}
+                seed={100}
+                side="left"
+                isDark={isDark}
+                audioDataRef={audioDataRef}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="relative aspect-square">
+          <div className="bg-muted relative h-full w-full rounded-full p-1 shadow-[inset_0_2px_8px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_2px_8px_rgba(0,0,0,0.5)]">
+            <div className="bg-background h-full w-full overflow-hidden rounded-full shadow-[inset_0_0_12px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_0_12px_rgba(0,0,0,0.3)]">
+              <SpeakerOrb
+                key={`right-${isDark}`}
+                seed={2000}
+                side="right"
+                isDark={isDark}
+                audioDataRef={audioDataRef}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  },
+  (prevProps, nextProps) => {
+    return prevProps.isDark === nextProps.isDark
+  }
+)
+
+SpeakerOrbsSection.displayName = "SpeakerOrbsSection"
 
 const VolumeSlider = memo(
-	({
-		volume,
-		setVolume,
-	}: {
-		volume: number;
-		setVolume: (value: number | ((prev: number) => number)) => void;
-	}) => {
-		const [isDragging, setIsDragging] = useState(false);
-
-		const getVolumeIcon = () => {
-			if (volume === 0) return VolumeX;
-			if (volume <= 0.33) return Volume;
-			if (volume <= 0.66) return Volume1;
-			return Volume2;
-		};
-
-		const VolumeIcon = getVolumeIcon();
-
-		return (
-			<div className="flex items-center justify-center gap-4 pt-4">
-				<button
-					onClick={() => setVolume((prev: number) => (prev > 0 ? 0 : 0.7))}
-					className="text-muted-foreground hover:text-foreground transition-colors"
-				>
-					<VolumeIcon
-						className={cn(
-							"h-4 w-4 transition-all",
-							volume === 0 && "text-muted-foreground/50",
-						)}
-					/>
-				</button>
-				<div
-					className="volume-slider bg-foreground/10 group relative h-1 w-48 cursor-pointer rounded-full"
-					onClick={(e) => {
-						if (isDragging) return;
-						const rect = e.currentTarget.getBoundingClientRect();
-						const x = Math.max(
-							0,
-							Math.min(1, (e.clientX - rect.left) / rect.width),
-						);
-						setVolume(x);
-					}}
-					onMouseDown={(e) => {
-						e.preventDefault();
-						setIsDragging(true);
-						const sliderRect = e.currentTarget.getBoundingClientRect();
-
-						// Set initial volume immediately
-						const initialX = Math.max(
-							0,
-							Math.min(1, (e.clientX - sliderRect.left) / sliderRect.width),
-						);
-						setVolume(initialX);
-
-						const handleMove = (e: MouseEvent) => {
-							const x = Math.max(
-								0,
-								Math.min(1, (e.clientX - sliderRect.left) / sliderRect.width),
-							);
-							setVolume(x);
-						};
-						const handleUp = () => {
-							setIsDragging(false);
-							document.removeEventListener("mousemove", handleMove);
-							document.removeEventListener("mouseup", handleUp);
-						};
-						document.addEventListener("mousemove", handleMove);
-						document.addEventListener("mouseup", handleUp);
-					}}
-				>
-					<div
-						className={cn(
-							"bg-primary absolute top-0 left-0 h-full rounded-full",
-							!isDragging && "transition-all duration-150",
-						)}
-						style={{ width: `${volume * 100}%` }}
-					/>
-				</div>
-				<span className="text-muted-foreground w-12 text-right font-mono text-xs">
-					{Math.round(volume * 100)}%
-				</span>
-			</div>
-		);
-	},
-);
-
-VolumeSlider.displayName = "VolumeSlider";
+  ({
+    volume,
+    setVolume,
+  }: {
+    volume: number
+    setVolume: (value: number | ((prev: number) => number)) => void
+  }) => {
+    const [isDragging, setIsDragging] = useState(false)
+
+    const getVolumeIcon = () => {
+      if (volume === 0) return VolumeX
+      if (volume <= 0.33) return Volume
+      if (volume <= 0.66) return Volume1
+      return Volume2
+    }
+
+    const VolumeIcon = getVolumeIcon()
+
+    return (
+      <div className="flex items-center justify-center gap-4 pt-4">
+        <button
+          onClick={() => setVolume((prev: number) => (prev > 0 ? 0 : 0.7))}
+          className="text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <VolumeIcon
+            className={cn(
+              "h-4 w-4 transition-all",
+              volume === 0 && "text-muted-foreground/50"
+            )}
+          />
+        </button>
+        <div
+          className="volume-slider bg-foreground/10 group relative h-1 w-48 cursor-pointer rounded-full"
+          onClick={(e) => {
+            if (isDragging) return
+            const rect = e.currentTarget.getBoundingClientRect()
+            const x = Math.max(
+              0,
+              Math.min(1, (e.clientX - rect.left) / rect.width)
+            )
+            setVolume(x)
+          }}
+          onMouseDown={(e) => {
+            e.preventDefault()
+            setIsDragging(true)
+            const sliderRect = e.currentTarget.getBoundingClientRect()
+
+            // Set initial volume immediately
+            const initialX = Math.max(
+              0,
+              Math.min(1, (e.clientX - sliderRect.left) / sliderRect.width)
+            )
+            setVolume(initialX)
+
+            const handleMove = (e: MouseEvent) => {
+              const x = Math.max(
+                0,
+                Math.min(1, (e.clientX - sliderRect.left) / sliderRect.width)
+              )
+              setVolume(x)
+            }
+            const handleUp = () => {
+              setIsDragging(false)
+              document.removeEventListener("mousemove", handleMove)
+              document.removeEventListener("mouseup", handleUp)
+            }
+            document.addEventListener("mousemove", handleMove)
+            document.addEventListener("mouseup", handleUp)
+          }}
+        >
+          <div
+            className={cn(
+              "bg-primary absolute top-0 left-0 h-full rounded-full",
+              !isDragging && "transition-all duration-150"
+            )}
+            style={{ width: `${volume * 100}%` }}
+          />
+        </div>
+        <span className="text-muted-foreground w-12 text-right font-mono text-xs">
+          {Math.round(volume * 100)}%
+        </span>
+      </div>
+    )
+  }
+)
+
+VolumeSlider.displayName = "VolumeSlider"
 
 function SpeakerControls({
-	className,
-	playerRef,
+  className,
+  playerRef,
 }: {
-	className?: string;
-	playerRef: React.RefObject<ReturnType<typeof useAudioPlayer>>;
+  className?: string
+  playerRef: React.RefObject<ReturnType<typeof useAudioPlayer>>
 }) {
-	const playerApiRef = playerRef;
-	const isPlayingRef = useRef(false);
-
-	const [volume, setVolume] = useState(0.7);
-	const [currentTrackIndex, setCurrentTrackIndex] = useState(0);
-	const [showTrackList, setShowTrackList] = useState(false);
-	const audioDataRef = useRef<number[]>([]);
-	const [isDark, setIsDark] = useState(false);
-	const [isScrubbing, setIsScrubbing] = useState(false);
-	const [isMomentumActive, setIsMomentumActive] = useState(false);
-	const [precomputedWaveform, setPrecomputedWaveform] = useState<number[]>([]);
-	const waveformOffset = useRef(0);
-	const waveformElementRef = useRef<HTMLDivElement>(null);
-	const [ambienceMode, setAmbienceMode] = useState(false);
-	const containerWidthRef = useRef(300);
-	const analyserRef = useRef<AnalyserNode | null>(null);
-	const audioContextRef = useRef<AudioContext | null>(null);
-	const sourceRef = useRef<MediaElementAudioSourceNode | null>(null);
-	const audioBufferRef = useRef<AudioBuffer | null>(null);
-	const scratchBufferRef = useRef<AudioBufferSourceNode | null>(null);
-	const totalBarsRef = useRef(600);
-	const convolverRef = useRef<ConvolverNode | null>(null);
-	const delayRef = useRef<DelayNode | null>(null);
-	const feedbackRef = useRef<GainNode | null>(null);
-	const wetGainRef = useRef<GainNode | null>(null);
-	const dryGainRef = useRef<GainNode | null>(null);
-	const masterGainRef = useRef<GainNode | null>(null);
-	const lowPassFilterRef = useRef<BiquadFilterNode | null>(null);
-	const highPassFilterRef = useRef<BiquadFilterNode | null>(null);
-
-	useEffect(() => {
-		const checkTheme = () => {
-			const isDarkMode = document.documentElement.classList.contains("dark");
-			setIsDark(isDarkMode);
-		};
-
-		checkTheme();
-
-		const observer = new MutationObserver(checkTheme);
-		observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: ["class"],
-		});
-
-		return () => observer.disconnect();
-	}, []);
-
-	useEffect(() => {
-		const container = document.querySelector(".waveform-container");
-		if (container) {
-			const rect = container.getBoundingClientRect();
-			containerWidthRef.current = rect.width;
-			waveformOffset.current = rect.width;
-			if (waveformElementRef.current) {
-				waveformElementRef.current.style.transform = `translateX(${rect.width}px)`;
-			}
-		}
-	}, []);
-
-	useEffect(() => {
-		if (precomputedWaveform.length > 0 && containerWidthRef.current > 0) {
-			waveformOffset.current = containerWidthRef.current;
-			if (waveformElementRef.current) {
-				waveformElementRef.current.style.transform = `translateX(${containerWidthRef.current}px)`;
-			}
-			if (playerApiRef.current.ref.current) {
-				playerApiRef.current.ref.current.currentTime = 0;
-			}
-		}
-	}, [precomputedWaveform]);
-
-	const precomputeWaveform = useCallback(async (audioUrl: string) => {
-		try {
-			const response = await fetch(audioUrl);
-			const arrayBuffer = await response.arrayBuffer();
-
-			const offlineContext = new OfflineAudioContext(1, 44100 * 5, 44100);
-			const audioBuffer = await offlineContext.decodeAudioData(
-				arrayBuffer.slice(0),
-			);
-
-			if (!audioContextRef.current) {
-				const audioContext = new (
-					window.AudioContext ||
-					(window as unknown as { webkitAudioContext: typeof AudioContext })
-						.webkitAudioContext
-				)();
-				audioContextRef.current = audioContext;
-			}
-
-			audioBufferRef.current =
-				await audioContextRef.current.decodeAudioData(arrayBuffer);
-
-			const channelData = audioBuffer.getChannelData(0);
-			const samplesPerBar = Math.floor(
-				channelData.length / totalBarsRef.current,
-			);
-			const waveformData: number[] = [];
-
-			for (let i = 0; i < totalBarsRef.current; i++) {
-				const start = i * samplesPerBar;
-				const end = start + samplesPerBar;
-				let sum = 0;
-				let count = 0;
-
-				for (let j = start; j < end && j < channelData.length; j += 100) {
-					sum += Math.abs(channelData[j]);
-					count++;
-				}
-
-				const average = count > 0 ? sum / count : 0;
-				waveformData.push(Math.min(1, average * 3));
-			}
-
-			setPrecomputedWaveform(waveformData);
-		} catch (error) {
-			console.error("Error precomputing waveform:", error);
-		}
-	}, []);
-
-	useEffect(() => {
-		const track = {
-			id: exampleTracks[0].id,
-			src: exampleTracks[0].url,
-			data: { name: exampleTracks[0].name },
-		};
-		playerApiRef.current.setActiveItem(track);
-		precomputeWaveform(track.src);
-	}, [precomputeWaveform]);
-
-	const createImpulseResponse = (
-		audioContext: AudioContext,
-		duration: number,
-		decay: number,
-	) => {
-		const sampleRate = audioContext.sampleRate;
-		const length = sampleRate * duration;
-		const impulse = audioContext.createBuffer(2, length, sampleRate);
-
-		for (let channel = 0; channel < 2; channel++) {
-			const channelData = impulse.getChannelData(channel);
-			for (let i = 0; i < length; i++) {
-				const envelope = Math.pow(1 - i / length, decay);
-				const earlyReflections = i < length * 0.1 ? Math.random() * 0.5 : 0;
-				const diffusion = (Math.random() * 2 - 1) * envelope;
-				const stereoWidth = channel === 0 ? 0.9 : 1.1;
-
-				channelData[i] = (diffusion + earlyReflections) * stereoWidth * 0.8;
-			}
-		}
-		return impulse;
-	};
-
-	const setupAudioContext = useCallback((ambience: boolean) => {
-		if (!playerApiRef.current.ref.current) {
-			return;
-		}
-
-		if (
-			audioContextRef.current &&
-			sourceRef.current &&
-			wetGainRef.current &&
-			dryGainRef.current
-		) {
-			return;
-		}
-
-		try {
-			let audioContext = audioContextRef.current;
-			let source = sourceRef.current;
-			let analyser = analyserRef.current;
-
-			if (!audioContext) {
-				audioContext = new (
-					window.AudioContext ||
-					(window as unknown as { webkitAudioContext: typeof AudioContext })
-						.webkitAudioContext
-				)();
-				audioContextRef.current = audioContext;
-			}
-
-			if (audioContext.state === "suspended") {
-				audioContext.resume();
-			}
-
-			if (!source) {
-				source = audioContext.createMediaElementSource(
-					playerApiRef.current.ref.current,
-				);
-				sourceRef.current = source;
-			}
-
-			if (!analyser) {
-				analyser = audioContext.createAnalyser();
-				analyser.fftSize = 512;
-				analyser.smoothingTimeConstant = 0.7;
-				analyserRef.current = analyser;
-			}
-
-			const convolver = audioContext.createConvolver();
-			convolver.buffer = createImpulseResponse(audioContext, 6, 1.5);
-
-			const delay = audioContext.createDelay(2);
-			delay.delayTime.value = 0.001;
-
-			const feedback = audioContext.createGain();
-			feedback.gain.value = 0.05;
-
-			const lowPassFilter = audioContext.createBiquadFilter();
-			lowPassFilter.type = "lowpass";
-			lowPassFilter.frequency.value = 1500;
-			lowPassFilter.Q.value = 0.5;
-
-			const highPassFilter = audioContext.createBiquadFilter();
-			highPassFilter.type = "highpass";
-			highPassFilter.frequency.value = 100;
-			highPassFilter.Q.value = 0.7;
-
-			const wetGain = audioContext.createGain();
-			wetGain.gain.value = ambience ? 0.85 : 0;
-
-			const dryGain = audioContext.createGain();
-			dryGain.gain.value = ambience ? 0.4 : 1;
-
-			const masterGain = audioContext.createGain();
-			masterGain.gain.value = 1;
-
-			const compressor = audioContext.createDynamicsCompressor();
-			compressor.threshold.value = -12;
-			compressor.knee.value = 2;
-			compressor.ratio.value = 8;
-			compressor.attack.value = 0.003;
-			compressor.release.value = 0.1;
-
-			try {
-				source.disconnect();
-				if (analyserRef.current) analyserRef.current.disconnect();
-			} catch (e) {}
-
-			source.connect(dryGain);
-			dryGain.connect(masterGain);
-
-			source.connect(highPassFilter);
-			highPassFilter.connect(convolver);
-			convolver.connect(delay);
-
-			delay.connect(feedback);
-			feedback.connect(lowPassFilter);
-			lowPassFilter.connect(delay);
-
-			delay.connect(wetGain);
-			wetGain.connect(masterGain);
-
-			masterGain.connect(compressor);
-			compressor.connect(analyser);
-			analyser.connect(audioContext.destination);
-
-			convolverRef.current = convolver;
-			delayRef.current = delay;
-			feedbackRef.current = feedback;
-			wetGainRef.current = wetGain;
-			dryGainRef.current = dryGain;
-			masterGainRef.current = masterGain;
-			lowPassFilterRef.current = lowPassFilter;
-			highPassFilterRef.current = highPassFilter;
-		} catch (error) {
-			console.error("Error setting up audio context:", error);
-		}
-	}, []);
-
-	useEffect(() => {
-		const handlePlay = () => {
-			isPlayingRef.current = true;
-			globalAudioState.isPlaying = true;
-
-			if (!analyserRef.current) {
-				setTimeout(() => {
-					setupAudioContext(ambienceMode);
-				}, 100);
-			}
-		};
-		const handlePause = () => {
-			isPlayingRef.current = false;
-			globalAudioState.isPlaying = false;
-		};
-
-		const checkInterval = setInterval(() => {
-			const audioEl = playerApiRef.current.ref.current;
-			if (audioEl) {
-				clearInterval(checkInterval);
-
-				audioEl.addEventListener("play", handlePlay);
-				audioEl.addEventListener("pause", handlePause);
-				audioEl.addEventListener("ended", handlePause);
-
-				if (!audioEl.paused) {
-					handlePlay();
-				}
-			}
-		}, 100);
-
-		return () => {
-			clearInterval(checkInterval);
-			const audioEl = playerApiRef.current.ref.current;
-			if (audioEl) {
-				audioEl.removeEventListener("play", handlePlay);
-				audioEl.removeEventListener("pause", handlePause);
-				audioEl.removeEventListener("ended", handlePause);
-			}
-		};
-	}, [ambienceMode, setupAudioContext]);
-
-	useEffect(() => {
-		globalAudioState.isDark = isDark;
-	}, [isDark]);
-
-	useEffect(() => {
-		if (playerApiRef.current.ref.current) {
-			playerApiRef.current.ref.current.volume = volume;
-		}
-		globalAudioState.volume = volume;
-	}, [volume]);
-
-	useEffect(() => {
-		if (!audioContextRef.current) {
-			return;
-		}
-
-		const targetWet = ambienceMode ? 0.7 : 0;
-		const targetDry = ambienceMode ? 0.5 : 1;
-		const currentTime = audioContextRef.current.currentTime;
-
-		if (wetGainRef.current && dryGainRef.current) {
-			wetGainRef.current.gain.cancelScheduledValues(currentTime);
-			dryGainRef.current.gain.cancelScheduledValues(currentTime);
-
-			wetGainRef.current.gain.setValueAtTime(
-				wetGainRef.current.gain.value,
-				currentTime,
-			);
-			dryGainRef.current.gain.setValueAtTime(
-				dryGainRef.current.gain.value,
-				currentTime,
-			);
-
-			wetGainRef.current.gain.linearRampToValueAtTime(
-				targetWet,
-				currentTime + 0.5,
-			);
-			dryGainRef.current.gain.linearRampToValueAtTime(
-				targetDry,
-				currentTime + 0.5,
-			);
-		}
-
-		if (feedbackRef.current) {
-			feedbackRef.current.gain.cancelScheduledValues(currentTime);
-			feedbackRef.current.gain.setValueAtTime(
-				feedbackRef.current.gain.value,
-				currentTime,
-			);
-			feedbackRef.current.gain.linearRampToValueAtTime(
-				ambienceMode ? 0.25 : 0.05,
-				currentTime + 0.5,
-			);
-		}
-
-		if (delayRef.current) {
-			delayRef.current.delayTime.cancelScheduledValues(currentTime);
-			delayRef.current.delayTime.setValueAtTime(
-				delayRef.current.delayTime.value,
-				currentTime,
-			);
-			delayRef.current.delayTime.linearRampToValueAtTime(
-				ambienceMode ? 0.25 : 0.001,
-				currentTime + 0.5,
-			);
-		}
-
-		if (lowPassFilterRef.current) {
-			lowPassFilterRef.current.frequency.cancelScheduledValues(currentTime);
-			lowPassFilterRef.current.frequency.setValueAtTime(
-				lowPassFilterRef.current.frequency.value,
-				currentTime,
-			);
-			lowPassFilterRef.current.frequency.linearRampToValueAtTime(
-				ambienceMode ? 800 : 1500,
-				currentTime + 0.5,
-			);
-			lowPassFilterRef.current.Q.linearRampToValueAtTime(
-				ambienceMode ? 0.7 : 0.5,
-				currentTime + 0.5,
-			);
-		}
-
-		if (highPassFilterRef.current) {
-			highPassFilterRef.current.frequency.cancelScheduledValues(currentTime);
-			highPassFilterRef.current.frequency.setValueAtTime(
-				highPassFilterRef.current.frequency.value,
-				currentTime,
-			);
-			highPassFilterRef.current.frequency.linearRampToValueAtTime(
-				ambienceMode ? 200 : 100,
-				currentTime + 0.5,
-			);
-		}
-
-		if (masterGainRef.current) {
-			masterGainRef.current.gain.cancelScheduledValues(currentTime);
-			masterGainRef.current.gain.setValueAtTime(
-				masterGainRef.current.gain.value,
-				currentTime,
-			);
-			masterGainRef.current.gain.linearRampToValueAtTime(
-				ambienceMode ? 1.2 : 1,
-				currentTime + 0.5,
-			);
-		}
-	}, [ambienceMode]);
-
-	useEffect(() => {
-		if (!isScrubbing && !isMomentumActive && playerApiRef.current.ref.current) {
-			let animationId: number;
-
-			const updatePosition = () => {
-				const audioEl = playerApiRef.current.ref.current;
-				if (
-					audioEl &&
-					!isScrubbing &&
-					!isMomentumActive &&
-					waveformElementRef.current
-				) {
-					const duration = audioEl.duration;
-					const currentTime = audioEl.currentTime;
-					if (!isNaN(duration) && duration > 0) {
-						const position = currentTime / duration;
-						const containerWidth = containerWidthRef.current;
-						const totalWidth = totalBarsRef.current * 5;
-						const newOffset = containerWidth - position * totalWidth;
-						waveformOffset.current = newOffset;
-						waveformElementRef.current.style.transform = `translateX(${newOffset}px)`;
-					}
-				}
-				animationId = requestAnimationFrame(updatePosition);
-			};
-
-			animationId = requestAnimationFrame(updatePosition);
-			return () => cancelAnimationFrame(animationId);
-		}
-	}, [isScrubbing, isMomentumActive]);
-
-	useEffect(() => {
-		let animationId: number;
-
-		const updateWaveform = () => {
-			if (analyserRef.current && isPlayingRef.current) {
-				const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount);
-				analyserRef.current.getByteFrequencyData(dataArray);
-
-				const normalizedData = Array.from(dataArray).map((value) => {
-					const normalized = value / 255;
-					return normalized;
-				});
-
-				audioDataRef.current = normalizedData;
-			} else if (!isPlayingRef.current && audioDataRef.current.length > 0) {
-				audioDataRef.current = audioDataRef.current.map((v) => v * 0.9);
-			}
-
-			animationId = requestAnimationFrame(updateWaveform);
-		};
-
-		animationId = requestAnimationFrame(updateWaveform);
-
-		return () => {
-			if (animationId) {
-				cancelAnimationFrame(animationId);
-			}
-		};
-	}, []);
-
-	const playTrack = useCallback(
-		(index: number) => {
-			setCurrentTrackIndex(index);
-			const track = {
-				id: exampleTracks[index].id,
-				src: exampleTracks[index].url,
-				data: { name: exampleTracks[index].name },
-			};
-			playerApiRef.current.play(track);
-			setShowTrackList(false);
-			precomputeWaveform(track.src);
-		},
-		[precomputeWaveform],
-	);
-
-	const nextTrack = () => {
-		const nextIndex = (currentTrackIndex + 1) % exampleTracks.length;
-		playTrack(nextIndex);
-	};
-
-	const prevTrack = () => {
-		const prevIndex =
-			(currentTrackIndex - 1 + exampleTracks.length) % exampleTracks.length;
-		playTrack(prevIndex);
-	};
-
-	const playScratchSound = (position: number, speed: number = 1) => {
-		if (!audioContextRef.current) {
-			const audioContext = new (
-				window.AudioContext ||
-				(window as unknown as { webkitAudioContext: typeof AudioContext })
-					.webkitAudioContext
-			)();
-			audioContextRef.current = audioContext;
-		}
-
-		if (audioContextRef.current.state === "suspended") {
-			audioContextRef.current.resume();
-		}
-
-		if (!audioBufferRef.current) {
-			return;
-		}
-
-		stopScratchSound();
-
-		try {
-			const source = audioContextRef.current.createBufferSource();
-			source.buffer = audioBufferRef.current;
-
-			const startTime = Math.max(
-				0,
-				Math.min(
-					audioBufferRef.current.duration - 0.1,
-					position * audioBufferRef.current.duration,
-				),
-			);
-
-			const filter = audioContextRef.current.createBiquadFilter();
-			filter.type = "lowpass";
-			filter.frequency.value = Math.max(800, 2500 - speed * 1500);
-			filter.Q.value = 3;
-
-			source.playbackRate.value = Math.max(0.4, Math.min(2.5, 1 + speed * 0.5));
-
-			const gainNode = audioContextRef.current.createGain();
-			gainNode.gain.value = 1.0;
-
-			source.connect(filter);
-			filter.connect(gainNode);
-			gainNode.connect(audioContextRef.current.destination);
-
-			source.start(0, startTime, 0.06);
-
-			scratchBufferRef.current = source;
-		} catch (error) {
-			console.error("Error playing scratch sound:", error);
-		}
-	};
-
-	const stopScratchSound = () => {
-		if (scratchBufferRef.current) {
-			try {
-				scratchBufferRef.current.stop();
-			} catch {}
-			scratchBufferRef.current = null;
-		}
-	};
-
-	const tracks = exampleTracks.map((t) => ({
-		id: t.id,
-		title: t.name,
-		artist: "ElevenLabs Music",
-	}));
-	const currentTrack = tracks[currentTrackIndex];
-
-	return (
-		<Card className={cn("relative", className)}>
-			<div className="bg-muted-foreground/30 absolute top-0 left-1/2 h-3 w-48 -translate-x-1/2 rounded-b-full" />
-			<div className="bg-muted-foreground/20 absolute top-0 left-1/2 h-2 w-44 -translate-x-1/2 rounded-b-full" />
-
-			<div className="relative space-y-6 p-4">
-				<div className="border-border rounded-lg border bg-black/5 p-4 backdrop-blur-sm dark:bg-black/50">
-					<div className="space-y-2">
-						<div className="flex items-center justify-between">
-							<div className="min-w-0 flex-1">
-								<h3 className="text-foreground truncate text-sm font-medium">
-									{currentTrack.title}
-								</h3>
-								<Link
-									href="https://elevenmusic.link/ui"
-									className="text-muted-foreground truncate text-xs"
-								>
-									{currentTrack.artist}
-								</Link>
-							</div>
-							<div className="flex gap-1">
-								<Button
-									variant="ghost"
-									size="icon"
-									className={cn(
-										"h-8 w-8 transition-all",
-										ambienceMode
-											? "text-primary hover:text-primary/80"
-											: "text-muted-foreground hover:text-foreground",
-									)}
-									onClick={() => setAmbienceMode(!ambienceMode)}
-								>
-									<Sparkles className="h-4 w-4" />
-								</Button>
-								<Button
-									variant="ghost"
-									size="icon"
-									className="text-muted-foreground hover:text-foreground h-8 w-8"
-									onClick={() => setShowTrackList(!showTrackList)}
-								>
-									<Music className="h-4 w-4" />
-								</Button>
-							</div>
-						</div>
-
-						<div
-							className="waveform-container bg-foreground/10 relative h-12 cursor-grab overflow-hidden rounded-lg p-2 active:cursor-grabbing dark:bg-black/80"
-							onTouchStart={(e) => {
-								e.preventDefault();
-								setIsScrubbing(true);
-
-								const wasPlaying = isPlayingRef.current;
-
-								if (isPlayingRef.current) {
-									playerApiRef.current.pause();
-								}
-
-								const rect = e.currentTarget.getBoundingClientRect();
-								const startX = e.touches[0].clientX;
-								const containerWidth = rect.width;
-								containerWidthRef.current = containerWidth;
-								const totalWidth = totalBarsRef.current * 5;
-								const currentOffset = waveformOffset.current;
-								let lastTouchX = startX;
-								let lastScratchTime = 0;
-								const scratchThrottle = 10;
-
-								let velocity = 0;
-								let lastTime = Date.now();
-								let lastClientX = e.touches[0].clientX;
-
-								const handleMove = (e: TouchEvent) => {
-									const touch = e.touches[0];
-									const deltaX = touch.clientX - startX;
-									const newOffset = currentOffset + deltaX;
-
-									const minOffset = containerWidth - totalWidth;
-									const maxOffset = containerWidth;
-									const clampedOffset = Math.max(
-										minOffset,
-										Math.min(maxOffset, newOffset),
-									);
-									waveformOffset.current = clampedOffset;
-									if (waveformElementRef.current) {
-										waveformElementRef.current.style.transform = `translateX(${clampedOffset}px)`;
-									}
-
-									const position = Math.max(
-										0,
-										Math.min(1, (containerWidth - clampedOffset) / totalWidth),
-									);
-
-									const audioEl = playerApiRef.current.ref.current;
-									if (audioEl && !isNaN(audioEl.duration)) {
-										audioEl.currentTime = position * audioEl.duration;
-									}
-
-									const now = Date.now();
-									const touchDelta = touch.clientX - lastTouchX;
-
-									const timeDelta = now - lastTime;
-									if (timeDelta > 0) {
-										const instantVelocity =
-											(touch.clientX - lastClientX) / timeDelta;
-										velocity = velocity * 0.6 + instantVelocity * 0.4;
-									}
-									lastTime = now;
-									lastClientX = touch.clientX;
-
-									if (Math.abs(touchDelta) > 0) {
-										if (now - lastScratchTime >= scratchThrottle) {
-											const speed = Math.min(3, Math.abs(touchDelta) / 3);
-											playScratchSound(position, speed);
-											lastScratchTime = now;
-										}
-									}
-									lastTouchX = touch.clientX;
-								};
-
-								const handleEnd = () => {
-									setIsScrubbing(false);
-									stopScratchSound();
-
-									if (Math.abs(velocity) > 0.1) {
-										setIsMomentumActive(true);
-										let momentumOffset = waveformOffset.current;
-										let currentVelocity = velocity * 15;
-										const friction = 0.92;
-										const minVelocity = 0.5;
-										let lastScratchFrame = 0;
-										const scratchFrameInterval = 50;
-
-										const animateMomentum = () => {
-											if (Math.abs(currentVelocity) > minVelocity) {
-												momentumOffset += currentVelocity;
-												currentVelocity *= friction;
-
-												const minOffset = containerWidth - totalWidth;
-												const maxOffset = containerWidth;
-												const clampedOffset = Math.max(
-													minOffset,
-													Math.min(maxOffset, momentumOffset),
-												);
-
-												if (clampedOffset !== momentumOffset) {
-													currentVelocity = 0;
-												}
-
-												momentumOffset = clampedOffset;
-												waveformOffset.current = clampedOffset;
-												if (waveformElementRef.current) {
-													waveformElementRef.current.style.transform = `translateX(${clampedOffset}px)`;
-												}
-
-												const position = Math.max(
-													0,
-													Math.min(
-														1,
-														(containerWidth - clampedOffset) / totalWidth,
-													),
-												);
-
-												const audioEl2 = playerApiRef.current.ref.current;
-												if (audioEl2 && !isNaN(audioEl2.duration)) {
-													audioEl2.currentTime = position * audioEl2.duration;
-												}
-
-												const now = Date.now();
-												if (now - lastScratchFrame >= scratchFrameInterval) {
-													const speed = Math.min(
-														2.5,
-														Math.abs(currentVelocity) / 10,
-													);
-													if (speed > 0.1) {
-														playScratchSound(position, speed);
-													}
-													lastScratchFrame = now;
-												}
-
-												requestAnimationFrame(animateMomentum);
-											} else {
-												stopScratchSound();
-												setIsMomentumActive(false);
-												if (wasPlaying) {
-													setTimeout(() => {
-														playerApiRef.current.play();
-													}, 10);
-												}
-											}
-										};
-
-										requestAnimationFrame(animateMomentum);
-									} else {
-										if (wasPlaying) {
-											playerApiRef.current.play();
-										}
-									}
-
-									document.removeEventListener("touchmove", handleMove);
-									document.removeEventListener("touchend", handleEnd);
-								};
-
-								document.addEventListener("touchmove", handleMove);
-								document.addEventListener("touchend", handleEnd);
-							}}
-							onMouseDown={(e) => {
-								e.preventDefault();
-								setIsScrubbing(true);
-
-								const wasPlaying = isPlayingRef.current;
-
-								if (isPlayingRef.current) {
-									playerApiRef.current.pause();
-								}
-
-								const rect = e.currentTarget.getBoundingClientRect();
-								const startX = e.clientX;
-								const containerWidth = rect.width;
-								containerWidthRef.current = containerWidth;
-								const totalWidth = totalBarsRef.current * 5;
-								const currentOffset = waveformOffset.current;
-								let lastMouseX = startX;
-								let lastScratchTime = 0;
-								const scratchThrottle = 10;
-
-								let velocity = 0;
-								let lastTime = Date.now();
-								let lastClientX = e.clientX;
-
-								const handleMove = (e: MouseEvent) => {
-									const deltaX = e.clientX - startX;
-									const newOffset = currentOffset + deltaX;
-
-									const minOffset = containerWidth - totalWidth;
-									const maxOffset = containerWidth;
-									const clampedOffset = Math.max(
-										minOffset,
-										Math.min(maxOffset, newOffset),
-									);
-									waveformOffset.current = clampedOffset;
-									if (waveformElementRef.current) {
-										waveformElementRef.current.style.transform = `translateX(${clampedOffset}px)`;
-									}
-
-									const position = Math.max(
-										0,
-										Math.min(1, (containerWidth - clampedOffset) / totalWidth),
-									);
-
-									const audioEl = playerApiRef.current.ref.current;
-									if (audioEl && !isNaN(audioEl.duration)) {
-										audioEl.currentTime = position * audioEl.duration;
-									}
-
-									const now = Date.now();
-									const mouseDelta = e.clientX - lastMouseX;
-
-									const timeDelta = now - lastTime;
-									if (timeDelta > 0) {
-										const instantVelocity =
-											(e.clientX - lastClientX) / timeDelta;
-										velocity = velocity * 0.6 + instantVelocity * 0.4;
-									}
-									lastTime = now;
-									lastClientX = e.clientX;
-
-									if (Math.abs(mouseDelta) > 0) {
-										if (now - lastScratchTime >= scratchThrottle) {
-											const speed = Math.min(3, Math.abs(mouseDelta) / 3);
-											playScratchSound(position, speed);
-											lastScratchTime = now;
-										}
-									}
-									lastMouseX = e.clientX;
-								};
-
-								const handleUp = () => {
-									setIsScrubbing(false);
-									stopScratchSound();
-
-									if (Math.abs(velocity) > 0.1) {
-										setIsMomentumActive(true);
-										let momentumOffset = waveformOffset.current;
-										let currentVelocity = velocity * 15;
-										const friction = 0.92;
-										const minVelocity = 0.5;
-										let lastScratchFrame = 0;
-										const scratchFrameInterval = 50;
-
-										const animateMomentum = () => {
-											if (Math.abs(currentVelocity) > minVelocity) {
-												momentumOffset += currentVelocity;
-												currentVelocity *= friction;
-
-												const minOffset = containerWidth - totalWidth;
-												const maxOffset = containerWidth;
-												const clampedOffset = Math.max(
-													minOffset,
-													Math.min(maxOffset, momentumOffset),
-												);
-
-												if (clampedOffset !== momentumOffset) {
-													currentVelocity = 0;
-												}
-
-												momentumOffset = clampedOffset;
-												waveformOffset.current = clampedOffset;
-												if (waveformElementRef.current) {
-													waveformElementRef.current.style.transform = `translateX(${clampedOffset}px)`;
-												}
-
-												const position = Math.max(
-													0,
-													Math.min(
-														1,
-														(containerWidth - clampedOffset) / totalWidth,
-													),
-												);
-
-												const audioEl2 = playerApiRef.current.ref.current;
-												if (audioEl2 && !isNaN(audioEl2.duration)) {
-													audioEl2.currentTime = position * audioEl2.duration;
-												}
-
-												const now = Date.now();
-												if (now - lastScratchFrame >= scratchFrameInterval) {
-													const speed = Math.min(
-														2.5,
-														Math.abs(currentVelocity) / 10,
-													);
-													if (speed > 0.1) {
-														playScratchSound(position, speed);
-													}
-													lastScratchFrame = now;
-												}
-
-												requestAnimationFrame(animateMomentum);
-											} else {
-												stopScratchSound();
-												setIsMomentumActive(false);
-												if (wasPlaying) {
-													setTimeout(() => {
-														playerApiRef.current.play();
-													}, 10);
-												}
-											}
-										};
-
-										requestAnimationFrame(animateMomentum);
-									} else {
-										if (wasPlaying) {
-											playerApiRef.current.play();
-										}
-									}
-
-									document.removeEventListener("mousemove", handleMove);
-									document.removeEventListener("mouseup", handleUp);
-								};
-
-								document.addEventListener("mousemove", handleMove);
-								document.addEventListener("mouseup", handleUp);
-							}}
-						>
-							<div className="relative h-full w-full overflow-hidden">
-								<div
-									ref={waveformElementRef}
-									style={{
-										transform: `translateX(${waveformOffset.current}px)`,
-										transition:
-											isScrubbing || isMomentumActive
-												? "none"
-												: "transform 0.016s linear",
-										width: `${totalBarsRef.current * 5}px`,
-										position: "absolute",
-										left: 0,
-									}}
-								>
-									<Waveform
-										key={isDark ? "dark" : "light"}
-										data={
-											precomputedWaveform.length > 0
-												? precomputedWaveform
-												: audioDataRef.current
-										}
-										height={32}
-										barWidth={3}
-										barGap={2}
-										fadeEdges={true}
-										fadeWidth={24}
-										barRadius={1}
-										barColor={isDark ? "#a1a1aa" : "#71717a"}
-									/>
-								</div>
-							</div>
-						</div>
-
-						<TimeDisplay />
-					</div>
-				</div>
-
-				{showTrackList && (
-					<div className="bg-card/95 border-border absolute top-36 right-8 left-8 z-10 rounded-lg border p-3 shadow-xl backdrop-blur">
-						<h4 className="text-muted-foreground mb-2 font-mono text-xs tracking-wider uppercase">
-							Playlist
-						</h4>
-						<div className="max-h-32 space-y-1 overflow-y-auto">
-							{tracks.map((track, index) => (
-								<button
-									key={track.id}
-									onClick={() => playTrack(index)}
-									className={cn(
-										"w-full rounded px-2 py-1 text-left text-xs transition-all",
-										currentTrackIndex === index
-											? "bg-foreground/10 text-foreground dark:bg-primary/20 dark:text-primary"
-											: "hover:bg-muted text-muted-foreground",
-									)}
-								>
-									<div className="flex items-center gap-2">
-										<span className="text-muted-foreground/60">
-											{index + 1}
-										</span>
-										<div className="min-w-0 flex-1">
-											<div className="truncate">{track.title}</div>
-											<div className="text-muted-foreground/60 truncate text-xs">
-												{track.artist}
-											</div>
-										</div>
-									</div>
-								</button>
-							))}
-						</div>
-					</div>
-				)}
-
-				<div className="flex justify-center gap-3">
-					<Button
-						variant="outline"
-						size="icon"
-						className="border-border bg-background hover:bg-muted h-10 w-10 rounded-full"
-						onClick={prevTrack}
-					>
-						<SkipBack className="text-muted-foreground h-4 w-4" />
-					</Button>
-
-					<PlayButton currentTrackIndex={currentTrackIndex} />
-
-					<Button
-						variant="outline"
-						size="icon"
-						className="border-border bg-background hover:bg-muted h-10 w-10 rounded-full"
-						onClick={nextTrack}
-					>
-						<SkipForward className="text-muted-foreground h-4 w-4" />
-					</Button>
-				</div>
-
-				<SpeakerOrbsSection isDark={isDark} audioDataRef={audioDataRef} />
-
-				<VolumeSlider volume={volume} setVolume={setVolume} />
-			</div>
-		</Card>
-	);
+  const playerApiRef = playerRef
+  const isPlayingRef = useRef(false)
+
+  const [volume, setVolume] = useState(0.7)
+  const [currentTrackIndex, setCurrentTrackIndex] = useState(0)
+  const [showTrackList, setShowTrackList] = useState(false)
+  const audioDataRef = useRef<number[]>([])
+  const [isDark, setIsDark] = useState(false)
+  const [isScrubbing, setIsScrubbing] = useState(false)
+  const [isMomentumActive, setIsMomentumActive] = useState(false)
+  const [precomputedWaveform, setPrecomputedWaveform] = useState<number[]>([])
+  const waveformOffset = useRef(0)
+  const waveformElementRef = useRef<HTMLDivElement>(null)
+  const [ambienceMode, setAmbienceMode] = useState(false)
+  const containerWidthRef = useRef(300)
+  const analyserRef = useRef<AnalyserNode | null>(null)
+  const audioContextRef = useRef<AudioContext | null>(null)
+  const sourceRef = useRef<MediaElementAudioSourceNode | null>(null)
+  const audioBufferRef = useRef<AudioBuffer | null>(null)
+  const scratchBufferRef = useRef<AudioBufferSourceNode | null>(null)
+  const totalBarsRef = useRef(600)
+  const convolverRef = useRef<ConvolverNode | null>(null)
+  const delayRef = useRef<DelayNode | null>(null)
+  const feedbackRef = useRef<GainNode | null>(null)
+  const wetGainRef = useRef<GainNode | null>(null)
+  const dryGainRef = useRef<GainNode | null>(null)
+  const masterGainRef = useRef<GainNode | null>(null)
+  const lowPassFilterRef = useRef<BiquadFilterNode | null>(null)
+  const highPassFilterRef = useRef<BiquadFilterNode | null>(null)
+
+  useEffect(() => {
+    const checkTheme = () => {
+      const isDarkMode = document.documentElement.classList.contains("dark")
+      setIsDark(isDarkMode)
+    }
+
+    checkTheme()
+
+    const observer = new MutationObserver(checkTheme)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    })
+
+    return () => observer.disconnect()
+  }, [])
+
+  useEffect(() => {
+    const container = document.querySelector(".waveform-container")
+    if (container) {
+      const rect = container.getBoundingClientRect()
+      containerWidthRef.current = rect.width
+      waveformOffset.current = rect.width
+      if (waveformElementRef.current) {
+        waveformElementRef.current.style.transform = `translateX(${rect.width}px)`
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    if (precomputedWaveform.length > 0 && containerWidthRef.current > 0) {
+      waveformOffset.current = containerWidthRef.current
+      if (waveformElementRef.current) {
+        waveformElementRef.current.style.transform = `translateX(${containerWidthRef.current}px)`
+      }
+      if (playerApiRef.current.ref.current) {
+        playerApiRef.current.ref.current.currentTime = 0
+      }
+    }
+  }, [precomputedWaveform])
+
+  const precomputeWaveform = useCallback(async (audioUrl: string) => {
+    try {
+      const response = await fetch(audioUrl)
+      const arrayBuffer = await response.arrayBuffer()
+
+      const offlineContext = new OfflineAudioContext(1, 44100 * 5, 44100)
+      const audioBuffer = await offlineContext.decodeAudioData(
+        arrayBuffer.slice(0)
+      )
+
+      if (!audioContextRef.current) {
+        const audioContext = new (window.AudioContext ||
+          (window as unknown as { webkitAudioContext: typeof AudioContext })
+            .webkitAudioContext)()
+        audioContextRef.current = audioContext
+      }
+
+      audioBufferRef.current =
+        await audioContextRef.current.decodeAudioData(arrayBuffer)
+
+      const channelData = audioBuffer.getChannelData(0)
+      const samplesPerBar = Math.floor(
+        channelData.length / totalBarsRef.current
+      )
+      const waveformData: number[] = []
+
+      for (let i = 0; i < totalBarsRef.current; i++) {
+        const start = i * samplesPerBar
+        const end = start + samplesPerBar
+        let sum = 0
+        let count = 0
+
+        for (let j = start; j < end && j < channelData.length; j += 100) {
+          sum += Math.abs(channelData[j])
+          count++
+        }
+
+        const average = count > 0 ? sum / count : 0
+        waveformData.push(Math.min(1, average * 3))
+      }
+
+      setPrecomputedWaveform(waveformData)
+    } catch (error) {
+      console.error("Error precomputing waveform:", error)
+    }
+  }, [])
+
+  useEffect(() => {
+    const track = {
+      id: exampleTracks[0].id,
+      src: exampleTracks[0].url,
+      data: { name: exampleTracks[0].name },
+    }
+    playerApiRef.current.setActiveItem(track)
+    precomputeWaveform(track.src)
+  }, [precomputeWaveform])
+
+  const createImpulseResponse = (
+    audioContext: AudioContext,
+    duration: number,
+    decay: number
+  ) => {
+    const sampleRate = audioContext.sampleRate
+    const length = sampleRate * duration
+    const impulse = audioContext.createBuffer(2, length, sampleRate)
+
+    for (let channel = 0; channel < 2; channel++) {
+      const channelData = impulse.getChannelData(channel)
+      for (let i = 0; i < length; i++) {
+        const envelope = Math.pow(1 - i / length, decay)
+        const earlyReflections = i < length * 0.1 ? Math.random() * 0.5 : 0
+        const diffusion = (Math.random() * 2 - 1) * envelope
+        const stereoWidth = channel === 0 ? 0.9 : 1.1
+
+        channelData[i] = (diffusion + earlyReflections) * stereoWidth * 0.8
+      }
+    }
+    return impulse
+  }
+
+  const setupAudioContext = useCallback((ambience: boolean) => {
+    if (!playerApiRef.current.ref.current) {
+      return
+    }
+
+    if (
+      audioContextRef.current &&
+      sourceRef.current &&
+      wetGainRef.current &&
+      dryGainRef.current
+    ) {
+      return
+    }
+
+    try {
+      let audioContext = audioContextRef.current
+      let source = sourceRef.current
+      let analyser = analyserRef.current
+
+      if (!audioContext) {
+        audioContext = new (window.AudioContext ||
+          (window as unknown as { webkitAudioContext: typeof AudioContext })
+            .webkitAudioContext)()
+        audioContextRef.current = audioContext
+      }
+
+      if (audioContext.state === "suspended") {
+        audioContext.resume()
+      }
+
+      if (!source) {
+        source = audioContext.createMediaElementSource(
+          playerApiRef.current.ref.current
+        )
+        sourceRef.current = source
+      }
+
+      if (!analyser) {
+        analyser = audioContext.createAnalyser()
+        analyser.fftSize = 512
+        analyser.smoothingTimeConstant = 0.7
+        analyserRef.current = analyser
+      }
+
+      const convolver = audioContext.createConvolver()
+      convolver.buffer = createImpulseResponse(audioContext, 6, 1.5)
+
+      const delay = audioContext.createDelay(2)
+      delay.delayTime.value = 0.001
+
+      const feedback = audioContext.createGain()
+      feedback.gain.value = 0.05
+
+      const lowPassFilter = audioContext.createBiquadFilter()
+      lowPassFilter.type = "lowpass"
+      lowPassFilter.frequency.value = 1500
+      lowPassFilter.Q.value = 0.5
+
+      const highPassFilter = audioContext.createBiquadFilter()
+      highPassFilter.type = "highpass"
+      highPassFilter.frequency.value = 100
+      highPassFilter.Q.value = 0.7
+
+      const wetGain = audioContext.createGain()
+      wetGain.gain.value = ambience ? 0.85 : 0
+
+      const dryGain = audioContext.createGain()
+      dryGain.gain.value = ambience ? 0.4 : 1
+
+      const masterGain = audioContext.createGain()
+      masterGain.gain.value = 1
+
+      const compressor = audioContext.createDynamicsCompressor()
+      compressor.threshold.value = -12
+      compressor.knee.value = 2
+      compressor.ratio.value = 8
+      compressor.attack.value = 0.003
+      compressor.release.value = 0.1
+
+      try {
+        source.disconnect()
+        if (analyserRef.current) analyserRef.current.disconnect()
+      } catch (e) {}
+
+      source.connect(dryGain)
+      dryGain.connect(masterGain)
+
+      source.connect(highPassFilter)
+      highPassFilter.connect(convolver)
+      convolver.connect(delay)
+
+      delay.connect(feedback)
+      feedback.connect(lowPassFilter)
+      lowPassFilter.connect(delay)
+
+      delay.connect(wetGain)
+      wetGain.connect(masterGain)
+
+      masterGain.connect(compressor)
+      compressor.connect(analyser)
+      analyser.connect(audioContext.destination)
+
+      convolverRef.current = convolver
+      delayRef.current = delay
+      feedbackRef.current = feedback
+      wetGainRef.current = wetGain
+      dryGainRef.current = dryGain
+      masterGainRef.current = masterGain
+      lowPassFilterRef.current = lowPassFilter
+      highPassFilterRef.current = highPassFilter
+    } catch (error) {
+      console.error("Error setting up audio context:", error)
+    }
+  }, [])
+
+  useEffect(() => {
+    const handlePlay = () => {
+      isPlayingRef.current = true
+      globalAudioState.isPlaying = true
+
+      if (!analyserRef.current) {
+        setTimeout(() => {
+          setupAudioContext(ambienceMode)
+        }, 100)
+      }
+    }
+    const handlePause = () => {
+      isPlayingRef.current = false
+      globalAudioState.isPlaying = false
+    }
+
+    const checkInterval = setInterval(() => {
+      const audioEl = playerApiRef.current.ref.current
+      if (audioEl) {
+        clearInterval(checkInterval)
+
+        audioEl.addEventListener("play", handlePlay)
+        audioEl.addEventListener("pause", handlePause)
+        audioEl.addEventListener("ended", handlePause)
+
+        if (!audioEl.paused) {
+          handlePlay()
+        }
+      }
+    }, 100)
+
+    return () => {
+      clearInterval(checkInterval)
+      const audioEl = playerApiRef.current.ref.current
+      if (audioEl) {
+        audioEl.removeEventListener("play", handlePlay)
+        audioEl.removeEventListener("pause", handlePause)
+        audioEl.removeEventListener("ended", handlePause)
+      }
+    }
+  }, [ambienceMode, setupAudioContext])
+
+  useEffect(() => {
+    globalAudioState.isDark = isDark
+  }, [isDark])
+
+  useEffect(() => {
+    if (playerApiRef.current.ref.current) {
+      playerApiRef.current.ref.current.volume = volume
+    }
+    globalAudioState.volume = volume
+  }, [volume])
+
+  useEffect(() => {
+    if (!audioContextRef.current) {
+      return
+    }
+
+    const targetWet = ambienceMode ? 0.7 : 0
+    const targetDry = ambienceMode ? 0.5 : 1
+    const currentTime = audioContextRef.current.currentTime
+
+    if (wetGainRef.current && dryGainRef.current) {
+      wetGainRef.current.gain.cancelScheduledValues(currentTime)
+      dryGainRef.current.gain.cancelScheduledValues(currentTime)
+
+      wetGainRef.current.gain.setValueAtTime(
+        wetGainRef.current.gain.value,
+        currentTime
+      )
+      dryGainRef.current.gain.setValueAtTime(
+        dryGainRef.current.gain.value,
+        currentTime
+      )
+
+      wetGainRef.current.gain.linearRampToValueAtTime(
+        targetWet,
+        currentTime + 0.5
+      )
+      dryGainRef.current.gain.linearRampToValueAtTime(
+        targetDry,
+        currentTime + 0.5
+      )
+    }
+
+    if (feedbackRef.current) {
+      feedbackRef.current.gain.cancelScheduledValues(currentTime)
+      feedbackRef.current.gain.setValueAtTime(
+        feedbackRef.current.gain.value,
+        currentTime
+      )
+      feedbackRef.current.gain.linearRampToValueAtTime(
+        ambienceMode ? 0.25 : 0.05,
+        currentTime + 0.5
+      )
+    }
+
+    if (delayRef.current) {
+      delayRef.current.delayTime.cancelScheduledValues(currentTime)
+      delayRef.current.delayTime.setValueAtTime(
+        delayRef.current.delayTime.value,
+        currentTime
+      )
+      delayRef.current.delayTime.linearRampToValueAtTime(
+        ambienceMode ? 0.25 : 0.001,
+        currentTime + 0.5
+      )
+    }
+
+    if (lowPassFilterRef.current) {
+      lowPassFilterRef.current.frequency.cancelScheduledValues(currentTime)
+      lowPassFilterRef.current.frequency.setValueAtTime(
+        lowPassFilterRef.current.frequency.value,
+        currentTime
+      )
+      lowPassFilterRef.current.frequency.linearRampToValueAtTime(
+        ambienceMode ? 800 : 1500,
+        currentTime + 0.5
+      )
+      lowPassFilterRef.current.Q.linearRampToValueAtTime(
+        ambienceMode ? 0.7 : 0.5,
+        currentTime + 0.5
+      )
+    }
+
+    if (highPassFilterRef.current) {
+      highPassFilterRef.current.frequency.cancelScheduledValues(currentTime)
+      highPassFilterRef.current.frequency.setValueAtTime(
+        highPassFilterRef.current.frequency.value,
+        currentTime
+      )
+      highPassFilterRef.current.frequency.linearRampToValueAtTime(
+        ambienceMode ? 200 : 100,
+        currentTime + 0.5
+      )
+    }
+
+    if (masterGainRef.current) {
+      masterGainRef.current.gain.cancelScheduledValues(currentTime)
+      masterGainRef.current.gain.setValueAtTime(
+        masterGainRef.current.gain.value,
+        currentTime
+      )
+      masterGainRef.current.gain.linearRampToValueAtTime(
+        ambienceMode ? 1.2 : 1,
+        currentTime + 0.5
+      )
+    }
+  }, [ambienceMode])
+
+  useEffect(() => {
+    if (!isScrubbing && !isMomentumActive && playerApiRef.current.ref.current) {
+      let animationId: number
+
+      const updatePosition = () => {
+        const audioEl = playerApiRef.current.ref.current
+        if (
+          audioEl &&
+          !isScrubbing &&
+          !isMomentumActive &&
+          waveformElementRef.current
+        ) {
+          const duration = audioEl.duration
+          const currentTime = audioEl.currentTime
+          if (!isNaN(duration) && duration > 0) {
+            const position = currentTime / duration
+            const containerWidth = containerWidthRef.current
+            const totalWidth = totalBarsRef.current * 5
+            const newOffset = containerWidth - position * totalWidth
+            waveformOffset.current = newOffset
+            waveformElementRef.current.style.transform = `translateX(${newOffset}px)`
+          }
+        }
+        animationId = requestAnimationFrame(updatePosition)
+      }
+
+      animationId = requestAnimationFrame(updatePosition)
+      return () => cancelAnimationFrame(animationId)
+    }
+  }, [isScrubbing, isMomentumActive])
+
+  useEffect(() => {
+    let animationId: number
+
+    const updateWaveform = () => {
+      if (analyserRef.current && isPlayingRef.current) {
+        const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount)
+        analyserRef.current.getByteFrequencyData(dataArray)
+
+        const normalizedData = Array.from(dataArray).map((value) => {
+          const normalized = value / 255
+          return normalized
+        })
+
+        audioDataRef.current = normalizedData
+      } else if (!isPlayingRef.current && audioDataRef.current.length > 0) {
+        audioDataRef.current = audioDataRef.current.map((v) => v * 0.9)
+      }
+
+      animationId = requestAnimationFrame(updateWaveform)
+    }
+
+    animationId = requestAnimationFrame(updateWaveform)
+
+    return () => {
+      if (animationId) {
+        cancelAnimationFrame(animationId)
+      }
+    }
+  }, [])
+
+  const playTrack = useCallback(
+    (index: number) => {
+      setCurrentTrackIndex(index)
+      const track = {
+        id: exampleTracks[index].id,
+        src: exampleTracks[index].url,
+        data: { name: exampleTracks[index].name },
+      }
+      playerApiRef.current.play(track)
+      setShowTrackList(false)
+      precomputeWaveform(track.src)
+    },
+    [precomputeWaveform]
+  )
+
+  const nextTrack = () => {
+    const nextIndex = (currentTrackIndex + 1) % exampleTracks.length
+    playTrack(nextIndex)
+  }
+
+  const prevTrack = () => {
+    const prevIndex =
+      (currentTrackIndex - 1 + exampleTracks.length) % exampleTracks.length
+    playTrack(prevIndex)
+  }
+
+  const playScratchSound = (position: number, speed: number = 1) => {
+    if (!audioContextRef.current) {
+      const audioContext = new (window.AudioContext ||
+        (window as unknown as { webkitAudioContext: typeof AudioContext })
+          .webkitAudioContext)()
+      audioContextRef.current = audioContext
+    }
+
+    if (audioContextRef.current.state === "suspended") {
+      audioContextRef.current.resume()
+    }
+
+    if (!audioBufferRef.current) {
+      return
+    }
+
+    stopScratchSound()
+
+    try {
+      const source = audioContextRef.current.createBufferSource()
+      source.buffer = audioBufferRef.current
+
+      const startTime = Math.max(
+        0,
+        Math.min(
+          audioBufferRef.current.duration - 0.1,
+          position * audioBufferRef.current.duration
+        )
+      )
+
+      const filter = audioContextRef.current.createBiquadFilter()
+      filter.type = "lowpass"
+      filter.frequency.value = Math.max(800, 2500 - speed * 1500)
+      filter.Q.value = 3
+
+      source.playbackRate.value = Math.max(0.4, Math.min(2.5, 1 + speed * 0.5))
+
+      const gainNode = audioContextRef.current.createGain()
+      gainNode.gain.value = 1.0
+
+      source.connect(filter)
+      filter.connect(gainNode)
+      gainNode.connect(audioContextRef.current.destination)
+
+      source.start(0, startTime, 0.06)
+
+      scratchBufferRef.current = source
+    } catch (error) {
+      console.error("Error playing scratch sound:", error)
+    }
+  }
+
+  const stopScratchSound = () => {
+    if (scratchBufferRef.current) {
+      try {
+        scratchBufferRef.current.stop()
+      } catch {}
+      scratchBufferRef.current = null
+    }
+  }
+
+  const tracks = exampleTracks.map((t) => ({
+    id: t.id,
+    title: t.name,
+    artist: "ElevenLabs Music",
+  }))
+  const currentTrack = tracks[currentTrackIndex]
+
+  return (
+    <Card className={cn("relative", className)}>
+      <div className="bg-muted-foreground/30 absolute top-0 left-1/2 h-3 w-48 -translate-x-1/2 rounded-b-full" />
+      <div className="bg-muted-foreground/20 absolute top-0 left-1/2 h-2 w-44 -translate-x-1/2 rounded-b-full" />
+
+      <div className="relative space-y-6 p-4">
+        <div className="border-border rounded-lg border bg-black/5 p-4 backdrop-blur-sm dark:bg-black/50">
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <div className="min-w-0 flex-1">
+                <h3 className="text-foreground truncate text-sm font-medium">
+                  {currentTrack.title}
+                </h3>
+                <Link
+                  href="https://elevenmusic.link/ui"
+                  className="text-muted-foreground truncate text-xs"
+                >
+                  {currentTrack.artist}
+                </Link>
+              </div>
+              <div className="flex gap-1">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className={cn(
+                    "h-8 w-8 transition-all",
+                    ambienceMode
+                      ? "text-primary hover:text-primary/80"
+                      : "text-muted-foreground hover:text-foreground"
+                  )}
+                  onClick={() => setAmbienceMode(!ambienceMode)}
+                >
+                  <Sparkles className="h-4 w-4" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="text-muted-foreground hover:text-foreground h-8 w-8"
+                  onClick={() => setShowTrackList(!showTrackList)}
+                >
+                  <Music className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+
+            <div
+              className="waveform-container bg-foreground/10 relative h-12 cursor-grab overflow-hidden rounded-lg p-2 active:cursor-grabbing dark:bg-black/80"
+              onTouchStart={(e) => {
+                e.preventDefault()
+                setIsScrubbing(true)
+
+                const wasPlaying = isPlayingRef.current
+
+                if (isPlayingRef.current) {
+                  playerApiRef.current.pause()
+                }
+
+                const rect = e.currentTarget.getBoundingClientRect()
+                const startX = e.touches[0].clientX
+                const containerWidth = rect.width
+                containerWidthRef.current = containerWidth
+                const totalWidth = totalBarsRef.current * 5
+                const currentOffset = waveformOffset.current
+                let lastTouchX = startX
+                let lastScratchTime = 0
+                const scratchThrottle = 10
+
+                let velocity = 0
+                let lastTime = Date.now()
+                let lastClientX = e.touches[0].clientX
+
+                const handleMove = (e: TouchEvent) => {
+                  const touch = e.touches[0]
+                  const deltaX = touch.clientX - startX
+                  const newOffset = currentOffset + deltaX
+
+                  const minOffset = containerWidth - totalWidth
+                  const maxOffset = containerWidth
+                  const clampedOffset = Math.max(
+                    minOffset,
+                    Math.min(maxOffset, newOffset)
+                  )
+                  waveformOffset.current = clampedOffset
+                  if (waveformElementRef.current) {
+                    waveformElementRef.current.style.transform = `translateX(${clampedOffset}px)`
+                  }
+
+                  const position = Math.max(
+                    0,
+                    Math.min(1, (containerWidth - clampedOffset) / totalWidth)
+                  )
+
+                  const audioEl = playerApiRef.current.ref.current
+                  if (audioEl && !isNaN(audioEl.duration)) {
+                    audioEl.currentTime = position * audioEl.duration
+                  }
+
+                  const now = Date.now()
+                  const touchDelta = touch.clientX - lastTouchX
+
+                  const timeDelta = now - lastTime
+                  if (timeDelta > 0) {
+                    const instantVelocity =
+                      (touch.clientX - lastClientX) / timeDelta
+                    velocity = velocity * 0.6 + instantVelocity * 0.4
+                  }
+                  lastTime = now
+                  lastClientX = touch.clientX
+
+                  if (Math.abs(touchDelta) > 0) {
+                    if (now - lastScratchTime >= scratchThrottle) {
+                      const speed = Math.min(3, Math.abs(touchDelta) / 3)
+                      playScratchSound(position, speed)
+                      lastScratchTime = now
+                    }
+                  }
+                  lastTouchX = touch.clientX
+                }
+
+                const handleEnd = () => {
+                  setIsScrubbing(false)
+                  stopScratchSound()
+
+                  if (Math.abs(velocity) > 0.1) {
+                    setIsMomentumActive(true)
+                    let momentumOffset = waveformOffset.current
+                    let currentVelocity = velocity * 15
+                    const friction = 0.92
+                    const minVelocity = 0.5
+                    let lastScratchFrame = 0
+                    const scratchFrameInterval = 50
+
+                    const animateMomentum = () => {
+                      if (Math.abs(currentVelocity) > minVelocity) {
+                        momentumOffset += currentVelocity
+                        currentVelocity *= friction
+
+                        const minOffset = containerWidth - totalWidth
+                        const maxOffset = containerWidth
+                        const clampedOffset = Math.max(
+                          minOffset,
+                          Math.min(maxOffset, momentumOffset)
+                        )
+
+                        if (clampedOffset !== momentumOffset) {
+                          currentVelocity = 0
+                        }
+
+                        momentumOffset = clampedOffset
+                        waveformOffset.current = clampedOffset
+                        if (waveformElementRef.current) {
+                          waveformElementRef.current.style.transform = `translateX(${clampedOffset}px)`
+                        }
+
+                        const position = Math.max(
+                          0,
+                          Math.min(
+                            1,
+                            (containerWidth - clampedOffset) / totalWidth
+                          )
+                        )
+
+                        const audioEl2 = playerApiRef.current.ref.current
+                        if (audioEl2 && !isNaN(audioEl2.duration)) {
+                          audioEl2.currentTime = position * audioEl2.duration
+                        }
+
+                        const now = Date.now()
+                        if (now - lastScratchFrame >= scratchFrameInterval) {
+                          const speed = Math.min(
+                            2.5,
+                            Math.abs(currentVelocity) / 10
+                          )
+                          if (speed > 0.1) {
+                            playScratchSound(position, speed)
+                          }
+                          lastScratchFrame = now
+                        }
+
+                        requestAnimationFrame(animateMomentum)
+                      } else {
+                        stopScratchSound()
+                        setIsMomentumActive(false)
+                        if (wasPlaying) {
+                          setTimeout(() => {
+                            playerApiRef.current.play()
+                          }, 10)
+                        }
+                      }
+                    }
+
+                    requestAnimationFrame(animateMomentum)
+                  } else {
+                    if (wasPlaying) {
+                      playerApiRef.current.play()
+                    }
+                  }
+
+                  document.removeEventListener("touchmove", handleMove)
+                  document.removeEventListener("touchend", handleEnd)
+                }
+
+                document.addEventListener("touchmove", handleMove)
+                document.addEventListener("touchend", handleEnd)
+              }}
+              onMouseDown={(e) => {
+                e.preventDefault()
+                setIsScrubbing(true)
+
+                const wasPlaying = isPlayingRef.current
+
+                if (isPlayingRef.current) {
+                  playerApiRef.current.pause()
+                }
+
+                const rect = e.currentTarget.getBoundingClientRect()
+                const startX = e.clientX
+                const containerWidth = rect.width
+                containerWidthRef.current = containerWidth
+                const totalWidth = totalBarsRef.current * 5
+                const currentOffset = waveformOffset.current
+                let lastMouseX = startX
+                let lastScratchTime = 0
+                const scratchThrottle = 10
+
+                let velocity = 0
+                let lastTime = Date.now()
+                let lastClientX = e.clientX
+
+                const handleMove = (e: MouseEvent) => {
+                  const deltaX = e.clientX - startX
+                  const newOffset = currentOffset + deltaX
+
+                  const minOffset = containerWidth - totalWidth
+                  const maxOffset = containerWidth
+                  const clampedOffset = Math.max(
+                    minOffset,
+                    Math.min(maxOffset, newOffset)
+                  )
+                  waveformOffset.current = clampedOffset
+                  if (waveformElementRef.current) {
+                    waveformElementRef.current.style.transform = `translateX(${clampedOffset}px)`
+                  }
+
+                  const position = Math.max(
+                    0,
+                    Math.min(1, (containerWidth - clampedOffset) / totalWidth)
+                  )
+
+                  const audioEl = playerApiRef.current.ref.current
+                  if (audioEl && !isNaN(audioEl.duration)) {
+                    audioEl.currentTime = position * audioEl.duration
+                  }
+
+                  const now = Date.now()
+                  const mouseDelta = e.clientX - lastMouseX
+
+                  const timeDelta = now - lastTime
+                  if (timeDelta > 0) {
+                    const instantVelocity =
+                      (e.clientX - lastClientX) / timeDelta
+                    velocity = velocity * 0.6 + instantVelocity * 0.4
+                  }
+                  lastTime = now
+                  lastClientX = e.clientX
+
+                  if (Math.abs(mouseDelta) > 0) {
+                    if (now - lastScratchTime >= scratchThrottle) {
+                      const speed = Math.min(3, Math.abs(mouseDelta) / 3)
+                      playScratchSound(position, speed)
+                      lastScratchTime = now
+                    }
+                  }
+                  lastMouseX = e.clientX
+                }
+
+                const handleUp = () => {
+                  setIsScrubbing(false)
+                  stopScratchSound()
+
+                  if (Math.abs(velocity) > 0.1) {
+                    setIsMomentumActive(true)
+                    let momentumOffset = waveformOffset.current
+                    let currentVelocity = velocity * 15
+                    const friction = 0.92
+                    const minVelocity = 0.5
+                    let lastScratchFrame = 0
+                    const scratchFrameInterval = 50
+
+                    const animateMomentum = () => {
+                      if (Math.abs(currentVelocity) > minVelocity) {
+                        momentumOffset += currentVelocity
+                        currentVelocity *= friction
+
+                        const minOffset = containerWidth - totalWidth
+                        const maxOffset = containerWidth
+                        const clampedOffset = Math.max(
+                          minOffset,
+                          Math.min(maxOffset, momentumOffset)
+                        )
+
+                        if (clampedOffset !== momentumOffset) {
+                          currentVelocity = 0
+                        }
+
+                        momentumOffset = clampedOffset
+                        waveformOffset.current = clampedOffset
+                        if (waveformElementRef.current) {
+                          waveformElementRef.current.style.transform = `translateX(${clampedOffset}px)`
+                        }
+
+                        const position = Math.max(
+                          0,
+                          Math.min(
+                            1,
+                            (containerWidth - clampedOffset) / totalWidth
+                          )
+                        )
+
+                        const audioEl2 = playerApiRef.current.ref.current
+                        if (audioEl2 && !isNaN(audioEl2.duration)) {
+                          audioEl2.currentTime = position * audioEl2.duration
+                        }
+
+                        const now = Date.now()
+                        if (now - lastScratchFrame >= scratchFrameInterval) {
+                          const speed = Math.min(
+                            2.5,
+                            Math.abs(currentVelocity) / 10
+                          )
+                          if (speed > 0.1) {
+                            playScratchSound(position, speed)
+                          }
+                          lastScratchFrame = now
+                        }
+
+                        requestAnimationFrame(animateMomentum)
+                      } else {
+                        stopScratchSound()
+                        setIsMomentumActive(false)
+                        if (wasPlaying) {
+                          setTimeout(() => {
+                            playerApiRef.current.play()
+                          }, 10)
+                        }
+                      }
+                    }
+
+                    requestAnimationFrame(animateMomentum)
+                  } else {
+                    if (wasPlaying) {
+                      playerApiRef.current.play()
+                    }
+                  }
+
+                  document.removeEventListener("mousemove", handleMove)
+                  document.removeEventListener("mouseup", handleUp)
+                }
+
+                document.addEventListener("mousemove", handleMove)
+                document.addEventListener("mouseup", handleUp)
+              }}
+            >
+              <div className="relative h-full w-full overflow-hidden">
+                <div
+                  ref={waveformElementRef}
+                  style={{
+                    transform: `translateX(${waveformOffset.current}px)`,
+                    transition:
+                      isScrubbing || isMomentumActive
+                        ? "none"
+                        : "transform 0.016s linear",
+                    width: `${totalBarsRef.current * 5}px`,
+                    position: "absolute",
+                    left: 0,
+                  }}
+                >
+                  <Waveform
+                    key={isDark ? "dark" : "light"}
+                    data={
+                      precomputedWaveform.length > 0
+                        ? precomputedWaveform
+                        : audioDataRef.current
+                    }
+                    height={32}
+                    barWidth={3}
+                    barGap={2}
+                    fadeEdges={true}
+                    fadeWidth={24}
+                    barRadius={1}
+                    barColor={isDark ? "#a1a1aa" : "#71717a"}
+                  />
+                </div>
+              </div>
+            </div>
+
+            <TimeDisplay />
+          </div>
+        </div>
+
+        {showTrackList && (
+          <div className="bg-card/95 border-border absolute top-36 right-8 left-8 z-10 rounded-lg border p-3 shadow-xl backdrop-blur">
+            <h4 className="text-muted-foreground mb-2 font-mono text-xs tracking-wider uppercase">
+              Playlist
+            </h4>
+            <div className="max-h-32 space-y-1 overflow-y-auto">
+              {tracks.map((track, index) => (
+                <button
+                  key={track.id}
+                  onClick={() => playTrack(index)}
+                  className={cn(
+                    "w-full rounded px-2 py-1 text-left text-xs transition-all",
+                    currentTrackIndex === index
+                      ? "bg-foreground/10 text-foreground dark:bg-primary/20 dark:text-primary"
+                      : "hover:bg-muted text-muted-foreground"
+                  )}
+                >
+                  <div className="flex items-center gap-2">
+                    <span className="text-muted-foreground/60">
+                      {index + 1}
+                    </span>
+                    <div className="min-w-0 flex-1">
+                      <div className="truncate">{track.title}</div>
+                      <div className="text-muted-foreground/60 truncate text-xs">
+                        {track.artist}
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div className="flex justify-center gap-3">
+          <Button
+            variant="outline"
+            size="icon"
+            className="border-border bg-background hover:bg-muted h-10 w-10 rounded-full"
+            onClick={prevTrack}
+          >
+            <SkipBack className="text-muted-foreground h-4 w-4" />
+          </Button>
+
+          <PlayButton currentTrackIndex={currentTrackIndex} />
+
+          <Button
+            variant="outline"
+            size="icon"
+            className="border-border bg-background hover:bg-muted h-10 w-10 rounded-full"
+            onClick={nextTrack}
+          >
+            <SkipForward className="text-muted-foreground h-4 w-4" />
+          </Button>
+        </div>
+
+        <SpeakerOrbsSection isDark={isDark} audioDataRef={audioDataRef} />
+
+        <VolumeSlider volume={volume} setVolume={setVolume} />
+      </div>
+    </Card>
+  )
 }