Clip-path
Also called CSS clip-path or clipping 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.
import { motion, useReducedMotion } from 'motion/react';
// Both states use circle(), so the browser can interpolate between them.
// At 75% the circle reaches past the image's corners.
const clip = {
hidden: { clipPath: 'circle(0% at 50% 50%)' },
shown: { clipPath: 'circle(75% at 50% 50%)' }
};
export function HeroImageReveal() {
const reduceMotion = useReducedMotion();
return (
// Watch the unclipped wrapper: a fully clipped image never counts as in view.
<motion.div
initial={reduceMotion ? false : 'hidden'}
whileInView={reduceMotion ? undefined : 'shown'}
viewport={{ once: true, amount: 0.4 }}
>
<motion.img
src='/hero/coastline.jpg'
alt='Aerial view of a rocky coastline'
variants={clip}
transition={{ duration: 0.7, ease: [0.23, 1, 0.32, 1] }}
className='aspect-video w-full rounded-3xl object-cover'
/>
</motion.div>
);
}Reveal the hero image with a circular clip-path that grows from circle(0% at 50% 50%) to circle(75% at 50% 50%) over 700ms with cubic-bezier(0.23, 1, 0.32, 1) when it scrolls into view. Show the image without animation when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Clip-path?
clip-path draws an invisible outline and shows only the part of the element inside it. The basic shapes are circle(), ellipse(), inset() for a rectangle with optional rounded corners, and polygon() for any straight-edged shape. The element keeps its full size in the layout; only the visible part changes.
It is a favorite for reveal animations, because browsers animate clip-path smoothly: grow a circle() from 0% to reveal a photo, or shrink an inset() to wipe content in. Avatars, hexagon badges, angled hero sections, and diagonal image crops are common static uses.
Two shapes animate smoothly only when they use the same function, and polygons need the same number of points in both states. Everything outside the clip is cut off, including box shadows, and it stops receiving clicks. For a shadow, wrap the element and put filter: drop-shadow() on the wrapper.
Often confused with
Related terms
All termsMask
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.
Reveal animation
An entrance where a moving edge uncovers an element, as if a curtain slides away, usually built with an animated clip-path.
Before/after slider
A comparison control that stacks two versions of an image and lets people drag a divider to reveal more of one or the other.
Morph
A transition where one shape smoothly changes its size, corners, and contents into another, like a small pill growing into a full card.
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.
