{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-fade",
  "title": "Scroll Fade",
  "description": "A CSS utility that fades the edges of any scroll container as you scroll, with no component required.",
  "files": [
    {
      "path": "registry/default/scroll-fade/scroll-fade.css",
      "content": "/* -------------------------------------------------------------------------------------------------\n * Scroll Fade utility\n *\n * Standalone, component-free edge fade for any scroll container. Add\n * `scroll-fade` (or an axis/edge variant) to the element that has `overflow`\n * and the edges dissolve as you scroll — masking the content so it works over\n * any background. Scroll-aware via CSS scroll-driven animations; falls back to\n * a static fade where unsupported. No JS, no scroll listeners.\n *\n * Import this file once in your global CSS (after `@import \"tailwindcss\"`):\n *   @import \"./components/ui/cubby-ui/scroll-fade.css\";\n *\n *   --scroll-fade-size:   fade depth (default min(12%, 2.5rem))\n *   --scroll-fade-reveal: scroll distance the fade eases over (default 6rem),\n *                         clamped to the scroll range so short scrollers still\n *                         fully reveal.\n *\n * The @property + @keyframes here are byte-identical to the ScrollArea\n * component's scroll-area.css so the two never conflict when both are present.\n * -------------------------------------------------------------------------------------------------*/\n@property --scroll-fade-top {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --scroll-fade-bottom {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --scroll-fade-left {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --scroll-fade-right {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0px;\n}\n\n@keyframes scroll-fade-reveal-top {\n  from {\n    --scroll-fade-top: 0px;\n  }\n  to {\n    --scroll-fade-top: var(--scroll-fade-size);\n  }\n}\n@keyframes scroll-fade-reveal-bottom {\n  from {\n    --scroll-fade-bottom: var(--scroll-fade-size);\n  }\n  to {\n    --scroll-fade-bottom: 0px;\n  }\n}\n@keyframes scroll-fade-reveal-left {\n  from {\n    --scroll-fade-left: 0px;\n  }\n  to {\n    --scroll-fade-left: var(--scroll-fade-size);\n  }\n}\n@keyframes scroll-fade-reveal-right {\n  from {\n    --scroll-fade-right: var(--scroll-fade-size);\n  }\n  to {\n    --scroll-fade-right: 0px;\n  }\n}\n\n/* Vertical fade (default). `scroll-fade` and `scroll-fade-y` are aliases. */\n@utility scroll-fade {\n  --scroll-fade-size: min(12%, 2.5rem);\n  -webkit-mask-image: linear-gradient(\n    to bottom,\n    transparent 0,\n    #000 var(--scroll-fade-top, 0px),\n    #000 calc(100% - var(--scroll-fade-bottom, 0px)),\n    transparent 100%\n  );\n  mask-image: linear-gradient(\n    to bottom,\n    transparent 0,\n    #000 var(--scroll-fade-top, 0px),\n    #000 calc(100% - var(--scroll-fade-bottom, 0px)),\n    transparent 100%\n  );\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n\n  @supports (animation-timeline: scroll()) {\n    animation:\n      scroll-fade-reveal-top 1ms ease-in-out,\n      scroll-fade-reveal-bottom 1ms ease-in-out;\n    animation-timeline: scroll(self y), scroll(self y);\n    animation-range:\n      0 min(var(--scroll-fade-reveal, 6rem), 100%),\n      calc(100% - min(var(--scroll-fade-reveal, 6rem), 100%)) 100%;\n    animation-fill-mode: both;\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    --scroll-fade-top: var(--scroll-fade-size);\n    --scroll-fade-bottom: var(--scroll-fade-size);\n  }\n}\n\n@utility scroll-fade-y {\n  --scroll-fade-size: min(12%, 2.5rem);\n  -webkit-mask-image: linear-gradient(\n    to bottom,\n    transparent 0,\n    #000 var(--scroll-fade-top, 0px),\n    #000 calc(100% - var(--scroll-fade-bottom, 0px)),\n    transparent 100%\n  );\n  mask-image: linear-gradient(\n    to bottom,\n    transparent 0,\n    #000 var(--scroll-fade-top, 0px),\n    #000 calc(100% - var(--scroll-fade-bottom, 0px)),\n    transparent 100%\n  );\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n\n  @supports (animation-timeline: scroll()) {\n    animation:\n      scroll-fade-reveal-top 1ms ease-in-out,\n      scroll-fade-reveal-bottom 1ms ease-in-out;\n    animation-timeline: scroll(self y), scroll(self y);\n    animation-range:\n      0 min(var(--scroll-fade-reveal, 6rem), 100%),\n      calc(100% - min(var(--scroll-fade-reveal, 6rem), 100%)) 100%;\n    animation-fill-mode: both;\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    --scroll-fade-top: var(--scroll-fade-size);\n    --scroll-fade-bottom: var(--scroll-fade-size);\n  }\n}\n\n/* Horizontal fade. */\n@utility scroll-fade-x {\n  --scroll-fade-size: min(12%, 2.5rem);\n  -webkit-mask-image: linear-gradient(\n    to right,\n    transparent 0,\n    #000 var(--scroll-fade-left, 0px),\n    #000 calc(100% - var(--scroll-fade-right, 0px)),\n    transparent 100%\n  );\n  mask-image: linear-gradient(\n    to right,\n    transparent 0,\n    #000 var(--scroll-fade-left, 0px),\n    #000 calc(100% - var(--scroll-fade-right, 0px)),\n    transparent 100%\n  );\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n\n  @supports (animation-timeline: scroll()) {\n    animation:\n      scroll-fade-reveal-left 1ms ease-in-out,\n      scroll-fade-reveal-right 1ms ease-in-out;\n    animation-timeline: scroll(self x), scroll(self x);\n    animation-range:\n      0 min(var(--scroll-fade-reveal, 6rem), 100%),\n      calc(100% - min(var(--scroll-fade-reveal, 6rem), 100%)) 100%;\n    animation-fill-mode: both;\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    --scroll-fade-left: var(--scroll-fade-size);\n    --scroll-fade-right: var(--scroll-fade-size);\n  }\n}\n\n/* Single-edge fades. */\n@utility scroll-fade-t {\n  --scroll-fade-size: min(12%, 2.5rem);\n  -webkit-mask-image: linear-gradient(\n    to bottom,\n    transparent 0,\n    #000 var(--scroll-fade-top, 0px),\n    #000 100%\n  );\n  mask-image: linear-gradient(\n    to bottom,\n    transparent 0,\n    #000 var(--scroll-fade-top, 0px),\n    #000 100%\n  );\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n\n  @supports (animation-timeline: scroll()) {\n    animation: scroll-fade-reveal-top 1ms ease-in-out;\n    animation-timeline: scroll(self y);\n    animation-range: 0 min(var(--scroll-fade-reveal, 6rem), 100%);\n    animation-fill-mode: both;\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    --scroll-fade-top: var(--scroll-fade-size);\n  }\n}\n\n@utility scroll-fade-b {\n  --scroll-fade-size: min(12%, 2.5rem);\n  -webkit-mask-image: linear-gradient(\n    to bottom,\n    #000 0,\n    #000 calc(100% - var(--scroll-fade-bottom, 0px)),\n    transparent 100%\n  );\n  mask-image: linear-gradient(\n    to bottom,\n    #000 0,\n    #000 calc(100% - var(--scroll-fade-bottom, 0px)),\n    transparent 100%\n  );\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n\n  @supports (animation-timeline: scroll()) {\n    animation: scroll-fade-reveal-bottom 1ms ease-in-out;\n    animation-timeline: scroll(self y);\n    animation-range: calc(100% - min(var(--scroll-fade-reveal, 6rem), 100%)) 100%;\n    animation-fill-mode: both;\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    --scroll-fade-bottom: var(--scroll-fade-size);\n  }\n}\n\n@utility scroll-fade-l {\n  --scroll-fade-size: min(12%, 2.5rem);\n  -webkit-mask-image: linear-gradient(\n    to right,\n    transparent 0,\n    #000 var(--scroll-fade-left, 0px),\n    #000 100%\n  );\n  mask-image: linear-gradient(\n    to right,\n    transparent 0,\n    #000 var(--scroll-fade-left, 0px),\n    #000 100%\n  );\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n\n  @supports (animation-timeline: scroll()) {\n    animation: scroll-fade-reveal-left 1ms ease-in-out;\n    animation-timeline: scroll(self x);\n    animation-range: 0 min(var(--scroll-fade-reveal, 6rem), 100%);\n    animation-fill-mode: both;\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    --scroll-fade-left: var(--scroll-fade-size);\n  }\n}\n\n@utility scroll-fade-r {\n  --scroll-fade-size: min(12%, 2.5rem);\n  -webkit-mask-image: linear-gradient(\n    to right,\n    #000 0,\n    #000 calc(100% - var(--scroll-fade-right, 0px)),\n    transparent 100%\n  );\n  mask-image: linear-gradient(\n    to right,\n    #000 0,\n    #000 calc(100% - var(--scroll-fade-right, 0px)),\n    transparent 100%\n  );\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n\n  @supports (animation-timeline: scroll()) {\n    animation: scroll-fade-reveal-right 1ms ease-in-out;\n    animation-timeline: scroll(self x);\n    animation-range: calc(100% - min(var(--scroll-fade-reveal, 6rem), 100%)) 100%;\n    animation-fill-mode: both;\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    --scroll-fade-right: var(--scroll-fade-size);\n  }\n}\n\n/* Disable — works in any order, e.g. `md:scroll-fade-none`. */\n@utility scroll-fade-none {\n  -webkit-mask-image: none;\n  mask-image: none;\n}\n",
      "type": "registry:file",
      "target": "components/ui/cubby-ui/scroll-fade.css"
    }
  ],
  "type": "registry:component"
}