progressive-blur/dist/main.cjs.map

Drop-in progressive blur for React.

{"version":3,"sources":["../lib/main.tsx","../lib/RadialBlur.tsx","../lib/LinearBlur.tsx"],"sourcesContent":["export { RadialBlur } from \"./RadialBlur\";\nexport { LinearBlur } from \"./LinearBlur\";\n","import React from \"react\";\n\ninterface RadialBlurProps extends React.HTMLAttributes<HTMLDivElement> {\n  strength?: number;\n  steps?: number;\n  falloffPercentage?: number;\n  tint?: string;\n}\n\nfunction RadialBlur({\n  strength = 64,\n  steps = 8,\n  falloffPercentage = 100,\n  tint = \"transparent\",\n  ...props\n}: RadialBlurProps) {\n  const actualSteps = Math.max(1, steps);\n  const step = falloffPercentage / actualSteps;\n  const factor = 0.5;\n  const base = Math.pow(strength / factor, 1 / (actualSteps - 1));\n  const centerPercentage = 100 - falloffPercentage;\n\n  const getBackdropFilter = (i: number) =>\n    `blur(${factor * base ** (actualSteps - i - 1)}px)`;\n\n  return (\n    <div\n      {...props}\n      style={{\n        // This has to be set on the top level element to prevent pointer events\n        pointerEvents: \"none\",\n        ...props.style,\n      }}\n    >\n      <div\n        style={{\n          position: \"relative\",\n          zIndex: 0,\n          width: \"100%\",\n          height: \"100%\",\n          background: `radial-gradient(\n            closest-side,\n            rgb(from ${tint} r g b / alpha) 0%,\n            rgb(from ${tint} r g b / 0%) 100%\n          )`,\n        }}\n      >\n        {/* Center starts at 100-falloffPercentage% */}\n        <div\n          style={{\n            position: \"absolute\",\n            zIndex: 1,\n            inset: 0,\n            mask: `radial-gradient(\n                  closest-side,\n                  rgba(0, 0, 0, 1) ${centerPercentage}%,\n                  rgba(0, 0, 0, 0) ${centerPercentage + step}%\n                )`,\n            backdropFilter: getBackdropFilter(0),\n            WebkitBackdropFilter: getBackdropFilter(0),\n          }}\n        />\n        {actualSteps > 1 && (\n          <div\n            style={{\n              position: \"absolute\",\n              zIndex: 2,\n              inset: 0,\n              mask: `radial-gradient(\n                  closest-side,\n                  rgba(0, 0, 0, 1) ${centerPercentage}%,\n                  rgba(0, 0, 0, 1) ${centerPercentage + step}%,\n                  rgba(0, 0, 0, 0) ${centerPercentage + step * 2}%\n                )`,\n              backdropFilter: getBackdropFilter(1),\n              WebkitBackdropFilter: getBackdropFilter(1),\n            }}\n          />\n        )}\n        {actualSteps > 2 &&\n          Array.from({ length: actualSteps - 2 }).map((_, i) => (\n            <div\n              key={i}\n              style={{\n                position: \"absolute\",\n                zIndex: i + 2,\n                inset: 0,\n                mask: `radial-gradient(\n                    closest-side,\n                    rgba(0, 0, 0, 0) ${centerPercentage + i * step}%,\n                    rgba(0, 0, 0, 1) ${centerPercentage + (i + 1) * step}%,\n                    rgba(0, 0, 0, 1) ${centerPercentage + (i + 2) * step}%,\n                    rgba(0, 0, 0, 0) ${centerPercentage + (i + 3) * step}%\n                  )`,\n                backdropFilter: getBackdropFilter(i + 2),\n                WebkitBackdropFilter: getBackdropFilter(i + 2),\n              }}\n            />\n          ))}\n      </div>\n    </div>\n  );\n}\n\nexport { RadialBlur };\n","import React from \"react\";\n\ninterface LinearBlurProps extends React.HTMLAttributes<HTMLDivElement> {\n  strength?: number;\n  steps?: number;\n  falloffPercentage?: number;\n  tint?: string;\n  side?: \"left\" | \"right\" | \"top\" | \"bottom\";\n}\n\nconst oppositeSide = {\n  left: \"right\",\n  right: \"left\",\n  top: \"bottom\",\n  bottom: \"top\",\n};\n\nfunction LinearBlur({\n  strength = 64,\n  steps = 8,\n  falloffPercentage = 100,\n  tint = \"transparent\",\n  side = \"top\",\n  ...props\n}: LinearBlurProps) {\n  const actualSteps = Math.max(1, steps);\n  const step = falloffPercentage / actualSteps;\n\n  const factor = 0.5;\n\n  const base = Math.pow(strength / factor, 1 / (actualSteps - 1));\n\n  const mainPercentage = 100 - falloffPercentage;\n\n  const getBackdropFilter = (i: number) =>\n    `blur(${factor * base ** (actualSteps - i - 1)}px)`;\n\n  return (\n    <div\n      {...props}\n      style={{\n        // This has to be set on the top level element to prevent pointer events\n        pointerEvents: \"none\",\n        transformOrigin: side,\n        ...props.style,\n      }}\n    >\n      <div\n        style={{\n          position: \"relative\",\n          zIndex: 0,\n          width: \"100%\",\n          height: \"100%\",\n          background: `linear-gradient(\n            to ${oppositeSide[side]},\n            rgb(from ${tint} r g b / alpha) 0%,\n            rgb(from ${tint} r g b / 0%) 100%\n          )`,\n        }}\n      >\n        {/* Full blur at 100-falloffPercentage% */}\n        <div\n          style={{\n            position: \"absolute\",\n            zIndex: 1,\n            inset: 0,\n            mask: `linear-gradient(\n                  to ${oppositeSide[side]},\n                  rgba(0, 0, 0, 1) ${mainPercentage}%,\n                  rgba(0, 0, 0, 0) ${mainPercentage + step}%\n                )`,\n            backdropFilter: getBackdropFilter(0),\n            WebkitBackdropFilter: getBackdropFilter(0),\n          }}\n        />\n        {actualSteps > 1 && (\n          <div\n            style={{\n              position: \"absolute\",\n              zIndex: 2,\n              inset: 0,\n              mask: `linear-gradient(\n                to ${oppositeSide[side]},\n                  rgba(0, 0, 0, 1) ${mainPercentage}%,\n                  rgba(0, 0, 0, 1) ${mainPercentage + step}%,\n                  rgba(0, 0, 0, 0) ${mainPercentage + step * 2}%\n                )`,\n              backdropFilter: getBackdropFilter(1),\n              WebkitBackdropFilter: getBackdropFilter(1),\n            }}\n          />\n        )}\n        {actualSteps > 2 &&\n          Array.from({ length: actualSteps - 2 }).map((_, i) => (\n            <div\n              key={i}\n              style={{\n                position: \"absolute\",\n                zIndex: i + 2,\n                inset: 0,\n                mask: `linear-gradient(\n                    to ${oppositeSide[side]},\n                    rgba(0, 0, 0, 0) ${mainPercentage + i * step}%,\n                    rgba(0, 0, 0, 1) ${mainPercentage + (i + 1) * step}%,\n                    rgba(0, 0, 0, 1) ${mainPercentage + (i + 2) * step}%,\n                    rgba(0, 0, 0, 0) ${mainPercentage + (i + 3) * step}%\n                  )`,\n                backdropFilter: getBackdropFilter(i + 2),\n                WebkitBackdropFilter: getBackdropFilter(i + 2),\n              }}\n            />\n          ))}\n      </div>\n    </div>\n  );\n}\n\nexport { LinearBlur };\n"],"mappings":"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","names":["main_exports","__export","LinearBlur","RadialBlur","__toCommonJS","import_jsx_runtime","RadialBlur","strength","steps","falloffPercentage","tint","props","actualSteps","step","factor","base","centerPercentage","getBackdropFilter","i","_","import_jsx_runtime","oppositeSide","LinearBlur","strength","steps","falloffPercentage","tint","side","props","actualSteps","step","factor","base","mainPercentage","getBackdropFilter","_","i"]}