{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blend-mouse-trailer-demo",
  "title": "Blend Mouse Trailer Demo",
  "description": "Example showing the lazy mouse trailer which blends with the content on hover.",
  "registryDependencies": [
    "https://atlasui.dev/r/blend-mouse-trailer.json"
  ],
  "files": [
    {
      "path": "registry/react/examples/blend-mouse-trailer-demo.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { BlendMouseTrailer } from \"@/registry/react/atlasui/blend-mouse-trailer\";\n\nexport const BlendMouseTrailerDemo = () => {\n  const [isHovered, setIsHovered] = useState(false);\n  return (\n    <div className=\"mx-auto flex h-full w-full max-w-7xl items-center justify-center\">\n      <h1\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        className=\"text-center text-5xl text-balance\"\n      >\n        AtlasUI is an open-source library offering a suite of prebuilt animated\n        components for React, Next.js, and Vanilla JS.\n      </h1>\n\n      <BlendMouseTrailer isHovered={isHovered} />\n    </div>\n  );\n};\n",
      "type": "registry:example",
      "target": "components/blend-mouse-trailer-demo.tsx"
    }
  ],
  "type": "registry:example"
}