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

---

title: Blur Fade date: 2024-07-07 description: Blur fade in and out animation. Used to smoothly fade in and out content. author: dillionverma published: true

<ComponentPreview name="blur-fade-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/blur-fade

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

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

<ComponentSource name="blur-fade" />

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

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

Examples

<ComponentPreview name="blur-fade-text-demo" />

Usage

import { BlurFade } from "@/components/ui/blur-fade"

<BlurFade>
  <img src="https://picsum.photos/300/200?random=1" alt="Sample 1" />
  <img src="https://picsum.photos/300/200?random=2" alt="Sample 2" />
  <img src="https://picsum.photos/300/200?random=3" alt="Sample 3" />
</BlurFade>

Props

| Prop | Type | Default | Description | | -------------- | ----------------- | --------- | ----------------------------------------------------------- | | children | React.ReactNode | - | The content to be animated | | className | string | - | The class name to be applied to the component | | variant | object | - | Custom animation variants for motion component | | duration | number | 0.4 | Duration (seconds) for the animation | | delay | number | 0 | Delay (seconds) before the animation starts | | offset | number | 6 | Offset for the animation | | direction | string | "down" | Direction for the animation (up, down, left, right) | | inView | boolean | false | Whether to trigger animation when component is in view | | inViewMargin | MarginType | "-50px" | Margin for triggering the in-view animation | | blur | string | "6px" | Amount of blur to apply during the animation |

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