{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-video-ambient",
  "registryDependencies": [
    "video-ambient"
  ],
  "files": [
    {
      "path": "registry/demo/components/unlumen/video-ambient/index.tsx",
      "content": "\"use client\";\n\nimport { VideoAmbient } from \"@/components/unlumen-ui/video-ambient\";\n\nconst VIDEO_SRC =\n  \"https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4\";\nconst VIDEO_POSTER =\n  \"https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217\";\n\nexport default function VideoAmbientDemo({\n  blurAmount = 70,\n  intensity = 0.9,\n}: {\n  blurAmount?: number;\n  intensity?: number;\n}) {\n  return (\n    <div className=\"flex flex-col text-foreground\">\n      {/* Video */}\n      <div className=\"w-full py-8 px-4\">\n        <VideoAmbient\n          src={VIDEO_SRC}\n          poster={VIDEO_POSTER}\n          blurAmount={blurAmount}\n          intensity={intensity}\n          autoPlay\n          muted\n          className=\"max-w-5xl mx-auto\"\n        />\n      </div>\n\n      {/* Content below */}\n      <div className=\"w-full max-w-5xl mx-auto px-4 pb-12\">\n        {/* Title */}\n        <h1 className=\"mt-2 text-xl font-semibold leading-snug\">\n          Big Buck Bunny 60fps 4K — Official Blender Foundation Short Film\n        </h1>\n\n        {/* Channel row + actions */}\n        <div className=\"flex flex-wrap items-center gap-3 mt-3\">\n          <div className=\"flex items-center gap-2.5 flex-1 min-w-0\">\n            <div className=\"w-10 h-10 rounded-full bg-orange-600 flex items-center justify-center text-white text-xs font-bold shrink-0\">\n              BF\n            </div>\n            <div className=\"min-w-0\">\n              <div className=\"flex items-center gap-1\">\n                <span className=\"text-sm font-medium truncate\">\n                  The Official Blender Foundations\n                </span>\n              </div>\n              <p className=\"text-xs text-muted-foreground\">1.22M subscribers</p>\n            </div>\n            <button className=\"ml-1 bg-foreground text-background text-sm font-semibold px-4 py-2 rounded-full hover:bg-foreground/80 transition-colors shrink-0\">\n              Subscribe\n            </button>\n          </div>\n\n          <div className=\"flex items-center gap-2 flex-wrap\">\n            {/* Like / dislike */}\n            <div className=\"flex rounded-full bg-foreground/10 divide-x divide-border overflow-hidden\">\n              <button className=\"flex items-center gap-1.5 px-4 py-2 text-sm font-medium hover:bg-foreground/20 transition-colors\">\n                <svg\n                  className=\"w-4 h-4\"\n                  fill=\"currentColor\"\n                  viewBox=\"0 0 24 24\"\n                  aria-hidden=\"true\"\n                >\n                  <path d=\"M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z\" />\n                </svg>\n                107k\n              </button>\n              <button className=\"px-3 py-2 hover:bg-foreground/20 transition-colors\">\n                <svg\n                  className=\"w-4 h-4\"\n                  fill=\"currentColor\"\n                  viewBox=\"0 0 24 24\"\n                  aria-hidden=\"true\"\n                >\n                  <path d=\"M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z\" />\n                </svg>\n              </button>\n            </div>\n\n            {/* Share */}\n            <button className=\"flex items-center gap-1.5 px-4 py-2 rounded-full bg-foreground/10 text-sm font-medium hover:bg-foreground/20 transition-colors\">\n              <svg\n                className=\"w-4 h-4\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92S19.61 16.08 18 16.08z\" />\n              </svg>\n              Share\n            </button>\n\n            {/* Save */}\n            <button className=\"flex items-center gap-1.5 px-4 py-2 rounded-full bg-foreground/10 text-sm font-medium hover:bg-foreground/20 transition-colors\">\n              <svg\n                className=\"w-4 h-4\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={2}\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  d=\"M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z\"\n                />\n              </svg>\n              Save\n            </button>\n\n            {/* Clip */}\n            <button className=\"flex items-center gap-1.5 px-4 py-2 rounded-full bg-foreground/10 text-sm font-medium hover:bg-foreground/20 transition-colors\">\n              <svg\n                className=\"w-4 h-4\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={2}\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  d=\"M14.121 14.121L19 19m-7-7l7-7m-7 7l-2.879 2.879M12 12L9.121 9.121m0 5.758a3 3 0 10-4.243 4.243 3 3 0 004.243-4.243zm0-5.758a3 3 0 10-4.243-4.243 3 3 0 004.243 4.243z\"\n                />\n              </svg>\n              Clip\n            </button>\n\n            {/* More */}\n            <button className=\"w-9 h-9 flex items-center justify-center rounded-full bg-foreground/10 hover:bg-foreground/20 transition-colors\">\n              <svg\n                className=\"w-5 h-5\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        {/* Description */}\n        <div className=\"mt-4 bg-foreground/8 hover:bg-foreground/12 transition-colors rounded-xl p-4 text-sm cursor-pointer\">\n          <p className=\"font-semibold\">\n            23M views &nbsp;&bull;&nbsp; 11 years ago\n          </p>\n          <p className=\"text-muted-foreground mt-1 line-clamp-2\">\n            UHD High Frame rate version of the iconic short film by Blender, Big\n            Buck Bunny. More info:{\" \"}\n            <span className=\"text-blue-400\">\n              https://studio.blender.org/projects/b…\n            </span>{\" \"}\n            Learn more about this UHD high frame-rate version at:{\" \"}\n            <span className=\"text-blue-400\">\n              http://bbb3d.renderfarming.net\n            </span>{\" \"}\n            …\n          </p>\n          <span className=\"font-semibold text-sm mt-0.5 inline-block\">\n            Show more\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}