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.

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.