Shake

Single-shot shake — decaying x/y oscillation that settles back to centre. Trigger via ref or by changing the trigger prop. Use it for form validation errors, "wrong password" feedback, "card declined" states. GSAP-backed.

Reactive trigger — submit empty to shake the field

Usage

import { Shake, ShakeHandle } from '@bwo-ui/react';

// Imperative
const ref = useRef<ShakeHandle>(null);

<Shake ref={ref}>
  <Card />
</Shake>

<Button onClick={() => ref.current?.shake()}>Try again</Button>

// Reactive — bump the trigger value to fire
<Shake trigger={errorAttempt} intensity={6} axis="x">
  <PinInput />
</Shake>

Props

Prop	Type	Default	Description
`axis`	`'x' \| 'y'`	`'x'`	Shake axis.
`duration`	`number`	`0.5`	Total shake duration in seconds.
`cycles`	`number`	`6`	Number of full oscillations.
`intensity`	`number`	`8`	Max displacement in pixels.
`ease`	`string`	`'power1.out'`	GSAP ease.
`trigger`	`unknown`	—	When this value changes, fires the shake.
`onComplete`	`() => void`	—	Fires when the shake settles.
`as`	`ElementType`	`'div'`	Tag to render.