Blur Fade

A smooth blur and slide fade-in animation triggered on load or scroll entry.

Preview

Blur Fade-in

Smooth animations powered by CSS filters and motion triggers.

Installation

pnpm dlx vibe-ui-kit@latest add blur-fade

Staggered Text Reveal

The

premium

motion

system

for

React

developers

Staggered Features Grid

Fast Delivery

Global edge CDN rendering for sub-millisecond response speeds.

Scale-Ready

Autoscaling compute groups that dynamically resize with traffic.

Secure Routing

Automatic SSL/TLS encryption with zero configuration required.

Analytics Engine

Real-time user insights and trend visualization out-of-the-box.

Flexible Database

Edge-replicated data queries mapped directly to region origins.

Edge CPU Nodes

Run arbitrary logic frames close to your client locations.

Usage

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

<BlurFade delay={0.25} inView>
  <h2 className="text-3xl font-bold">Hello World</h2>
</BlurFade>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	`""`	Child elements wrapped inside blur fade animation wrapper
`duration`	`number`	`0.4`	Animation duration in seconds
`delay`	`number`	`0`	Delay before starting animation in seconds
`offset`	`number`	`6`	Distance offset in pixels for translation direction
`direction`	`"up" \| "down" \| "left" \| "right"`	`"down"`	Direction from which element slides in while unblurring
`blur`	`string`	`"6px"`	Initial CSS blur filter strength
`className`	`string?`	`""`	Additional classes for the container

This BlurFade component smoothly fades, unblurs, and translates content into view.

Contributors

Jenish Sabhadiya