{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "noise-effect",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/noise-effect/section-noise.tsx",
      "content": "'use client';\nimport type React from 'react';\nimport { useCallback, useState } from 'react';\n\nconst SectionNoise = () => {\n  const [opacity, setOpacity] = useState(0.05);\n\n  const handleOpacityChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    setOpacity(Number.parseFloat(event.target.value));\n  }, []);\n  return (\n    <>\n      <section className='relative border rounded-lg w-full'>\n        <div className='absolute top-4 right-4 z-10 flex justify-end pb-2'>\n          <label htmlFor='opacity-slider ' className='mr-2 inline-block'>\n            Noise Opacity:\n          </label>\n          <input\n            id='opacity-slider'\n            type='range'\n            min='0'\n            max='1'\n            step='0.01'\n            value={opacity}\n            onChange={handleOpacityChange}\n          />\n          <span className='ml-2'>{opacity.toFixed(2)}</span>\n        </div>\n        <div\n          className=\"absolute top-0 left-0 w-full h-full content-[''] z-10 pointer-events-none bg-[url('/noise.gif')]\"\n          style={{ opacity: opacity }}\n        ></div>\n        <section className='  font-semibold 2xl:h-[450px] sm:h-[450px] h-[400px] bg-linear-to-t dark:to-neutral-950 dark:from-neutral-950 to-[#dadada] from-[#ebebeb] flex flex-col items-center justify-center dark:text-white text-black'>\n          <div className='absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-size-[35px_34px] mask-[radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]'></div>\n\n          <h1 className='xl:text-4xl text-3xl px-8 font-semibold text-center tracking-tight leading-[120%]'>\n            An Home Page with Noise Effect\n          </h1>\n        </section>\n      </section>\n    </>\n  );\n};\nexport default SectionNoise;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}