Blur in
Also called blur-in animation, blur reveal, or blur fade
An entrance animation where text or an image starts blurred and transparent, then sharpens into focus as it appears.
import { Fragment } from 'react';
import { motion, stagger, useReducedMotion, type Variants } from 'motion/react';
const headline = 'Turn one sentence into a working app';
const sentence: Variants = {
hidden: {},
visible: { transition: { delayChildren: stagger(0.08) } }
};
const word: Variants = {
hidden: { opacity: 0, filter: 'blur(10px)' },
visible: {
opacity: 1,
filter: 'blur(0px)',
transition: { duration: 0.6, ease: 'easeOut' }
}
};
export function BlurInHeadline() {
const reduceMotion = useReducedMotion();
return (
<motion.h1
variants={sentence}
// Starting at "visible" shows the headline right away.
initial={reduceMotion ? 'visible' : 'hidden'}
animate='visible'
className='max-w-2xl text-5xl font-semibold tracking-tight text-foreground'
>
{headline.split(' ').map((text, index) => (
<Fragment key={index}>
{index > 0 && ' '}
<motion.span variants={word} className='inline-block'>
{text}
</motion.span>
</Fragment>
))}
</motion.h1>
);
}Make the hero headline blur in word by word: each word starts at blur(10px) and opacity 0, then animates to blur(0) and opacity 1 over 600ms with ease-out, staggered by 80ms. When prefers-reduced-motion is set, show the headline right away.
Paste into Layerwise or any AI coding tool.
What is Blur in?
A blur in animates filter: blur() from a few pixels down to 0 while opacity goes from 0 to 1. The content looks like it is coming into focus, which feels softer and more cinematic than a plain fade.
It is popular for hero headlines, where each word blurs in one after another, and for images and cards on landing pages. Keep the starting blur modest, around 8 to 12px for text. Very large values make the first frames look like a gray smudge.
Blur costs more to render than opacity or transform, especially over large areas and on phones. Animate a few elements at a time, keep it to 400 to 800ms, and show the content without the blur for people who prefer reduced motion.
Often confused with
- Blur
- Blur on its own is a static effect, such as a frosted panel or a soft background. A blur in animates the blur away as an entrance.
Related terms
All termsFade in
An entrance animation where an element goes from fully transparent to fully visible, so it appears gently instead of popping in.
Split text animation
A text animation that breaks a heading into characters, words, or lines and animates each piece in turn, so the text arrives as a wave.
Stagger
Animating a group of items one after another with a small delay between each, so they arrive as a cascade.
GPU acceleration
A browser technique where the graphics chip moves, fades, or scales an element on its own layer instead of redrawing the page every frame.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.