build69
Sign inGet API key
build69  /  Components  /  Motion — Transitions & Decorative  /  Zoom

Zoom

v1.0.1Updated 21 Jul 2026

Scales its child from 0 to full size while fading it in — the most assertive of the transition wrappers, built to pull the eye. Use it where the appearance itself is the message, such as a success tick or a badge landing on a card. For a calmer in-place entrance reach for Grow, which only scales from 0.95.

View source← Back to catalog

Preview

Live · 3 stories
Zoom DemoOpen ↗
▸Why this is recommendedzoomtransitionanimationscale+4

Zoom — demo.

Recommended for+14
  • ✓Popping a success checkmark in after a form submits
  • ✓Landing a count or status badge onto a card
  • ✓Emphasising a newly added item in a list
  • ✓Revealing an avatar or icon with a playful entrance
Tags+6
zoomtransitionanimationscalemotionmuiemphasisdemo
Features+4
  • Scale 0 -> 1 with an opacity fade
  • Configurable duration / delay / easing per instance
  • unmountOnExit removes the child from the DOM after exit
  • Respects prefers-reduced-motion (snaps, no animation)
  • data-state attribute for debugging
  • Zero dependencies beyond React
Not recommended for−2
  • ✕Subtle or frequent UI changes (use Fade or Grow)
  • ✕Large content blocks, where a full 0 -> 1 scale feels jarring
  • ✕Page-level route transitions

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Zoom" })

Usage

import { Zoom } from '@/components/motion/transitions/zoom';

<Zoom in={saved} duration={300}>
  <CheckCircle className="size-8 text-success" />
</Zoom>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
in

Whether the child is shown; drives the transition

booleanyes
duration

Duration in ms. Default 200

number—
delay

Delay in ms before the transition starts. Default 0

number—
easing

Timing function. Default 'ease-out'

'ease' | 'ease-out' | 'ease-in' | 'linear'—
unmountOnExit

Remove the child from the DOM after exit. Default false

boolean—
className

Extra classes merged onto the wrapper element

string—
style

Extra inline styles; transition-driven properties take precedence

React.CSSProperties—
ref

Ref to the wrapper element (React 19 ref-as-prop)

React.Ref<HTMLDivElement>—
children

Content to zoom

React.ReactNodeyes

Related

Platform docsAll componentsSource files