{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "distorted-glass-demo",
  "type": "registry:component",
  "registryDependencies": [
    "distorted-glass"
  ],
  "files": [
    {
      "path": "registry/default/example/distorted-glass-demo.tsx",
      "content": "\"use client\"\n\nimport { useRef } from \"react\"\nimport { motion, useScroll, useTransform } from \"motion/react\"\n\nimport { DistortedGlass } from \"@/registry/default/ui/distorted-glass\"\n\nexport default function DistortedGlassDemo() {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const { scrollYProgress } = useScroll({\n    target: containerRef,\n    offset: [\"start start\", \"end end\"],\n  })\n\n  // Transform values for parallax effects\n  const parallaxY = useTransform(scrollYProgress, [0, 1], [0, -200])\n  const parallaxYSlow = useTransform(scrollYProgress, [0, 1], [0, -100])\n  const parallaxYFast = useTransform(scrollYProgress, [0, 1], [0, -300])\n\n  return (\n    <div className=\"relative flex h-screen flex-col overflow-hidden\">\n      {/* Fixed Distorted Glass Header */}\n\n      {/* Scrollable Content Area - Content scrolls behind the glass */}\n      <div ref={containerRef} className=\"flex-1 overflow-y-auto pt-[50px]\">\n        <div className=\"absolute top-0 right-0 left-0 -mt-[1px] w-full\">\n          <DistortedGlass className=\"h-48 w-full\" />\n        </div>\n        {/* Section 1: Large Moving Text - Easy to see distortion */}\n        <section className=\"from-primary/20 via-primary/10 relative flex h-96 items-center justify-center bg-gradient-to-br to-transparent\">\n          <div className=\"absolute inset-0 overflow-hidden\">\n            <motion.div\n              className=\"text-primary/30 absolute top-20 left-10 text-8xl font-black select-none\"\n              style={{ y: parallaxY }}\n              animate={{\n                x: [0, 50, 0],\n              }}\n              transition={{\n                duration: 8,\n                repeat: Infinity,\n                ease: \"easeInOut\",\n              }}\n            >\n              DISTORTED\n            </motion.div>\n            <motion.div\n              className=\"text-primary/30 absolute top-40 right-10 text-8xl font-black select-none\"\n              style={{ y: parallaxYSlow }}\n              animate={{\n                x: [0, -50, 0],\n              }}\n              transition={{\n                duration: 10,\n                repeat: Infinity,\n                ease: \"easeInOut\",\n              }}\n            >\n              GLASS\n            </motion.div>\n          </div>\n        </section>\n\n        {/* Section 2: Grid of Moving Squares */}\n        <section className=\"via-primary/10 to-primary/20 relative flex h-[700px] items-center justify-center bg-gradient-to-br from-transparent\">\n          <div className=\"absolute inset-0 overflow-hidden\">\n            <div className=\"grid grid-cols-8 gap-4 p-8\">\n              {Array.from({ length: 64 }).map((_, i) => {\n                const row = Math.floor(i / 8)\n                const col = i % 8\n                const squareId = `square-${row}-${col}`\n                return (\n                  <motion.div\n                    key={squareId}\n                    className=\"bg-primary border-primary/50 h-16 w-16 rounded-lg border-2\"\n                    initial={{ opacity: 0.3 }}\n                    animate={{\n                      scale: [1, 1.2, 1],\n                      opacity: [0.3, 0.8, 0.3],\n                      rotate: [0, 90, 0],\n                    }}\n                    transition={{\n                      duration: 3,\n                      repeat: Infinity,\n                      delay: (row + col) * 0.1,\n                      ease: \"easeInOut\",\n                    }}\n                    style={{\n                      y: parallaxY,\n                    }}\n                  />\n                )\n              })}\n            </div>\n          </div>\n        </section>\n\n        {/* Section 3: Radial Circles */}\n        <section className=\"from-primary/20 to-primary/10 relative flex h-[600px] items-center justify-center bg-gradient-to-br via-transparent\">\n          <div className=\"absolute inset-0 flex items-center justify-center overflow-hidden\">\n            {Array.from({ length: 5 }).map((_, i) => {\n              const size = 200 + i * 80\n              const circleId = `circle-${size}`\n              return (\n                <motion.div\n                  key={circleId}\n                  className=\"border-primary/40 absolute rounded-full border-4\"\n                  style={{\n                    width: size,\n                    height: size,\n                    y: parallaxYSlow,\n                  }}\n                  animate={{\n                    rotate: [0, 360],\n                    scale: [1, 1.1, 1],\n                  }}\n                  transition={{\n                    duration: 20 + i * 5,\n                    repeat: Infinity,\n                    ease: \"linear\",\n                  }}\n                />\n              )\n            })}\n          </div>\n        </section>\n\n        {/* Section 4: Lines Pattern */}\n        <section className=\"via-primary/10 to-primary/20 relative flex min-h-screen items-center justify-center bg-gradient-to-br from-transparent\">\n          <div className=\"absolute inset-0 overflow-hidden\">\n            {Array.from({ length: 20 }).map((_, i) => {\n              const lineTop = i * 10\n              const lineId = `line-${lineTop}`\n              return (\n                <motion.div\n                  key={lineId}\n                  className=\"bg-primary/40 absolute right-0 left-0 h-1\"\n                  style={{\n                    top: `${lineTop}%`,\n                    y: parallaxYFast,\n                  }}\n                  animate={{\n                    opacity: [0.2, 0.8, 0.2],\n                    scaleX: [1, 1.5, 1],\n                  }}\n                  transition={{\n                    duration: 2,\n                    repeat: Infinity,\n                    delay: i * 0.1,\n                    ease: \"easeInOut\",\n                  }}\n                />\n              )\n            })}\n          </div>\n        </section>\n\n        {/* Final Info Section */}\n        <section className=\"bg-muted/30 flex min-h-screen items-center justify-center\">\n          <div className=\"mx-auto max-w-2xl space-y-4 p-8 text-center\">\n            <h2 className=\"text-foreground text-3xl font-bold\">\n              About Distorted Glass\n            </h2>\n            <p className=\"text-muted-foreground\">\n              The DistortedGlass component uses SVG filters with fractal noise\n              to create a unique glass morphism effect.\n            </p>\n          </div>\n        </section>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}