Transitions

Composable animation helpers — Fade, Slide, Zoom, Collapse. Wrap any element to add entrance/exit animations.

import{ Fade, Slide, Zoom, Collapse } from "@pepulux/ui"

Fade

Fading content

Slide

Sliding content

Zoom

Zooming content

Collapse

Collapsing content — height animates smoothly

Props

PropTypeDefaultDescription
in*boolean—When true, enters; when false, exits
timeoutnumber200Animation duration in ms
unmountOnExitbooleanfalseRemove from DOM after exit animation
children*ReactNode—Content to animate
Application component → Motionwww.pepulux.com

Notes and documentation

Space for notes, documentation, and best practices for using these components.

Motion with purpose

Use short transitions (150–250ms) to explain a change of state. Respect the reduced-motion preference.