Continuity transition
Also called container transform or visual continuity
A transition where one element keeps its identity as it changes role, like an “Add to cart” button that becomes a progress bar, then a checkmark.
import { useState } from 'react';
import { motion } from 'motion/react';
// One button, three shapes. Size and corner radius spring between them.
const SHAPE = {
idle: { width: 180, height: 48, borderRadius: 24 },
loading: { width: 180, height: 8, borderRadius: 4 },
done: { width: 48, height: 48, borderRadius: 24 }
};
const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
export function AddToCartButton() {
const [stage, setStage] = useState<keyof typeof SHAPE>('idle');
const [added, setAdded] = useState(false);
async function add() {
setStage('loading');
await wait(1000); // Stand-in for the cart request.
setAdded(true);
setStage('done');
await wait(1200);
setStage('idle');
}
return (
// A fixed-height slot, so the page doesn't shift while the button changes shape.
<div className='grid h-12 place-items-center'>
<motion.button
type='button'
onClick={add}
disabled={stage !== 'idle'}
initial={false}
animate={SHAPE[stage]}
transition={{ type: 'spring', bounce: 0.2, duration: 0.4 }}
className={`relative overflow-hidden text-sm font-medium text-white transition-colors ${stage === 'done' ? 'bg-emerald-500' : 'bg-blue-600'}`}
>
{stage === 'idle' && (added ? 'Added to cart' : 'Add to cart')}
{stage === 'loading' && (
<motion.span
role='progressbar'
aria-label='Adding to cart'
initial={{ scaleX: 0 }}
animate={{ scaleX: 1 }}
transition={{ duration: 1, ease: 'linear' }}
className='absolute inset-0 origin-left bg-white/70'
/>
)}
{stage === 'done' && '✓'}
</motion.button>
{/* Screen readers don't describe the shape change, so announce the result. */}
<p aria-live='polite' className='sr-only'>
{stage === 'done' ? 'Added to cart' : ''}
</p>
</div>
);
}Turn the “Add to cart” button into a continuity transition: on click, shrink it in place into an 8px-tall progress bar that fills over about 1 second, then morph it into a green 48px circle with a checkmark, hold for 1.2 seconds, and expand it back into a button that says “Added to cart”. Animate size and corner radius with a 400ms spring, announce “Added to cart” in an aria-live region, and disable the button while it works.
Paste into Layerwise or any AI coding tool.
What is Continuity transition?
A continuity transition keeps a single element on screen through a whole sequence of changes. The button you pressed stays where your eyes already are and turns into the loading state, then into the result. Nothing disappears and nothing new pops up somewhere else, so people never have to search for what happened.
Use it for actions with a few clear stages: Add to cart, Send, Pay, Upload, Follow. Material Design calls a related pattern a container transform, where a card or floating button expands into the screen it opens.
Make each stage readable on its own: the label, the progress, and the confirmation. Keep the element in the same position, change its size only as much as each stage needs, and leave the result up for a second or so before resetting. Announce the outcome in an aria-live region, because screen readers do not describe the shape change.
Often confused with
- Morph
- A morph is a single shape change. A continuity transition chains several, keeping one element on screen across the stages of a task.
Related terms
All termsMorph
A transition where one shape smoothly changes its size, corners, and contents into another, like a small pill growing into a full card.
Loading state
The view a screen shows while its data is on the way, designed together with the outcomes that follow: loaded, empty, or error.
Micro-interaction
A small moment of feedback around a single action, like a heart that bursts when tapped or a copy icon that turns into a checkmark.
Optimistic UI
A pattern where the interface shows the result of an action right away, before the server confirms it, and rolls it back if the request fails.
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.
