Scale
Also called scale transform, scaleX, or scaleY
A CSS transform that draws an element larger or smaller around its transform origin, without pushing neighboring elements.
import { motion } from 'motion/react';
// A press is felt more than seen, so stay close to 1.
const PRESSED_SCALE = 0.97;
export function PlanCard() {
return (
<article className='w-72 rounded-2xl border bg-background p-6 shadow-sm transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] hover:scale-103'>
<h3 className='font-semibold'>Pro</h3>
<p className='mt-1 text-sm text-muted-foreground'>
Unlimited projects, custom domains, and priority builds.
</p>
{/* whileTap also fires while Enter is held on the focused button. */}
<motion.button
type='button'
whileTap={{ scale: PRESSED_SCALE }}
transition={{ duration: 0.1, ease: 'easeOut' }}
className='mt-6 w-full rounded-full bg-primary px-4 py-2 text-sm font-medium text-primary-foreground'
>
Upgrade to Pro
</motion.button>
</article>
);
}Give every button press feedback: scale it to 0.97 while it is pressed with a 100ms ease-out transform transition, and return to 1 on release. Use transform: scale() so surrounding layout never shifts, and make sure keyboard activation with Enter or Space shows the same pressed state.
Paste into Layerwise or any AI coding tool.
What is Scale?
transform: scale(1.1) draws an element 10% larger and scale(0.5) draws it at half size. scaleX() and scaleY() stretch one axis at a time. Everything inside grows with it, including text, borders, and shadows, and it grows from the transform origin, which is the center unless you change it.
The layout box keeps its original size, so neighbors stay put and a scaled-up element can overlap them. That makes scale ideal for small, quick feedback: a button shrinking to 0.97 while pressed, a card growing to 1.03 on hover, or a menu popping in from 0.95.
Avoid scaling from 0: elements that grow out of nothing feel abrupt, so start at 0.9 to 0.95 and add a fade. Large scale-ups of text can look slightly soft mid-animation, and animating width or height instead forces layout work on every frame.
Often confused with
- Scale in
- Scale-in is an entrance animation that grows an element into view. Scale is the transform it uses, and it works for any size change.
Related terms
All termsTransform origin
The point an element rotates and scales around. It defaults to the center, and moving it changes where a transform seems to start.
Press feedback
A quick visual response, usually a slight shrink, that shows a button registered the press the moment a finger or mouse button goes down.
Scale in
An entrance animation where an element grows from slightly smaller than its final size to full size while it fades in.
Translate
A CSS transform that moves an element along the x or y axis while the layout around it stays exactly where it was.
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.