design-infraReport a problem or share feedback← Catalog
Blur Fade
curatedtheme-awarefreemagicui/blur-fade
Blur fade in and out animation. Used to smoothly fade in and out content.
$
npx shadcn@latest add @magicui/blur-fadenpm deps: motion
Our notes
Blur + fade-in on mount or in view; the go-to entrance wrapper for sections and image grids (stagger with `delay`). Colourless. Respect prefers-reduced-motion yourself.- Source
- Magic UI
- Kind
- component
- Categories
- transition
- Use as
- wrapper — wraps your existing element
- Applies to
- text-effectherocardimagefeatures
- Motion
- on enter · subtle · motion · medium cost · ignores reduced motion
- Tags
- motion
- Licence
- MIT (magicuidesign/magicui). Magic UI Pro templates are a separate paid product — not catalogued.
- Live demo
- magicui.design
- Docs
- magicui.design
Similar
Compare all 4 →- In Viewmotion-primitives/in-viewAnimate children when they enter the viewport — thin, reusable wrapper. Colourless.
- Animated Contentreact-bits/animated-contentWrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options.
- Fade Contentreact-bits/fade-contentSimple directional fade / slide entrance / exit wrapper with threshold-based activation.