# Glass music player

> A player with a glowing cover and a progress bar that thickens under your finger, set against the album’s own colors.

- Category: [Liquid Glass](https://library.aimran.es/components/liquid-glass)
- Built with: React + Motion
- Live editor: https://library.aimran.es/blocks/lg-music-player
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## Where to use it

This music player UI suits any site where people press play: a band or DJ page, the episode page of a podcast, a meditation app or the playlist of a wedding website. The background picks up the colors of each cover, and the progress bar grows when you hover it, so seeking feels easy.

Hook it up to a real audio element and the time, seek and volume controls map almost one to one. The glow looks best with bright, colorful artwork; with dark covers, lower the blur so the card doesn’t turn muddy.

## Code

### React (Motion)

```tsx
import { useEffect, useState, type PointerEvent, type CSSProperties, type MouseEvent, type ReactNode } from "react";
import { motion } from "framer-motion";
import { Music2, Pause, Play, SkipBack, SkipForward, Volume2 } from "lucide-react";

type Wallpaper = "aurora" | "sunset" | "ocean" | "light";

const spring = { type: "spring" as const, stiffness: 400, damping: 30 };

const walls: Record<Wallpaper, { base: string; blobs: string[] }> = {
  aurora: { base: "#0b0b1a", blobs: ["#5b21b6", "#2563eb", "#ec4899"] },
  sunset: { base: "#1a0b14", blobs: ["#f97316", "#f43f5e", "#8b5cf6"] },
  ocean: { base: "#031a1f", blobs: ["#06b6d4", "#3b82f6", "#10b981"] },
  light: { base: "#f8fafc", blobs: ["#fed7aa", "#ddd6fe", "#bae6fd"] },
};

const blobPositions = [
  ["-10%", "-15%"],
  ["45%", "5%"],
  ["5%", "50%"],
];

const grain = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")";

const glassCss = `
.lg-font {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.lg-glass {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, var(--lg-a, 0.12));
  -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(180%);
  backdrop-filter: blur(var(--lg-blur, 20px)) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 20px rgba(255, 255, 255, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.18);
}
/* Borde de luz */
.lg-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.4));
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Reflejo que sigue al cursor (--x / --y los pone track()) */
.lg-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--lg-hover, 0);
  transition: opacity 0.3s;
  background: radial-gradient(circle 140px at var(--x, 50%) var(--y, 0%), rgba(255, 255, 255, var(--lg-shine, 0.25)), transparent 70%);
}
.lg-glass:hover {
  --lg-hover: 1;
}
.lg-text {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.lg-light .lg-text {
  color: #1d1d1f;
  text-shadow: none;
}
@keyframes lg-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8%, -6%) scale(1.12); }
  66% { transform: translate(-6%, 7%) scale(0.94); }
}
`;

// Guarda la posición del cursor para el reflejo de .lg-glass::after
function track(e: MouseEvent<HTMLElement>) {
  const r = e.currentTarget.getBoundingClientRect();
  e.currentTarget.style.setProperty("--x", `${e.clientX - r.left}px`);
  e.currentTarget.style.setProperty("--y", `${e.clientY - r.top}px`);
}

interface StageProps {
  bg: Wallpaper;
  blur: number;
  opacity: number;
  shine: number;
  className?: string;
  children: ReactNode;
}

// Fondo de degradado animado sobre el que se ve el cristal
function Stage({
  bg,
  blur,
  opacity,
  shine,
  className = "relative h-[560px] w-full",
  children,
}: StageProps) {
  const light = bg === "light";
  const wall = walls[bg] ?? walls.aurora;
  const vars = {
    "--lg-blur": `${blur}px`,
    "--lg-a": light ? Math.min(0.6, opacity / 100 + 0.23) : opacity / 100,
    "--lg-shine": shine / 100,
  } as CSSProperties;

  return (
    <div
      className={`lg-font overflow-hidden rounded-[22px] ${className} ${light ? "lg-light" : ""}`}
      style={vars}
    >
      <style>{glassCss}</style>
      <div className="absolute inset-0 overflow-hidden" style={{ background: wall.base }}>
        <div className="absolute inset-0" style={{ filter: "blur(60px)" }}>
          {wall.blobs.map((color, i) => (
            <div
              key={i}
              className="absolute h-[75%] w-[75%] rounded-full"
              style={{
                left: blobPositions[i]?.[0],
                top: blobPositions[i]?.[1],
                background: `radial-gradient(circle, ${color} 0%, transparent 68%)`,
                opacity: light ? 1 : 0.9,
                animation: `lg-drift 20s ease-in-out ${-i * 6}s infinite`,
              }}
            />
          ))}
        </div>
        <div
          className="absolute inset-0"
          style={{ backgroundImage: grain, opacity: 0.04, mixBlendMode: "overlay" }}
        />
      </div>
      <div className="relative grid h-full w-full grid-cols-[100%] place-items-center p-4">{children}</div>
    </div>
  );
}

const covers = [
  { t: "Mareas", a: "Luna Vega", c: ["#f43f5e", "#8b5cf6", "#f97316"] },
  { t: "Horizonte", a: "North", c: ["#06b6d4", "#3b82f6", "#10b981"] },
  { t: "Terciopelo", a: "Alba Ríos", c: ["#f59e0b", "#ec4899", "#7c3aed"] },
];

const DURATION = 214;

const fmt = (s: number) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, "0")}`;

