Fade in
Also called fade-in animation or opacity transition
An entrance animation where an element goes from fully transparent to fully visible, so it appears gently instead of popping in.
import { motion, useReducedMotion } from 'motion/react';
// A small rise gives the fade a direction.
const RISE = 8;
export function HeroSection() {
const reduceMotion = useReducedMotion();
return (
<motion.section
// Reduced motion keeps the fade and drops the rise.
initial={{ opacity: 0, y: reduceMotion ? 0 : RISE }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, ease: 'easeOut' }}
className='mx-auto flex max-w-2xl flex-col items-center gap-4 px-6 py-24 text-center'
>
<h1 className='text-4xl font-semibold tracking-tight text-foreground'>
Ship your idea this weekend
</h1>
<p className='text-lg text-muted-foreground'>
Describe the app you want and watch it come together in a live preview.
</p>
<a
href='/signup'
className='rounded-full bg-primary px-6 py-3 text-sm font-medium text-primary-foreground'
>
Start building
</a>
</motion.section>
);
}Fade in the hero section on page load: animate opacity from 0 to 1 over 400ms with an ease-out curve and add an 8px upward rise. When prefers-reduced-motion is set, keep the fade and remove the rise.
Paste into Layerwise or any AI coding tool.
What is Fade in?
A fade in animates opacity from 0 to 1. Nothing moves, so the eye reads it as calm: the element was not there, and now it is. It is the simplest entrance, and most other entrances build on it.
Use it for content that appears in place: images after they load, tooltips, the dimmed backdrop behind a modal, text that swaps in. Keep it short, around 150 to 300ms for small UI and up to 500ms for large sections, with an ease-out curve.
A pure fade can feel flat on large blocks. Adding a small rise of 8 to 16px gives the eye a direction. Fades are usually comfortable for people who prefer reduced motion, so a common pattern is to keep the fade and remove the movement when prefers-reduced-motion is set.
Often confused with
- Crossfade
- A crossfade fades one element out while another fades in at the same spot. A fade in brings in a single element.
Related terms
All termsSlide in
An entrance animation where an element moves into place from one side, often while fading in, so people see where it came from.
Blur in
An entrance animation where text or an image starts blurred and transparent, then sharpens into focus as it appears.
Stagger
Animating a group of items one after another with a small delay between each, so they arrive as a cascade.
Reduced motion
An operating system setting that asks apps to minimize movement, which websites detect with the prefers-reduced-motion media query.
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.