Blur Fade

Reveal content with a soft blur and fade, on mount or when scrolled into view.

Dependenciesmotion

Introducing

Balick UI

Components that feel as good as they look.

Installation#

pnpm dlx shadcn@latest add https://ui.balick.me/r/blur-fade.json

Or, with the namespace configured: @balick/blur-fade

Usage#

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

export function Hero() {
  return (
    <BlurFade delay={0.2} inView>
      <h1>Hello world</h1>
    </BlurFade>
  )
}

Props#

Prop	Type	Default	Description
`duration` Animation duration in seconds.	`number`	0.4	Animation duration in seconds.
`delay` Delay before the animation starts, in seconds.	`number`	0	Delay before the animation starts, in seconds.
`offset` Distance travelled by the element, in pixels.	`number`	8	Distance travelled by the element, in pixels.
`direction` Direction the element comes from.	`"up" \| "down" \| "left" \| "right"`	"down"	Direction the element comes from.
`blur` Amount of blur at the start of the animation.	`string`	"6px"	Amount of blur at the start of the animation.
`inView` Wait until the element scrolls into view before animating.	`boolean`	false	Wait until the element scrolls into view before animating.
`inViewMargin` Margin applied to the viewport when inView is set.	`string`	"-50px"	Margin applied to the viewport when inView is set.