Bottom Wiggle Notification
A Framer Motion toast that slides up from the bottom-right corner and wiggles to re-attract attention when the user repeats an action.
BottomWiggleNotification is a controlled, animated toast built with Framer Motion. It slides up from below the viewport on first appearance and executes a horizontal wiggle whenever triggerWiggle is incremented — useful for nudging the user when they attempt an action that has already been acknowledged. An optional dismiss button can be surfaced by passing onDismiss.
Installation
npx shadcn@latest add @adv/bottom-wiggle-notificationUsage
import { BottomWiggleNotification } from '@/components/ui/BottomWiggleNotification';
function MyPage() {
const [show, setShow] = useState(false);
const [wiggle, setWiggle] = useState(0);
const handleAction = () => {
if (show) {
// Already visible — wiggle to re-attract attention
setWiggle((n) => n + 1);
} else {
setShow(true);
}
};
return (
<>
<button onClick={handleAction}>Add to cart</button>
<BottomWiggleNotification
message="Item already in your cart"
isVisible={show}
triggerWiggle={wiggle}
onDismiss={() => setShow(false)}
/>
</>
);
}Example
Click once to show; click again to wiggle. The toast appears fixed at the bottom-right of the viewport.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
message | string | — | Required. Text content shown inside the notification. |
isVisible | boolean | — | Required. Controls whether the notification is mounted and visible. |
triggerWiggle | number | — | Required. Increment this value to play the wiggle animation while the notification is visible. |
onDismiss | () => void | undefined | When provided, renders a "Dismiss" button that calls this handler on click. |