ProgressiveBlurBackground.tsx

import { cn } from "@/utils";

export const ProgressiveBlurBackground: React.FC<
  React.ComponentProps<"div"> & {
    orientation?: "top" | "bottom";
    steps?: number;
    blurTargetPx?: number;
  }
> = ({
  className,
  orientation = "top",
  steps = 7,
  blurTargetPx = steps,
  ...props
}) => {
  return (
    <div
      className={cn("absolute inset-0 pointer-events-none -z-5", className)}
      {...props}
    >
      {Array.from({ length: steps }).map((_, index) => (
        <div
          key={index}
          className={cn(
            "absolute w-full h-(--height) backdrop-blur-(--bg-blur)",
            {
              "bottom-(--position) mask-t-from-50%": orientation === "bottom",
              "top-(--position) mask-b-from-50%": orientation === "top",
            },
          )}
          style={
            {
              "--bg-blur": `${((index + 1) / blurTargetPx) * steps}px`,
              "--position": `${
                orientation === "top"
                  ? 100 - (100 / steps) * index
                  : (100 / steps) * index
              }%`,
              "--height": `${(100 / steps) * 2}%`,
            } as React.CSSProperties
          }
        />
      ))}
    </div>
  );
};