🎭 Motion Components

Wrapper компоненти що додають анімаційні ефекти до будь-якого контенту.

🌪️ Shaker

Компонент що тремтить при взаємодії. 4 інтенсивності, різні тригери.

Hover Trigger

Click Trigger

Клікни мене

Auto Trigger

Auto shake

Manual

Інтенсивність:

Low
Medium
High
Extreme

⬆️ Bouncer

Компонент що стрибає. 3 висоти, різні тригери.

Hover

Click

Click bounce

Auto

Auto bounce

Continuous

Always bounce

🔄 SpinnerBox

Компонент що обертається. Контроль швидкості та напрямку.

Hover Trigger

Clockwise
Counter

Continuous

🎯
⚡

💫 Pulser

Компонент з пульсацією (opacity + scale). Безкінечна анімація.

Subtle

Тихо пульсує

Normal

Нормально

Strong

Сильно пульсує

Usage Examples

Shaker

<Shaker trigger="hover" intensity="medium">
  <Button>Shake on hover</Button>
</Shaker>

Bouncer

<Bouncer trigger="click" height="high">
  <Card>Bounce on click</Card>
</Bouncer>

SpinnerBox

<SpinnerBox trigger="continuous" speed="fast" direction="clockwise">
  <div>🎯</div>
</SpinnerBox>

Pulser

<Pulser intensity="strong" speed="normal">
  <Badge>Always pulsing</Badge>
</Pulser>