{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-phone-demo-3",
  "title": "Floating Phone Demo 3",
  "description": "Third example showing a floating phone mockup.",
  "registryDependencies": [
    "https://pioneerui.com/r/floating-phone"
  ],
  "files": [
    {
      "path": "registry/example/floating-phone-demo-3.tsx",
      "content": "\"use client\"\n\nimport { FloatingPhone } from \"@/registry/pioneerui/floating-phone\"\nimport { motion } from \"framer-motion\"\nimport { Play, Pause, SkipBack, SkipForward, Repeat, Shuffle } from \"lucide-react\"\nimport { useState } from \"react\"\n\nconst MusicContent = () => {\n  const [isPlaying, setIsPlaying] = useState(false)\n\n  return (\n    <div className=\"flex flex-col h-full w-full p-6 text-white bg-gradient-to-br from-violet-600/90 to-indigo-900/90\">\n      {/* Album Art */}\n      <motion.div\n        initial={{ scale: 0.9, opacity: 0 }}\n        animate={{ scale: 1, opacity: 1 }}\n        transition={{ duration: 0.5 }}\n        className=\"relative aspect-square w-full max-w-[280px] mx-auto mb-6 rounded-2xl overflow-hidden shadow-2xl\"\n      >\n        <div className=\"absolute inset-0 bg-gradient-to-br from-violet-400/20 to-indigo-600/20 backdrop-blur-sm\" />\n        <img src=\"/placeholder.svg?height=280&width=280\" alt=\"Album artwork\" className=\"w-full h-full object-cover\" />\n      </motion.div>\n\n      {/* Track Info */}\n      <motion.div\n        initial={{ y: 20, opacity: 0 }}\n        animate={{ y: 0, opacity: 1 }}\n        transition={{ delay: 0.2 }}\n        className=\"text-center mb-8\"\n      >\n        <h2 className=\"text-2xl font-bold mb-2\">Cosmic Dream</h2>\n        <p className=\"text-violet-200/80\">Stellar Soundscapes</p>\n      </motion.div>\n\n      {/* Progress Bar */}\n      <div className=\"w-full h-1 bg-white/20 rounded-full mb-2\">\n        <motion.div\n          className=\"h-full bg-violet-400 rounded-full\"\n          initial={{ width: \"0%\" }}\n          animate={{ width: \"65%\" }}\n          transition={{ duration: 2, ease: \"linear\" }}\n        />\n      </div>\n      <div className=\"flex justify-between text-sm mb-6\">\n        <span>2:14</span>\n        <span>3:45</span>\n      </div>\n\n      {/* Controls */}\n      <div className=\"flex items-center justify-center gap-6\">\n        <motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>\n          <Shuffle className=\"w-5 h-5 text-violet-200/80\" />\n        </motion.button>\n        <motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>\n          <SkipBack className=\"w-6 h-6\" />\n        </motion.button>\n        <motion.button\n          className=\"bg-white rounded-full p-4\"\n          whileHover={{ scale: 1.1 }}\n          whileTap={{ scale: 0.95 }}\n          onClick={() => setIsPlaying(!isPlaying)}\n        >\n          {isPlaying ? <Pause className=\"w-6 h-6 text-violet-600\" /> : <Play className=\"w-6 h-6 text-violet-600\" />}\n        </motion.button>\n        <motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>\n          <SkipForward className=\"w-6 h-6\" />\n        </motion.button>\n        <motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>\n          <Repeat className=\"w-5 h-5 text-violet-200/80\" />\n        </motion.button>\n      </div>\n    </div>\n  )\n}\n\nexport default function MusicPlayerDemo() {\n  return (\n    <FloatingPhone\n      gradientStart=\"#7C3AED\"\n      gradientEnd=\"#3730A3\"\n      textColor=\"#ffffff\"\n      content={<MusicContent />}\n      actionText=\"Open Music App\"\n      actionLink=\"/music\"\n      showStatusBar={true}\n    />\n  )\n}\n",
      "type": "registry:example",
      "target": "components/floating-phone-demo-3.tsx"
    }
  ],
  "type": "registry:example"
}