Progressive Blur Demo

1import { ProgressiveBlur } from "@/components/sora-ui/effects/progressive-blur";
2 
3const PARAGRAPHS = [
4  "Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, reiciendis eum vitae nostrum, temporibus repudiandae voluptatibus, natus iure ipsa velit odit quibusdam illum.",
5  "Quaerat cumque laudantium libero reprehenderit perferendis quo nulla voluptate. Repellat tenetur labore exercitationem dicta libero voluptate suscipit, iusto ea assumenda.",
6  "Ipsa enim, quidem atque modi error eaque, debitis perferendis, hic iste libero dignissimos ea. Quod inventore beatae aspernatur nulla rem perferendis aperiam at debitis.",
7  "Quod reiciendis in similique reprehenderit commodi quo blanditiis nobis hic ea optio illum placeat officia alias quasi autem earum quos obcaecati, voluptatum corporis quisquam.",
8  "Quisquam iste, quas explicabo omnis harum aut quam adipisci, voluptatem saepe accusantium doloribus repellendus amet culpa magnam ex et dolores accusamus commodi facere.",
9  "Beatae deserunt sequi id eos libero suscipit totam cum, sed architecto atque quisquam et incidunt quod fuga ullam repellat assumenda quos ab, voluptatum sint nesciunt.",
10];
11 
12export default function ProgressiveBlurDemo() {
13  return (
14    <div className="relative h-80 w-full max-w-sm overflow-hidden rounded-xl border bg-background">
15      <div className="h-full space-y-4 overflow-y-auto px-5 py-24 text-muted-foreground text-sm leading-relaxed">
16        {PARAGRAPHS.map((paragraph) => (
17          <p key={paragraph}>{paragraph}</p>
18        ))}
19      </div>
20      <ProgressiveBlur direction="top" />
21      <ProgressiveBlur direction="bottom" />
22    </div>
23  );
24}