edge-blur-demo

1"use client"
2 
3import { BottomBlur, EdgeBlur, TopBlur } from "@/registry/default/ui/edge-blur"
4 
5const SCROLL_PARAGRAPH_KEYS = [
6  "s-a",
7  "s-b",
8  "s-c",
9  "s-d",
10  "s-e",
11  "s-f",
12  "s-g",
13  "s-h",
14  "s-i",
15  "s-j",
16  "s-k",
17  "s-l",
18] as const
19 
20const SMALL_ROW_KEYS = [
21  "b-1",
22  "b-2",
23  "b-3",
24  "b-4",
25  "b-5",
26  "b-6",
27  "b-7",
28  "b-8",
29] as const
30 
31export default function EdgeBlurDemo() {
32  return (
33    <div className="dark:bg-stone-950 flex flex-col items-center gap-10 rounded-md px-4 py-6 md:px-0">
34      <div className="max-w-xl space-y-2 text-center">
35        <h2 className="text-foreground text-2xl font-bold tracking-tight">
36          Edge blur
37        </h2>
38        <p className="text-muted-foreground text-sm">
39          Stacked backdrop-blur layers with a gradient mask. Blurs sit{" "}
40          <em>outside</em> the scroll layer so they stay pinned to the frame;
41          only the inner panel scrolls.{" "}
42          <code className="bg-muted rounded px-1 py-0.5 text-xs">
43            transform-gpu
44          </code>{" "}
45          on the frame keeps{" "}
46          <code className="bg-muted rounded px-1 py-0.5 text-xs">fixed</code>{" "}
47          blurs inside this preview instead of the viewport.
48        </p>
49      </div>
50 
51      <div className="relative isolate h-[420px] w-full max-w-lg transform-gpu overflow-hidden rounded-xl border bg-muted/30 shadow-sm">
52        <div className="absolute inset-0 z-0 overflow-y-auto">
53          <div className="from-background via-muted/40 to-background min-h-[700px] space-y-3 bg-gradient-to-b p-6 pb-28 pt-8">
54            {SCROLL_PARAGRAPH_KEYS.map((key, i) => (
55              <p
56                key={key}
57                className="text-foreground/90 text-sm leading-relaxed"
58              >
59                Paragraph {i + 1}. Layers use{" "}
60                <code className="bg-background/80 rounded px-1 py-0.5 text-xs">
61                  pointer-events-none
62                </code>{" "}
63                so the scroll container still receives wheel and touch events.
64              </p>
65            ))}
66          </div>
67        </div>
68        <EdgeBlur position="top" height={72} />
69        <EdgeBlur position="bottom" height={96} />
70      </div>
71 
72      <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-2">
73        <div className="relative isolate h-44 transform-gpu overflow-hidden rounded-lg border bg-card">
74          <section
75            aria-label="Demo panel with bottom edge blur"
76// … truncated