Skip to main content

​
Installation

npx shadcn-svelte@latest add blur-fade

​
Usage

<script lang="ts">
  import BlurFade from "$lib/components/magic/blur-fade/blur-fade.svelte";
</script>

<BlurFade>
  <h1>This content will fade in with a blur effect</h1>
</BlurFade>

​
Props

​
children
Snippet
required
The content to animate.
​
class
string
Additional CSS classes to apply to the wrapper div.
​
variant
object
Custom animation variant with hidden and visible states. Each state should define a y position value.
{
  hidden: { y: number };
  visible: { y: number };
}
​
duration
number
default:"0.4"
Duration of the animation in seconds.
​
delay
number
default:"0"
Delay before the animation starts in seconds. An additional 0.04s is automatically added.
​
offset
number
default:"6"
Distance in pixels the content moves during animation.
​
direction
'up' | 'down' | 'left' | 'right'
default:"'down'"
Direction from which the content animates in.
​
inView
boolean
default:"false"
When true, the animation only triggers when the element enters the viewport.
​
inViewMargin
string
default:"'-50px'"
Root margin for the intersection observer. Accepts CSS margin values.
​
blur
string
default:"'6px'"
Initial blur amount applied during the hidden state.

​
Examples

​
Different Directions

<BlurFade direction="up">
  <p>Fades in from below</p>
</BlurFade>

<BlurFade direction="left">
  <p>Fades in from the right</p>
</BlurFade>

<BlurFade direction="right">
  <p>Fades in from the left</p>
</BlurFade>

​
With Intersection Observer

<BlurFade inView inViewMargin="-100px">
  <p>Only animates when scrolled into view</p>
</BlurFade>

​
Staggered Animation

{#each items as item, i}
  <BlurFade delay={i * 0.1}>
    <div>{item}</div>
  </BlurFade>
{/each}

​
Custom Blur Amount

<BlurFade blur="12px" duration={0.8}>
  <h1>Heavy blur effect</h1>
</BlurFade>

​
Custom Variant

<BlurFade 
  variant={{
    hidden: { y: 20 },
    visible: { y: 0 }
  }}
>
  <p>Custom animation variant</p>
</BlurFade>

​
Features

  • Smooth blur and fade animations
  • Four directional options (up, down, left, right)
  • Intersection observer support for scroll-triggered animations
  • Customizable blur amount and duration
  • Perfect for staggered list animations
  • Accessible with proper semantic HTML

Build docs developers (and LLMs) love

Get started for freeTalk to us