║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Progressive Blur date: 2024-06-01 description: Add a progressive blur effect to scrollable content author: magicui published: true

<ComponentPreview name="progressive-blur-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/progressive-blur

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="progressive-blur" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Usage

import { ProgressiveBlur } from "@/components/ui/progressive-blur"

<div className="relative h-[400px] w-full overflow-auto">
  {/* Your scrollable content */}
  <div className="space-y-4 p-4">{/* Content items */}</div>

  <ProgressiveBlur height="50%" position="bottom" />
</div>

Props

ProgressiveBlur

| Prop | Type | Default | Description | | ------------ | ----------------------------- | ------------------------------- | ----------------------------------------------------- | | className | string | - | Additional classes to apply to the blur container. | | height | string | "30%" | Height of the blur effect container. | | position | "top" \| "bottom" \| "both" | "bottom" | Position of the blur effect. | | blurLevels | number[] | [0.5, 1, 2, 4, 8, 16, 32, 64] | Array of blur values (in px) for progressive effect. | | children | React.ReactNode | - | Optional content to render within the blur container. |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║