{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-fade-effect",
  "type": "registry:component",
  "title": "Scroll Fade Effect",
  "author": "ncdai <dai@chanhdai.com>",
  "description": "A React component that adds a fade effect to content as you scroll.",
  "registryDependencies": [
    "@ncdai/utils"
  ],
  "files": [
    {
      "path": "src/registry/scroll-fade-effect/scroll-fade-effect.tsx",
      "content": "import React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport function ScrollFadeEffect({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  orientation?: \"horizontal\" | \"vertical\";\n}) {\n  return (\n    <div\n      data-orientation={orientation}\n      className={cn(\n        \"data-[orientation=horizontal]:overflow-x-auto data-[orientation=vertical]:overflow-y-auto\",\n        \"data-[orientation=horizontal]:scroll-fade-effect-x data-[orientation=vertical]:scroll-fade-effect-y\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "css": {
    "@property --top-mask-height": {
      "syntax": "\"<length>\"",
      "inherits": "true",
      "initial-value": "0px"
    },
    "@property --bottom-mask-height": {
      "syntax": "\"<length>\"",
      "inherits": "true",
      "initial-value": "64px"
    },
    "@property --left-mask-width": {
      "syntax": "\"<length>\"",
      "inherits": "true",
      "initial-value": "0px"
    },
    "@property --right-mask-width": {
      "syntax": "\"<length>\"",
      "inherits": "true",
      "initial-value": "64px"
    },
    "@layer base": {
      "@keyframes show-top-mask": {
        "to": {
          "--top-mask-height": "var(--mask-height)"
        }
      },
      "@keyframes hide-bottom-mask": {
        "to": {
          "--bottom-mask-height": "0px"
        }
      },
      "@keyframes show-left-mask": {
        "to": {
          "--left-mask-width": "var(--mask-width)"
        }
      },
      "@keyframes hide-right-mask": {
        "to": {
          "--right-mask-width": "0px"
        }
      }
    },
    "@utility scroll-fade-effect-y": {
      "--mask-height": "64px",
      "--mask-offset-top": "0px",
      "--mask-offset-bottom": "0px",
      "--scroll-buffer": "2rem",
      "mask-image": "linear-gradient(to top, transparent, black 90%), linear-gradient(to bottom, transparent 0%, black 100%), linear-gradient(black, black)",
      "mask-size": "100% var(--top-mask-height), 100% var(--bottom-mask-height), 100% 100%",
      "mask-repeat": "no-repeat, no-repeat, no-repeat",
      "mask-position": "0 var(--mask-offset-top), 0 calc(100% - var(--mask-offset-bottom)), 0 0",
      "mask-composite": "exclude",
      "animation-name": "show-top-mask, hide-bottom-mask",
      "animation-timeline": "scroll(self), scroll(self)",
      "animation-range": "0 var(--scroll-buffer), calc(100% - var(--scroll-buffer)) 100%",
      "animation-fill-mode": "both"
    },
    "@utility scroll-fade-effect-x": {
      "--mask-width": "64px",
      "--mask-offset-left": "0px",
      "--mask-offset-right": "0px",
      "--scroll-buffer": "2rem",
      "mask-image": "linear-gradient(to left, transparent, black 90%), linear-gradient(to right, transparent 0%, black 100%), linear-gradient(black, black)",
      "mask-size": "var(--left-mask-width) 100%, var(--right-mask-width) 100%, 100% 100%",
      "mask-repeat": "no-repeat, no-repeat, no-repeat",
      "mask-position": "var(--mask-offset-left) 0, calc(100% - var(--mask-offset-right)) 0, 0 0",
      "mask-composite": "exclude",
      "animation-name": "show-left-mask, hide-right-mask",
      "animation-timeline": "scroll(self inline), scroll(self inline)",
      "animation-range": "0 var(--scroll-buffer), calc(100% - var(--scroll-buffer)) 100%",
      "animation-fill-mode": "both"
    }
  }
}