Progressive Blur

"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export type ProgressiveBlurSide = "top" | "bottom" | "left" | "right";

export interface ProgressiveBlurProps
  extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Which edge the blur is strongest at.
   * @default "bottom"
   */
  side?: ProgressiveBlurSide;
  /**
   * Maximum backdrop blur in pixels (at the edge).
   * @default 16
   */
  strength?: number;
  /**
   * Number of blur layers. More = smoother gradient, slightly heavier.
   * @default 8
   */
  layers?: number;
  /**
   * Thickness of the blurred area (height for top/bottom, width for left/right).
   * Accepts any valid CSS length value.
   * @default "128px"
   */
  size?: string | number;
  /**
   * Whether to add a background-color tint fade alongside the blur.
   * Uses `--background` / `hsl(var(--background))` so it matches your theme.
   * @default true
   */
  tint?: boolean;
  className?: string;
}

// gradient goes FROM the edge (strong) TOWARD the interior (weak)
const GRADIENT_DIR: Record<ProgressiveBlurSide, string> = {
  top: "to bottom",
  bottom: "to top",
  left: "to right",
  right: "to left",
};

function pct(n: number) {
  return `${(n * 100).toFixed(2)}%`;
}

export function ProgressiveBlur({
  side = "bottom",
  strength = 4,
  layers = 8,
  size = "160px",
  tint = true,
  className,
  style,
  ...props
}: ProgressiveBlurProps) {
  const dir = GRADIENT_DIR[side];

  // geometric scale so perceptual difference between steps is even;
  // each layer masks from 0% to i/layers, fading out at (i+1)/layers
  const blurAt = (i: number) => {
    // blurAt(0) = strength, blurAt(layers-1) ≈ 0.4px
    const min = 0.4;
    return +(strength * Math.pow(min / strength, i / (layers - 1))).toFixed(2);
  };

  const sizeStyle: React.CSSProperties =
    side === "left" || side === "right"
      ? {
          width: typeof size === "number" ? `${size}px` : size,
          height: "100%",
          top: 0,
        }
      : {
          height: typeof size === "number" ? `${size}px` : size,
          width: "100%",
        };

  const positionStyle: React.CSSProperties =
    side === "top"
      ? { top: 0, left: 0 }
      : side === "bottom"
        ? { bottom: 0, left: 0 }
        : side === "left"
          ? { top: 0, left: 0 }
          : { top: 0, right: 0 };

  return (
    <div
      aria-hidden="true"
      className={cn("pointer-events-none absolute z-10", className)}
      style={{ ...sizeStyle, ...positionStyle, ...style }}
      {...props}
    >
      {tint && (
        <div
          className="absolute inset-0"
          style={{
            background: `linear-gradient(${dir}, hsl(var(--background)) 0%, transparent 100%)`,
          }}
        />
      )}

      {Array.from({ length: layers }, (_, i) => {
        const blur = blurAt(i);
        const maskGradient = `linear-gradient(${dir}, black 0%, black ${pct(i / layers)}, transparent ${pct((i + 1) / layers)})`;

        return (
          <div
            key={i}
            className="absolute inset-0"
            style={{
              backdropFilter: `blur(${blur}px)`,
              WebkitBackdropFilter: `blur(${blur}px)`,
              maskImage: maskGradient,
              WebkitMaskImage: maskGradient,
            }}
          />
        );
      })}
    </div>
  );
}