Blur Fade

Blur and fade entrance animations.

PreviousTyping Animation

NextBox Reveal

On This Page

Quick ActionsProject StudioNew Nexore Make (AI)Source on GitHub

Blur Fade

Blur and fade entrance animations.

Blur Fade

Animates children with a smooth spring blur and fade transition as they enter viewport.

Interactive Playground

Live CanvasInteractive

Animate Me!

Controls(5)

delay

number

Animation delay in seconds

duration

number

Animation duration in seconds

yOffset

number

Y-axis offset translation at start

blur

text

Starting CSS blur filter amount

once

boolean

Toggle state:

Trigger the viewport animation only once

Generated JSX

Source

import { BlurFade } from "nexoreui"

<BlurFade />

Default Blur Fade

Hello Beautiful World

component.tsx

Slow Motion Entrance

Slow Smooth Entry

component.tsx

Large Offset Animation

High Rise Entrance (yOffset = 40)

component.tsx

Heavy Starting Blur

Heavy Starting Blur (blur = 16px)

component.tsx

Staggered Card Grid

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

component.tsx

API Reference

Property	Type	Default	Description
children	ReactNode	-	The elements to animate.
delay	number	0	Time delay before trigger starts (in seconds).
duration	number	0.4	Time duration of transition (in seconds).
yOffset	number	6	Distance in pixels the element translates from on Y-axis.
blur	string	"4px"	Starting CSS blur amount (e.g. "8px").
inView	boolean	true	Whether to trigger animation when the element is visible on screen.
once	boolean	true	Trigger the transition once only upon viewport entry.
margin	string	"-50px"	Intersection Observer offset threshold margin.

PreviousTyping Animation

NextBox Reveal

On This Page

Quick ActionsProject StudioNew Nexore Make (AI)Source on GitHub