animations

ScaleIn

Animates children with a scale + fade entrance on mount or viewport entry.

v1.0.0react >=18next >=14tailwind >=4motion >=12

entrancescrollscalezoomrevealgrow

Preview

Loading preview...

Props

Prop	Type	Default	Description
`children*`	`ReactNode`	`—`	Content to animate
`preset`	`MotionPresetName`	`scaleIn`	Motion preset from the token system
`scale`	`number`	`0.92`	Initial scale value before animation (0-1)
`delay`	`number`	`—`	Custom delay in milliseconds
`triggerOnView`	`boolean`	`true`	Animate when element enters viewport
`viewThreshold`	`number`	`0.2`	Fraction of element visible before triggering
`once`	`boolean`	`true`	Only animate once
`className`	`string`	`—`	Additional Tailwind classes

Slots

Slot	Type	Required	Description
`children`	`ReactNode`	Yes	Content to scale in

Layout

Display: block

Responsive: No

Wraps children in an animated div with scale + opacity transition.

Examples

Basic usage

<ScaleIn>
  <div className="rounded-xl bg-neutral-900 p-8">Scales into view</div>
</ScaleIn>

Pop-in effect

<ScaleIn preset="popIn" scale={0.8}>
  <button className="px-6 py-3 bg-accent text-white">Click me</button>
</ScaleIn>

Staggered cards

<StaggerGroup stagger="normal">
  <ScaleIn><Card title="Plan A" /></ScaleIn>
  <ScaleIn><Card title="Plan B" /></ScaleIn>
  <ScaleIn><Card title="Plan C" /></ScaleIn>
</StaggerGroup>

AI Usage Hint

Use ScaleIn for elements that should grow into view — buttons, cards, images, modals. Use preset='popIn' for a bouncier entrance with spring physics. The 'scale' prop controls initial size (0.92 = subtle grow, 0.5 = dramatic zoom). Combine with StaggerGroup for cascading card entrances.

Works Well With

StaggerGroupFadeUp