AnimateIn

Animate any content on mount with fade + slide/scale entrance.

Import

import { AnimateIn, Stagger } from "neoterm-ui";

AnimateIn

<AnimateIn direction="up" delay={0.1}>
  <Card>Slides up on mount</Card>
</AnimateIn>

<AnimateIn direction="scale" duration={0.4}>
  <Badge>Scales in</Badge>
</AnimateIn>

AnimateIn Props

Prop	Type	Default	Description
direction	"up" \| "down" \| "left" \| "right" \| "scale"	"up"	Entrance direction.
delay	number	0	Delay in seconds.
duration	number	0.3	Duration in seconds.
as	ElementType	"div"	Wrapper element type.
children	ReactNode	—	Content to animate.

Stagger

<Stagger stagger={0.05} direction="up">
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
</Stagger>

Stagger Props

Prop	Type	Default	Description
stagger	number	0.05	Delay between each child (seconds).
direction	"up" \| "down" \| "left" \| "right" \| "scale"	"up"	Entrance direction.
duration	number	0.3	Duration per item.
children	ReactNode	—	Items to stagger.