Reveal animation
Also called wipe animation, clip-path reveal, or mask reveal
An entrance where a moving edge uncovers an element, as if a curtain slides away, usually built with an animated clip-path.
import { motion, useReducedMotion } from 'motion/react';
// Use the same inset() shape at both ends so the browser can blend them.
const HIDDEN = 'inset(0 100% 0 0)';
const SHOWN = 'inset(0 0% 0 0)';
const WIPE = { duration: 0.9, ease: [0.77, 0, 0.175, 1] } as const;
export function HeroReveal() {
const reduceMotion = useReducedMotion();
const from = reduceMotion ? { opacity: 0 } : { clipPath: HIDDEN };
const to = reduceMotion ? { opacity: 1 } : { clipPath: SHOWN };
return (
<section className='mx-auto flex max-w-3xl flex-col gap-6 px-6 py-20'>
<motion.img
src='/images/launch-hero.jpg'
alt='A team reviewing a launch plan on a laptop'
initial={from}
animate={to}
transition={WIPE}
className='aspect-video w-full rounded-2xl object-cover'
/>
<motion.h1
initial={from}
animate={to}
transition={{ ...WIPE, delay: 0.15 }}
className='text-4xl font-semibold tracking-tight text-foreground'
>
Launch day, without the scramble
</motion.h1>
</section>
);
}Reveal the hero image on load with a wipe from left to right: animate clip-path from inset(0 100% 0 0) to inset(0 0 0 0) over 900ms with cubic-bezier(0.77, 0, 0.175, 1), then reveal the headline the same way 150ms later. When prefers-reduced-motion is set, fade both in instead.
Paste into Layerwise or any AI coding tool.
What is Reveal animation?
A reveal keeps the element still and changes how much of it shows. A clipping shape grows from one edge, from the center, or as a circle until the whole element is visible, so it looks wiped onto the screen.
Designers use reveals for editorial headlines, hero images, and section openings on portfolios and product launches. Text reveals often place each line inside a box with overflow: hidden and slide the line up into view.
In CSS, animate clip-path with inset() or circle(). The browser can blend two shapes of the same kind, so use the same function at the start and the end. Because the layout never changes, a clip-path reveal is cheaper than animating width or height.
Often confused with
- Scroll reveal
- A scroll reveal is any entrance that plays when an element scrolls into view, often a fade or slide. A reveal animation is the wipe itself, whatever triggers it.
Related terms
All termsClip-path
A CSS property that cuts an element to a shape, such as a circle, an inset rectangle, or a polygon, and hides everything outside it.
Mask
A CSS technique that uses an image or gradient to set how visible each part of an element is, often used to fade edges softly.
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.
Hero section
The large first section at the top of a landing page, with a headline, a short subhead, a call to action, and a visual.
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.
