Blur Fade

PreviewCode

@/demos/BlurFadeDemo.tsx

import { For } from 'solid-js'

import { BlurFade } from '@/registry/magicui/blur-fade'

const images = Array.from({ length: 9 }, (_, i) => {
  const isLandscape = i % 2 === 0
  const width = isLandscape ? 800 : 600
  const height = isLandscape ? 600 : 800
  return `https://picsum.photos/seed/${i + 1}/${width}/${height}`
})

export function BlurFadeDemo() {
  return (
    <section id="photos">
      <div class="
        columns-2 gap-4
        sm:columns-3
      "
      >
        <For each={images}>
          {(imageUrl, idx) => (
            <BlurFade delay={0.25 + idx() * 0.05} inView>
              <img
                class="mb-4 size-full rounded-lg object-contain"
                src={imageUrl}
                alt={`Random stock image ${idx() + 1}`}
              />
            </BlurFade>
          )}
        </For>
      </div>
    </section>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/blur-fade

bun

bunx shadcn@latest add @magicui-solid/blur-fade

yarn

yarn dlx shadcn@latest add @magicui-solid/blur-fade

npm

npx shadcn@latest add @magicui-solid/blur-fade

Examples

PreviewCode

Hello World 👋

Nice to meet you

@/demos/BlurFadeTextDemo.tsx

import { BlurFade } from '@/registry/magicui/blur-fade'

export function BlurFadeTextDemo() {
  return (
    <section id="header">
      <BlurFade delay={0.25} inView>
        <h2 class="
          text-3xl font-bold tracking-tighter
          sm:text-5xl
          xl:text-6xl/none
        "
        >
          Hello World 👋
        </h2>
      </BlurFade>
      <BlurFade delay={0.25 * 2} inView>
        <span class="
          text-xl tracking-tighter text-pretty
          sm:text-3xl
          xl:text-4xl/none
        "
        >
          Nice to meet you
        </span>
      </BlurFade>
    </section>
  )
}

Import

import { BlurFade } from '@/components/magicui/blur-fade'

Usage

<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	JSX.Element	-	The content to be animated
class	string	-	The class name to be applied to the component
variant	object	-	Custom animation variants for the 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	string	"-50px"	Margin for triggering the in-view animation
blur	string	"6px"	Amount of blur to apply during the animation

Original:

magicui.design/docs/components/blur-fade