{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-fade-effect",
  "title": "Scroll Fade Effect",
  "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
  "description": "Fade content edges as you scroll, for both vertical and horizontal layouts.",
  "files": [
    {
      "path": "src/registry/components/scroll-fade-effect/scroll-fade-effect.tsx",
      "content": "import type { ComponentProps } from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nexport type ScrollFadeEffectProps = ComponentProps<\"div\"> & {\r\n  /**\r\n   * Scroll direction to apply the fade effect.\r\n   * @defaultValue \"vertical\"\r\n   * */\r\n  orientation?: \"horizontal\" | \"vertical\"\r\n}\r\n\r\nexport function ScrollFadeEffect({\r\n  className,\r\n  orientation = \"vertical\",\r\n  ...props\r\n}: ScrollFadeEffectProps) {\r\n  return (\r\n    <div\r\n      data-orientation={orientation}\r\n      className={cn(\r\n        \"data-[orientation=horizontal]:overflow-x-auto data-vertical:overflow-y-auto\",\r\n        \"data-[orientation=horizontal]:scroll-fade-effect-x data-vertical:scroll-fade-effect-y\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\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"
    }
  },
  "type": "registry:component"
}