# BlurFade

Source: https://lumeo.nativ.sh/components/blur-fade

# BlurFade

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

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo.Motion

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<BlurFade />

## When to Use

-   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.

Preview Code

Staggered Cards

First

Second

Third

Preview Code

Custom Blur & Duration

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

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

Preview Code

Repeat on Re-entry (Once=false)

Animates every time it enters the viewport

Preview Code

Interactive: Delay & Blur Amount

DelayMs: 200 ms

BlurAmount: 8 px

Replay

Hello, Lumeo!

BlurFade in action

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

## API Reference

### BlurFade

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.

## Related Components

-   [BorderBeam](/components/border-beam) — Animated gradient border beam that highlights premium or featured cards.
-   [Sparkles](/components/sparkles) — Decorative sparkle particle animation for badges and headings.
-   [Motion](/components/motion) — Overview of all motion primitives in Lumeo.