{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dither-image-demo",
  "type": "registry:component",
  "registryDependencies": [
    "dither-image"
  ],
  "files": [
    {
      "path": "registry/default/example/dither-image-demo.tsx",
      "content": "\"use client\"\n\nimport {\n  DitherImage,\n  DitherImageCaption,\n  DitherImageContent,\n  DitherImageFrame,\n  DitherImageOverlay,\n  DitherImageReveal,\n  type DitherRevealDirection,\n} from \"@/registry/default/ui/dither-image\"\n\nconst GHIBLI_STILLS: { alt: string; src: string }[] = Array.from(\n  { length: 9 },\n  (_, i) => ({\n    src: `/images/gibli/gibli-${i + 1}.jpg`,\n    alt: `Studio Ghibli-style still ${i + 1}, dithered`,\n  })\n)\n\nconst FRAME_SIZES = \"(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 90vw\"\n/** Fixed box for `DitherImageReveal` + overlay demos (`size-56` → 14rem). */\nconst REVEAL_SIZES = \"224px\"\n\nconst REVEAL_OVERLAY_VARIANTS: {\n  direction: DitherRevealDirection\n  from: number\n  to: number\n  label: string\n  hint: string\n}[] = [\n  {\n    direction: \"r\",\n    from: 0,\n    to: 65,\n    label: \"r\",\n    hint: \"Clean left → dither right\",\n  },\n  {\n    direction: \"l\",\n    from: 0,\n    to: 65,\n    label: \"l\",\n    hint: \"Clean right → dither left\",\n  },\n  {\n    direction: \"t\",\n    from: 0,\n    to: 65,\n    label: \"t\",\n    hint: \"Clean top → dither bottom\",\n  },\n  {\n    direction: \"b\",\n    from: 0,\n    to: 65,\n    label: \"b\",\n    hint: \"Clean bottom → dither top\",\n  },\n  {\n    direction: \"tl-br\",\n    from: 0,\n    to: 70,\n    label: \"tl-br\",\n    hint: \"Diagonal (clean top-left)\",\n  },\n  {\n    direction: \"radial\",\n    from: 25,\n    to: 75,\n    label: \"radial\",\n    hint: \"Center clean, edges dither\",\n  },\n]\n\nexport default function DitherImageDemo() {\n  return (\n    <main className=\"flex w-full items-center justify-center\">\n      <div className=\"flex w-full max-w-5xl flex-col gap-10\">\n        <header className=\"flex flex-col gap-2\">\n          <h1 className=\"text-foreground text-2xl font-semibold tracking-tight text-balance\">\n            DitherImage\n          </h1>\n          <p className=\"text-muted-foreground max-w-prose text-sm leading-relaxed\">\n            CSS-only Bayer dither via{\" \"}\n            <code className=\"bg-muted rounded px-1 py-0.5 font-mono text-[0.75rem]\">\n              dither-plugin\n            </code>\n            . Compound:{\" \"}\n            <code className=\"bg-muted rounded px-1 py-0.5 font-mono text-[0.75rem]\">\n              DitherImage\n            </code>{\" \"}\n            wraps a{\" \"}\n            <code className=\"bg-muted rounded px-1 py-0.5 font-mono text-[0.75rem]\">\n              DitherImageFrame\n            </code>{\" \"}\n            (the dithered surface) containing a{\" \"}\n            <code className=\"bg-muted rounded px-1 py-0.5 font-mono text-[0.75rem]\">\n              DitherImageContent\n            </code>\n            , with an optional{\" \"}\n            <code className=\"bg-muted rounded px-1 py-0.5 font-mono text-[0.75rem]\">\n              DitherImageCaption\n            </code>{\" \"}\n            that stays outside the filter.\n          </p>\n        </header>\n\n        <section className=\"grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4\">\n          <DitherImage>\n            <DitherImageFrame aspectRatio=\"square\" size=\"xs\">\n              <DitherImageContent\n                alt={GHIBLI_STILLS[0].alt}\n                fill\n                sizes={FRAME_SIZES}\n                src={GHIBLI_STILLS[0].src}\n              />\n            </DitherImageFrame>\n            <DitherImageCaption>\n              <span className=\"text-foreground font-medium\">xs</span> · 8px\n              cell, defaults\n            </DitherImageCaption>\n          </DitherImage>\n\n          <DitherImage>\n            <DitherImageFrame aspectRatio=\"square\" size=\"sm\">\n              <DitherImageContent\n                alt={GHIBLI_STILLS[1].alt}\n                fill\n                sizes={FRAME_SIZES}\n                src={GHIBLI_STILLS[1].src}\n              />\n            </DitherImageFrame>\n            <DitherImageCaption>\n              <span className=\"text-foreground font-medium\">sm</span> · 12px\n              cell, defaults\n            </DitherImageCaption>\n          </DitherImage>\n\n          <DitherImage>\n            <DitherImageFrame aspectRatio=\"square\" size=\"md\">\n              <DitherImageContent\n                alt={GHIBLI_STILLS[2].alt}\n                fill\n                sizes={FRAME_SIZES}\n                src={GHIBLI_STILLS[2].src}\n              />\n            </DitherImageFrame>\n            <DitherImageCaption>\n              <span className=\"text-foreground font-medium\">md</span> · 16px\n              cell, defaults\n            </DitherImageCaption>\n          </DitherImage>\n\n          <DitherImage>\n            <DitherImageFrame aspectRatio=\"square\" size=\"lg\">\n              <DitherImageContent\n                alt={GHIBLI_STILLS[3].alt}\n                fill\n                sizes={FRAME_SIZES}\n                src={GHIBLI_STILLS[3].src}\n              />\n            </DitherImageFrame>\n            <DitherImageCaption>\n              <span className=\"text-foreground font-medium\">lg</span> · 20px\n              cell, defaults\n            </DitherImageCaption>\n          </DitherImage>\n        </section>\n\n        <section className=\"grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3\">\n          <DitherImage>\n            <DitherImageFrame\n              aspectRatio=\"square\"\n              contrast={80}\n              grayscale={0}\n              size=\"md\"\n            >\n              <DitherImageContent\n                alt={GHIBLI_STILLS[4].alt}\n                fill\n                sizes={FRAME_SIZES}\n                src={GHIBLI_STILLS[4].src}\n              />\n            </DitherImageFrame>\n            <DitherImageCaption>\n              <span className=\"text-foreground font-medium\">Color + soft</span>{\" \"}\n              · grayscale 0, contrast 80\n            </DitherImageCaption>\n          </DitherImage>\n\n          <DitherImage>\n            <DitherImageFrame\n              aspectRatio=\"square\"\n              brightness={1.15}\n              opacity={0.6}\n              size=\"lg\"\n            >\n              <DitherImageContent\n                alt={GHIBLI_STILLS[5].alt}\n                fill\n                sizes={FRAME_SIZES}\n                src={GHIBLI_STILLS[5].src}\n              />\n            </DitherImageFrame>\n            <DitherImageCaption>\n              <span className=\"text-foreground font-medium\">Faded overlay</span>{\" \"}\n              · opacity 0.6, brightness 1.15\n            </DitherImageCaption>\n          </DitherImage>\n\n          <DitherImage>\n            <DitherImageFrame\n              aspectRatio=\"square\"\n              invertOnDark\n              rounded=\"rounded-full\"\n              size=\"sm\"\n            >\n              <DitherImageContent\n                alt={GHIBLI_STILLS[6].alt}\n                fill\n                sizes={FRAME_SIZES}\n                src={GHIBLI_STILLS[6].src}\n              />\n            </DitherImageFrame>\n            <DitherImageCaption>\n              <span className=\"text-foreground font-medium\">\n                Circle · invert on dark\n              </span>{\" \"}\n              · <code className=\"font-mono text-[0.7rem]\">rounded-full</code>,\n              12px cell, dots flip in dark mode\n            </DitherImageCaption>\n          </DitherImage>\n        </section>\n\n        <section className=\"flex flex-col gap-6\">\n          <header className=\"flex flex-col gap-2\">\n            <h2 className=\"text-foreground text-lg font-semibold tracking-tight text-balance\">\n              Reveal · DitherImageOverlay\n            </h2>\n            <p className=\"text-muted-foreground max-w-prose text-sm leading-relaxed\">\n              Partial dither:{\" \"}\n              <code className=\"bg-muted rounded px-1 py-0.5 font-mono text-[0.75rem]\">\n                DitherImageReveal\n              </code>{\" \"}\n              stacks a masked{\" \"}\n              <code className=\"bg-muted rounded px-1 py-0.5 font-mono text-[0.75rem]\">\n                DitherImageOverlay\n              </code>{\" \"}\n              on the dithered frame.{\" \"}\n              <code className=\"bg-muted rounded px-1 py-0.5 font-mono text-[0.75rem]\">\n                direction\n              </code>{\" \"}\n              controls the gradient axis;{\" \"}\n              <code className=\"bg-muted rounded px-1 py-0.5 font-mono text-[0.75rem]\">\n                from\n              </code>{\" \"}\n              /{\" \"}\n              <code className=\"bg-muted rounded px-1 py-0.5 font-mono text-[0.75rem]\">\n                to\n              </code>{\" \"}\n              set mask stops (see component types for diagonals).\n            </p>\n          </header>\n\n          <div className=\"grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3\">\n            {REVEAL_OVERLAY_VARIANTS.map(\n              ({ direction, from, to, label, hint }, i) => {\n                const img = GHIBLI_STILLS[(7 + i) % GHIBLI_STILLS.length]\n                return (\n                  <DitherImage key={direction}>\n                    <DitherImageReveal className=\"mx-auto size-56 overflow-hidden rounded-xl\">\n                      <DitherImageFrame\n                        aspectRatio=\"square\"\n                        className=\"rounded-none\"\n                        invertOnDark\n                        rounded={false}\n                        size=\"md\"\n                      >\n                        <DitherImageContent\n                          alt={img.alt}\n                          className=\"object-cover\"\n                          fill\n                          sizes={REVEAL_SIZES}\n                          src={img.src}\n                        />\n                      </DitherImageFrame>\n                      <DitherImageOverlay\n                        alt={img.alt}\n                        className=\"object-cover\"\n                        direction={direction}\n                        fill\n                        from={from}\n                        sizes={REVEAL_SIZES}\n                        src={img.src}\n                        to={to}\n                      />\n                    </DitherImageReveal>\n                    <DitherImageCaption>\n                      <span className=\"text-foreground font-medium\">\n                        {label}\n                      </span>{\" \"}\n                      · {hint}\n                      <span className=\"tabular-nums\">\n                        {\" \"}\n                        — {from}%→{to}%\n                      </span>\n                    </DitherImageCaption>\n                  </DitherImage>\n                )\n              }\n            )}\n          </div>\n        </section>\n      </div>\n    </main>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}