Preset

zoomIn

Scales up from slightly smaller than rest until it settles at full size, animating scale and nothing else.

Scale only

Settles up from 0.94 to 1.

Scale is the only property zoomIn animates: the card grows into its resting size on the shared ease curve, and nothing else on it changes.

Usage

import { Section } from "@/lib/motion";
import { zoomIn } from "@/lib/motion/presets/zoom-in";

export function Features() {
  return (
    <Section {...zoomIn} className="grid gap-6 md:grid-cols-3">
      <FeatureCard title="Copy, do not install" />
      <FeatureCard title="One file you own" />
      <FeatureCard title="No wrappers" />
    </Section>
  );
}

Installation

npx shadcn@latest add https://motion.asmitsah.dev/r/zoom-in.json

Props and tokens

What it sets

Property	Initial	In view	Reduced motion	Reads from config.ts
scale	0.94	1	Instant	zoom.in → rest.scale

Transition and viewport

Option	Value	Reads from config.ts
duration	0.55	duration.base
ease	[0.16,1,0.3,1]	ease
viewport.once	true	viewport
viewport.amount	"some"	viewport
viewport.margin	"0px 0px -12% 0px"	viewport

Every motion prop the preset does not set — whileHover, whileTap, whileFocus — stays available at the call site. Write it after the spread and it wins.

layout and drag need the domMax feature bundle, not domAnimation — swap the lazy import in provider.tsx. It adds roughly 13kb gzipped on top of domAnimation.