edge-blur

1"use client"
2 
3interface EdgeBlurProps {
4  position?: "top" | "bottom"
5  height?: number
6}
7 
8export function EdgeBlur({ position = "bottom", height = 75 }: EdgeBlurProps) {
9  const blurLayers = [1, 2, 3, 6, 12]
10 
11  const isTop = position === "top"
12 
13  return (
14    <div
15      className={`fixed inset-x-0 isolate z-40 pointer-events-none ${isTop ? "top-0" : "bottom-0"}`}
16      style={{ height }}
17    >
18      {blurLayers.map((blur) => (
19        <div
20          key={blur}
21          className="absolute inset-0"
22          style={{
23            backdropFilter: `blur(${blur}px)`,
24            WebkitBackdropFilter: `blur(${blur}px)`,
25            maskImage: `linear-gradient(to ${isTop ? "bottom" : "top"}, black, transparent)`,
26            WebkitMaskImage: `linear-gradient(to ${isTop ? "bottom" : "top"}, black, transparent)`,
27          }}
28        />
29      ))}
30    </div>
31  )
32}
33 
34// Convenience exports for specific positions
35export function TopBlur({ height = 75 }: { height?: number }) {
36  return <EdgeBlur position="top" height={height} />
37}
38 
39export function BottomBlur({ height = 75 }: { height?: number }) {
40  return <EdgeBlur position="bottom" height={height} />
41}