function seek(e: PointerEvent<HTMLDivElement>, set: (n: number) => void) {
  const r = e.currentTarget.getBoundingClientRect();
  set(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
}

interface MusicPlayerProps {
  label?: string;
  bg?: Wallpaper;
  blur?: number;
  opacity?: number;
  shine?: number;
}

export default function MusicPlayer({
  label = "Mareas",
  bg = "aurora",
  blur = 20,
  opacity = 12,
  shine = 25,
}: MusicPlayerProps) {
  const glass = { bg, blur, opacity, shine };
  const [index, setIndex] = useState(0);
  const [play, setPlay] = useState(false);
  const [progress, setProgress] = useState(0.32);
  const [volume, setVolume] = useState(0.6);
  const [grab, setGrab] = useState(false);
  const cover = covers[index] ?? covers[0];
  const c = cover ? cover.c : ["#fff", "#fff", "#fff"];

  useEffect(() => {
    if (!play) return;
    const t = setInterval(() => setProgress((x) => (x >= 1 ? 0 : x + 0.004)), 250);
    return () => clearInterval(t);
  }, [play]);

  return (
    <Stage {...glass}>
      {/* El fondo toma el color de la portada */}
      <motion.div
        className="pointer-events-none absolute inset-0"
        animate={{
          background: `radial-gradient(60% 60% at 50% 40%, ${c[0]}88, transparent 70%), radial-gradient(50% 50% at 80% 80%, ${c[1]}66, transparent 70%)`,
        }}
        transition={{ duration: 0.8 }}
      />
      <div
        onMouseMove={track}
        className="lg-glass lg-text flex w-[340px] max-w-[calc(100vw-48px)] flex-col rounded-[34px] p-6"
        style={{ height: 480 }}
      >
        <div className="relative z-[3] grid place-items-center">
          <motion.div
            animate={{ scale: play ? 1 : 0.88 }}
            transition={spring}
            className="relative aspect-square w-full overflow-hidden rounded-[22px]"
            style={{ boxShadow: `0 20px 50px ${c[0]}80` }}
          >
            <motion.div
              className="absolute -inset-1/2"
              animate={{ rotate: 360 }}
              transition={{ duration: 18, repeat: Infinity, ease: "linear" }}
              style={{
                background: `conic-gradient(from 0deg, ${c[0]}, ${c[1]}, ${c[2]}, ${c[0]})`,
                filter: "blur(30px)",
              }}
            />
            <div className="absolute inset-0 grid place-items-center">
              <Music2 className="h-14 w-14 text-white/70" strokeWidth={1.25} />
            </div>
          </motion.div>
        </div>

        <div className="relative z-[3] mt-5 flex items-end justify-between">
          <div className="min-w-0">
            <p className="truncate text-[20px] font-semibold tracking-[-0.01em]">
              {index === 0 ? label : cover?.t}
            </p>
            <p className="text-[15px] opacity-65">{cover?.a}</p>
          </div>
          <div className="flex h-6 items-end gap-[3px]">
            {[0, 1, 2, 3, 4].map((k) => (
              <motion.span
                key={k}
                className="w-[3px] rounded-full bg-current"
                animate={{ height: play ? [4, 20, 8, 16, 4] : 3, opacity: play ? 0.9 : 0.3 }}
                transition={play ? { duration: 0.7 + k * 0.12, repeat: Infinity, ease: "easeInOut" } : spring}
              />
            ))}
          </div>
        </div>

        <div className="relative z-[3] mt-4">
          <div
            className="flex h-5 cursor-pointer touch-none items-center"
            onPointerEnter={() => setGrab(true)}
            onPointerLeave={() => setGrab(false)}
            onPointerDown={(e) => {
              e.currentTarget.setPointerCapture(e.pointerId);
              seek(e, setProgress);
            }}
            onPointerMove={(e) => {
              if (e.buttons) seek(e, setProgress);
            }}
          >
            <motion.div
              animate={{ height: grab ? 10 : 5 }}
              transition={spring}
              className="w-full overflow-hidden rounded-full bg-white/25"
            >
              <div className="h-full bg-white/90" style={{ width: `${progress * 100}%` }} />
            </motion.div>
          </div>
          <div className="flex justify-between text-[11px] tabular-nums opacity-60">
            <span>{fmt(progress * DURATION)}</span>
            <span>-{fmt((1 - progress) * DURATION)}</span>
          </div>
        </div>

        <div className="relative z-[3] mt-2 flex items-center justify-center gap-10">
          <motion.button
            type="button"
            aria-label="Previous"
            transition={spring}
            whileTap={{ scale: 0.85 }}
            onClick={() => {
              setIndex((x) => (x + 2) % 3);
              setProgress(0);
            }}
          >
            <SkipBack className="h-7 w-7" fill="currentColor" strokeWidth={1.75} />
          </motion.button>
          <motion.button
            type="button"
            aria-label={play ? "Pause" : "Play"}
            transition={spring}
            whileTap={{ scale: 0.85 }}
            onClick={() => setPlay((x) => !x)}
          >
            {play ? (
              <Pause className="h-10 w-10" fill="currentColor" strokeWidth={1.75} />
            ) : (
              <Play className="h-10 w-10" fill="currentColor" strokeWidth={1.75} />
            )}
          </motion.button>
          <motion.button
            type="button"
            aria-label="Next"
            transition={spring}
            whileTap={{ scale: 0.85 }}
            onClick={() => {
              setIndex((x) => (x + 1) % 3);
              setProgress(0);
            }}
          >
            <SkipForward className="h-7 w-7" fill="currentColor" strokeWidth={1.75} />
          </motion.button>
        </div>

        <div className="relative z-[3] mt-auto flex items-center gap-3">
          <Volume2 className="h-4 w-4 opacity-60" strokeWidth={1.75} />
          <div
            className="flex h-5 flex-1 cursor-pointer touch-none items-center"
            onPointerDown={(e) => {
              e.currentTarget.setPointerCapture(e.pointerId);
              seek(e, setVolume);
            }}
            onPointerMove={(e) => {
              if (e.buttons) seek(e, setVolume);
            }}
          >
            <div className="h-[5px] w-full overflow-hidden rounded-full bg-white/25">
              <div className="h-full bg-white/90" style={{ width: `${volume * 100}%` }} />
            </div>
          </div>
        </div>
      </div>
    </Stage>
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Glass music player” block (Liquid Glass) from AIMRAN Library to my project.

## What it is
A player with a glowing cover and a progress bar that thickens under your finger, set against the album’s own colors.

## Chosen settings
- Text: "Mareas"
- Background: Aurora (other options: Sunset, Ocean, Light)
- Blur: 20px (from 4 to 40px)
- Glass opacity: 12% (from 4 to 40%)
- Shine: 25% (from 0 to 60%)

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with React + TypeScript, with framer-motion for the animation and lucide-react for the icons. If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
import { useEffect, useState, type PointerEvent, type CSSProperties, type MouseEvent, type ReactNode } from "react";
import { motion } from "framer-motion";
import { Music2, Pause, Play, SkipBack, SkipForward, Volume2 } from "lucide-react";

type Wallpaper = "aurora" | "sunset" | "ocean" | "light";

const spring = { type: "spring" as const, stiffness: 400, damping: 30 };

const walls: Record<Wallpaper, { base: string; blobs: string[] }> = {
  aurora: { base: "#0b0b1a", blobs: ["#5b21b6", "#2563eb", "#ec4899"] },
  sunset: { base: "#1a0b14", blobs: ["#f97316", "#f43f5e", "#8b5cf6"] },
  ocean: { base: "#031a1f", blobs: ["#06b6d4", "#3b82f6", "#10b981"] },
  light: { base: "#f8fafc", blobs: ["#fed7aa", "#ddd6fe", "#bae6fd"] },
};

const blobPositions = [
  ["-10%", "-15%"],
  ["45%", "5%"],
  ["5%", "50%"],
];

const grain = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")";

const glassCss = `
.lg-font {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.lg-glass {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, var(--lg-a, 0.12));
  -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(180%);
  backdrop-filter: blur(var(--lg-blur, 20px)) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 20px rgba(255, 255, 255, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.18);
}
/* Borde de luz */
.lg-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.4));
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Reflejo que sigue al cursor (--x / --y los pone track()) */
.lg-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--lg-hover, 0);
  transition: opacity 0.3s;
  background: radial-gradient(circle 140px at var(--x, 50%) var(--y, 0%), rgba(255, 255, 255, var(--lg-shine, 0.25)), transparent 70%);
}
.lg-glass:hover {
  --lg-hover: 1;
}
.lg-text {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.lg-light .lg-text {
  color: #1d1d1f;
  text-shadow: none;
}
@keyframes lg-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8%, -6%) scale(1.12); }
  66% { transform: translate(-6%, 7%) scale(0.94); }
}
`;

// Guarda la posición del cursor para el reflejo de .lg-glass::after
function track(e: MouseEvent<HTMLElement>) {
  const r = e.currentTarget.getBoundingClientRect();
  e.currentTarget.style.setProperty("--x", `${e.clientX - r.left}px`);
  e.currentTarget.style.setProperty("--y", `${e.clientY - r.top}px`);
}

interface StageProps {
  bg: Wallpaper;
  blur: number;
  opacity: number;
  shine: number;
  className?: string;
  children: ReactNode;
}

// Fondo de degradado animado sobre el que se ve el cristal
function Stage({
  bg,
  blur,
  opacity,
  shine,
  className = "relative h-[560px] w-full",
  children,
}: StageProps) {
  const light = bg === "light";
  const wall = walls[bg] ?? walls.aurora;
  const vars = {
    "--lg-blur": `${blur}px`,
    "--lg-a": light ? Math.min(0.6, opacity / 100 + 0.23) : opacity / 100,
    "--lg-shine": shine / 100,
  } as CSSProperties;

  return (
    <div
      className={`lg-font overflow-hidden rounded-[22px] ${className} ${light ? "lg-light" : ""}`}
      style={vars}
    >
      <style>{glassCss}</style>
      <div className="absolute inset-0 overflow-hidden" style={{ background: wall.base }}>
        <div className="absolute inset-0" style={{ filter: "blur(60px)" }}>
          {wall.blobs.map((color, i) => (
            <div
              key={i}
              className="absolute h-[75%] w-[75%] rounded-full"
              style={{
                left: blobPositions[i]?.[0],
                top: blobPositions[i]?.[1],
                background: `radial-gradient(circle, ${color} 0%, transparent 68%)`,
                opacity: light ? 1 : 0.9,
                animation: `lg-drift 20s ease-in-out ${-i * 6}s infinite`,
              }}
            />
          ))}
        </div>
        <div
          className="absolute inset-0"
          style={{ backgroundImage: grain, opacity: 0.04, mixBlendMode: "overlay" }}
        />
      </div>
      <div className="relative grid h-full w-full grid-cols-[100%] place-items-center p-4">{children}</div>
    </div>
  );
}

const covers = [
  { t: "Mareas", a: "Luna Vega", c: ["#f43f5e", "#8b5cf6", "#f97316"] },
  { t: "Horizonte", a: "North", c: ["#06b6d4", "#3b82f6", "#10b981"] },
  { t: "Terciopelo", a: "Alba Ríos", c: ["#f59e0b", "#ec4899", "#7c3aed"] },
];

const DURATION = 214;

const fmt = (s: number) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, "0")}`;

function seek(e: PointerEvent<HTMLDivElement>, set: (n: number) => void) {
  const r = e.currentTarget.getBoundingClientRect();
  set(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)));
}

interface MusicPlayerProps {
  label?: string;
  bg?: Wallpaper;
  blur?: number;
  opacity?: number;
  shine?: number;
}

export default function MusicPlayer({
  label = "Mareas",
  bg = "aurora",
  blur = 20,
  opacity = 12,
  shine = 25,
}: MusicPlayerProps) {
  const glass = { bg, blur, opacity, shine };
  const [index, setIndex] = useState(0);
  const [play, setPlay] = useState(false);
  const [progress, setProgress] = useState(0.32);
  const [volume, setVolume] = useState(0.6);
  const [grab, setGrab] = useState(false);
  const cover = covers[index] ?? covers[0];
  const c = cover ? cover.c : ["#fff", "#fff", "#fff"];

  useEffect(() => {
    if (!play) return;
    const t = setInterval(() => setProgress((x) => (x >= 1 ? 0 : x + 0.004)), 250);
    return () => clearInterval(t);
  }, [play]);

  return (
    <Stage {...glass}>
      {/* El fondo toma el color de la portada */}
      <motion.div
        className="pointer-events-none absolute inset-0"
        animate={{
          background: `radial-gradient(60% 60% at 50% 40%, ${c[0]}88, transparent 70%), radial-gradient(50% 50% at 80% 80%, ${c[1]}66, transparent 70%)`,
        }}
        transition={{ duration: 0.8 }}
      />
      <div
        onMouseMove={track}
        className="lg-glass lg-text flex w-[340px] max-w-[calc(100vw-48px)] flex-col rounded-[34px] p-6"
        style={{ height: 480 }}
      >
        <div className="relative z-[3] grid place-items-center">
          <motion.div
            animate={{ scale: play ? 1 : 0.88 }}
            transition={spring}
            className="relative aspect-square w-full overflow-hidden rounded-[22px]"
            style={{ boxShadow: `0 20px 50px ${c[0]}80` }}
          >
            <motion.div
              className="absolute -inset-1/2"
              animate={{ rotate: 360 }}
              transition={{ duration: 18, repeat: Infinity, ease: "linear" }}
              style={{
                background: `conic-gradient(from 0deg, ${c[0]}, ${c[1]}, ${c[2]}, ${c[0]})`,
                filter: "blur(30px)",
              }}
            />
            <div className="absolute inset-0 grid place-items-center">
              <Music2 className="h-14 w-14 text-white/70" strokeWidth={1.25} />
            </div>
          </motion.div>
        </div>

        <div className="relative z-[3] mt-5 flex items-end justify-between">
          <div className="min-w-0">
            <p className="truncate text-[20px] font-semibold tracking-[-0.01em]">
              {index === 0 ? label : cover?.t}
            </p>
            <p className="text-[15px] opacity-65">{cover?.a}</p>
          </div>
          <div className="flex h-6 items-end gap-[3px]">
            {[0, 1, 2, 3, 4].map((k) => (
              <motion.span
                key={k}
                className="w-[3px] rounded-full bg-current"
                animate={{ height: play ? [4, 20, 8, 16, 4] : 3, opacity: play ? 0.9 : 0.3 }}
                transition={play ? { duration: 0.7 + k * 0.12, repeat: Infinity, ease: "easeInOut" } : spring}
              />
            ))}
          </div>
        </div>

        <div className="relative z-[3] mt-4">
          <div
            className="flex h-5 cursor-pointer touch-none items-center"
            onPointerEnter={() => setGrab(true)}
            onPointerLeave={() => setGrab(false)}
            onPointerDown={(e) => {
              e.currentTarget.setPointerCapture(e.pointerId);
              seek(e, setProgress);
            }}
            onPointerMove={(e) => {
              if (e.buttons) seek(e, setProgress);
            }}
          >
            <motion.div
              animate={{ height: grab ? 10 : 5 }}
              transition={spring}
              className="w-full overflow-hidden rounded-full bg-white/25"
            >
              <div className="h-full bg-white/90" style={{ width: `${progress * 100}%` }} />
            </motion.div>
          </div>
          <div className="flex justify-between text-[11px] tabular-nums opacity-60">
            <span>{fmt(progress * DURATION)}</span>
            <span>-{fmt((1 - progress) * DURATION)}</span>
          </div>
        </div>

        <div className="relative z-[3] mt-2 flex items-center justify-center gap-10">
          <motion.button
            type="button"
            aria-label="Previous"
            transition={spring}
            whileTap={{ scale: 0.85 }}
            onClick={() => {
              setIndex((x) => (x + 2) % 3);
              setProgress(0);
            }}
          >
            <SkipBack className="h-7 w-7" fill="currentColor" strokeWidth={1.75} />
          </motion.button>
          <motion.button
            type="button"
            aria-label={play ? "Pause" : "Play"}
            transition={spring}
            whileTap={{ scale: 0.85 }}
            onClick={() => setPlay((x) => !x)}
          >
            {play ? (
              <Pause className="h-10 w-10" fill="currentColor" strokeWidth={1.75} />
            ) : (
              <Play className="h-10 w-10" fill="currentColor" strokeWidth={1.75} />
            )}
          </motion.button>
          <motion.button
            type="button"
            aria-label="Next"
            transition={spring}
            whileTap={{ scale: 0.85 }}
            onClick={() => {
              setIndex((x) => (x + 1) % 3);
              setProgress(0);
            }}
          >
            <SkipForward className="h-7 w-7" fill="currentColor" strokeWidth={1.75} />
          </motion.button>
        </div>

        <div className="relative z-[3] mt-auto flex items-center gap-3">
          <Volume2 className="h-4 w-4 opacity-60" strokeWidth={1.75} />
          <div
            className="flex h-5 flex-1 cursor-pointer touch-none items-center"
            onPointerDown={(e) => {
              e.currentTarget.setPointerCapture(e.pointerId);
              seek(e, setVolume);
            }}
            onPointerMove={(e) => {
              if (e.buttons) seek(e, setVolume);
            }}
          >
            <div className="h-[5px] w-full overflow-hidden rounded-full bg-white/25">
              <div className="h-full bg-white/90" style={{ width: `${volume * 100}%` }} />
            </div>
          </div>
        </div>
      </div>
    </Stage>
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````