BlurFade

Progressively unveils content with a blur-out + fade-in animation when it enters the viewport. Stagger sections by passing a delay.

Installation

dotnet add package Lumeo.Motion

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

@using Lumeo

<BlurFade />

Animate hero sections, feature cards, or media into view as the user scrolls.
Stagger related elements by incrementing DelayMs across siblings for a cascade effect.
Use Once="false" to re-animate elements every time they re-enter the viewport.

Staggered Cards

First

Second

Third

Custom Blur & Duration

Heavy blur, slow fade — great for modal-like reveals.

Subtle blur, fast fade — good for inline content updates.

Repeat on Re-entry (Once=false)

Animates every time it enters the viewport

Interactive: Delay & Blur Amount

DelayMs: 200 ms

BlurAmount: 8 px

Hello, Lumeo!

BlurFade in action

Adjust delay and blur amount, then hit Replay to re-trigger the animation.

Property	Type	Default	Description
DelayMs	int	0	Delay before the animation starts after the element enters the viewport.
DurationMs	int	600	CSS transition duration in milliseconds.
BlurPx	int	8	Starting blur radius in pixels. Animates to 0 on entry.
Yoffset	int	8	Initial Y translate in pixels. Element slides up as it fades in.
Once	bool	true	When true, only animates on first viewport entry. Set to false to re-animate on each entry.
ForceHidden	bool	false	Always start in the hidden state, even if the element is already in viewport at mount. Default is prerender-friendly: above-the-fold content stays statically visible. Set to true for docs demos and Replay buttons that must always animate.
ChildContent	RenderFragment?	null	The content to animate in. Wrapped in a positioned div that receives the transition.
Class	string?	null	Additional CSS classes merged onto the root element.

BorderBeam — Animated gradient border beam that highlights premium or featured cards.
Sparkles — Decorative sparkle particle animation for badges and headings.
Motion — Overview of all motion primitives in Lumeo.