Motion Effect

Motion effect component that displays the motion effect (fade in, slide in, etc.).

Preview

Code

Open in

Installation

CLI

Manual

Usage

<MotionEffect slide>
  <p>Motion Effect</p>
</MotionEffect>

Examples

Slide

Preview

Code

Open in

Motion Effect Slide

Fade Blur

Preview

Code

Open in

Motion Effect Fade Blur

Props

Prop	Type	Default
zoom?	boolean | { initialScale?: number; scale?: number }	false
fade?	boolean | { initialOpacity?: number; opacity?: number }	false
slide?	boolean | { direction?: 'up' | 'down' | 'left' | 'right'; offset?: number }	false
blur?	boolean | string	false
delay?	number	0
inViewOnce?	boolean	true
inViewMargin?	string	0px
inView?	boolean	false
transition?	Transition	{ type: 'spring', stiffness: 200, damping: 20 }
className?	string	-
children	React.ReactNode	-

Credits

• Credits to Magic UI for the inspiration