Escape Button
betaA novelty button that scoots away from an approaching mouse, then gives up after a few escapes.
- Effects & motion
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add escape-buttonnpm packages installed: class-variance-authority.
import { EscapeButton } from "@/components/ui/escape-button";Default
Gallery
<EscapeButton>
| Prop | Type | Default |
|---|---|---|
caughtLabelThe label once it has given up. | ReactNode | "Fine." |
patienceEscapes before it gives up and stays put. | number | 4 |
radiusHow close, in pixels, the pointer gets before it flees. | number | 120 |
resetAfterMilliseconds the pressed state shows before the game resets. | number | 600 |
skittishnessFlee strength, 0–100. 0 turns the game off. | number | 55 |
stroke | boolean | — |
The dodging is a mouse-and-pen game only: it never moves for touch, a coarse pointer, reduced motion, or while the button has focus, so keyboard users can Tab to it and press it at once. It gives up after `patience` escapes (4 by default) and stays put, and a press always goes through in every state — the movement is visual, never a lock. It is a real button with its visible label as its name.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes