progressive-blur

1"use client";
2import { cn } from "@/lib/utils";
3import { type HTMLMotionProps, motion } from "motion/react";
4 
5export const GRADIENT_ANGLES = {
6	top: 0,
7	right: 90,
8	bottom: 180,
9	left: 270,
10};
11 
12export type ProgressiveBlurProps = {
13	direction?: keyof typeof GRADIENT_ANGLES;
14	blurLayers?: number;
15	className?: string;
16	blurIntensity?: number;
17} & HTMLMotionProps<"div">;
18 
19export function ProgressiveBlur({
20	direction = "bottom",
21	blurLayers = 8,
22	className,
23	blurIntensity = 0.25,
24	...props
25}: ProgressiveBlurProps) {
26	const layers = Math.max(blurLayers, 2);
27	const segmentSize = 1 / (blurLayers + 1);
28 
29	return (
30		<div className={cn("relative", className)}>
31			{Array.from({ length: layers }).map((_, index) => {
32				const angle = GRADIENT_ANGLES[direction];
33				const gradientStops = [
34					index * segmentSize,
35					(index + 1) * segmentSize,
36					(index + 2) * segmentSize,
37					(index + 3) * segmentSize,
38				].map(
39					(pos, posIndex) =>
40						`rgba(255, 255, 255, ${posIndex === 1 || posIndex === 2 ? 1 : 0}) ${pos * 100}%`
41				);
42 
43				const gradient = `linear-gradient(${angle}deg, ${gradientStops.join(
44					", "
45				)})`;
46 
47				return (
48					<motion.div
49						className="pointer-events-none absolute inset-0 rounded-[inherit]"
50						key={index}
51						style={{
52							maskImage: gradient,
53							WebkitMaskImage: gradient,
54							backdropFilter: `blur(${index * blurIntensity}px)`,
55							WebkitBackdropFilter: `blur(${index * blurIntensity}px)`,
56						}}
57						{...props}
58					/>
59				);
60			})}
61		</div>
62	);
63}