Coy Key
Web (React)
A dashed mono key that edges away from the cursor until it relents.
Coy Key backs away from an approaching pointer inside its field, swapping its mono caption with every near miss, then gives in after a set patience. Ink and contrast follow the Modus theme.
Installation
CLI
npx @modus-ui/cli add coy-keyManual
- Copy the code from the component tab.
- Create a file at
components/ui/coy-key.tsx. - Paste the code.
Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | any | - | Key label, or a render function receiving the dodge state. |
| taunts | any | ["Reach for it", "Not quite", "Closer", "Patience", "Fine, yours"] | Labels shown in turn as the key dodges. |
| notice | string | "" | Caption shown beneath the field. |
| inkColor | string | "hsl(var(--foreground))" | Key fill colour. |
| contrastColor | string | "hsl(var(--background))" | Key text colour. |
| fieldHeight | number | 240 | Height of the play field in pixels. |
| reach | number | 72 | Distance the key flees per dodge, in pixels. |
| radius | number | 120 | Pointer distance at which the key starts fleeing. |
| falloff | number | 2 | How sharply the flee strength drops with distance. |
| fleeDuration | number | 130 | Duration of a dodge in milliseconds. |
| returnDuration | number | 620 | Duration of the return to rest in milliseconds. |
| returnBounce | number | 0.1 | Spring bounce on the return to rest. |
| axis | string | "both" | Axes the key may move along: "x", "y" or "both". |
| wall | string | "clamp" | Edge behaviour: "clamp" stops at the edge, "bounce" rebounds. |
| patience | number | 4 | Dodges before the key gives in and can be caught. |
| disabled | boolean | false | Disables dodging and clicks. |
| onDodge | any | - | Called with the dodge count after each dodge. |
| onRelent | any | - | Called when the key gives in. |
| onCatch | any | - | Called when the key is clicked. |
| style | any | - | Inline styles for the root. |
Comments