{
  "name": "dither-canvas",
  "type": "registry:component",
  "title": "Dither Canvas",
  "description": "Interactive ASCII-style dither canvas with fluid mouse distortion over video",
  "dependencies": [],
  "registryDependencies": [],
  "exportName": "DitherCanvas",
  "exportKind": "default",
  "tier": "pro",
  "version": "1.0.1",
  "changelog": [
    {
      "version": "1.0.1",
      "date": "2026-07-22",
      "summary": "Added a reduced-motion notice: this effect is a continuous cursor-driven fluid distortion and can't be reduced without losing it entirely, so it now surfaces that instead of silently ignoring the preference.",
      "breaking": false
    }
  ],
  "props": [
    {
      "name": "videoSrc",
      "type": "string",
      "default": "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/binary-effect-video.mp4",
      "description": "Video source URL used by the effect."
    },
    {
      "name": "charColumns",
      "type": "number",
      "default": 145,
      "description": "Controls the density of generated character columns.",
      "remixer": {
        "control": "range",
        "group": "characters",
        "groupTitle": "Characters",
        "default": 100,
        "min": 40,
        "max": 240,
        "step": 1
      }
    },
    {
      "name": "colorizeFromVideo",
      "type": "boolean",
      "default": false,
      "description": "Uses video color data instead of fixed monochrome characters.",
      "remixer": {
        "control": "checkbox",
        "group": "appearance",
        "groupTitle": "Appearance",
        "default": true
      }
    },
    {
      "name": "videoZoom",
      "type": "number",
      "default": 1,
      "description": "Zoom level applied to the video source.",
      "remixer": {
        "control": "range",
        "group": "appearance",
        "groupTitle": "Appearance",
        "default": 1.9,
        "min": 0.5,
        "max": 3,
        "step": 0.05
      }
    },
    {
      "name": "charZoom",
      "type": "number",
      "default": 1,
      "description": "Scale factor for the rendered character grid.",
      "remixer": {
        "control": "range",
        "group": "characters",
        "groupTitle": "Characters",
        "default": 0.9,
        "min": 0.5,
        "max": 2,
        "step": 0.05
      }
    },
    {
      "name": "spellBrightChars",
      "type": "boolean",
      "default": false,
      "description": "Uses bright sampled areas to spell the configured character phrase."
    },
    {
      "name": "colorBoost",
      "type": "number",
      "default": 1.4,
      "description": "Boosts sampled color intensity.",
      "remixer": {
        "control": "range",
        "group": "appearance",
        "groupTitle": "Appearance",
        "min": 0.2,
        "max": 3,
        "step": 0.05
      }
    },
    {
      "name": "disableMobileCursor",
      "type": "boolean",
      "default": true,
      "description": "Disables cursor interaction on mobile layouts."
    },
    {
      "name": "cursorHint",
      "type": "string",
      "default": "Move your cursor to see the binary fluid distortion effect.",
      "description": "Instructional cursor hint text."
    },
    {
      "name": "showMobileMessage",
      "type": "boolean",
      "default": true,
      "description": "Shows or hides the mobile message overlay."
    },
    {
      "name": "className",
      "type": "string",
      "default": "",
      "description": "Additional class names for the root canvas element."
    }
  ],
  "remixer": {
    "enabled": true,
    "defaultOpenGroupId": "characters",
    "layout": {
      "buttonClassName": "right-4! top-25!",
      "panelClassName": "right-0! top-[132px]! h-[calc(100%-132px)]! w-[344px]!"
    },
    "copyCode": {
      "includeOnlyPublicProps": true
    }
  },
  "files": [
    {
      "path": "index.tsx",
      "type": "registry:component",
      "target": "src/components/effects/dither-canvas/index.tsx"
    },
    {
      "path": "createSuspendedRaf.ts",
      "type": "registry:component",
      "target": "src/components/effects/dither-canvas/createSuspendedRaf.ts"
    }
  ]
}