Modus UI

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.

Modus / Coy Key

Installation

CLI

npx @modus-ui/cli add coy-key

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/coy-key.tsx.
  3. Paste the code.

Usage

tsx
import { CoyKey } from "@/components/ui/coy-key";

export default function Example() {
  return <CoyKey />;
}

Props

PropTypeDefaultDescription
childrenany-Key label, or a render function receiving the dodge state.
tauntsany["Reach for it", "Not quite", "Closer", "Patience", "Fine, yours"]Labels shown in turn as the key dodges.
noticestring""Caption shown beneath the field.
inkColorstring"hsl(var(--foreground))"Key fill colour.
contrastColorstring"hsl(var(--background))"Key text colour.
fieldHeightnumber240Height of the play field in pixels.
reachnumber72Distance the key flees per dodge, in pixels.
radiusnumber120Pointer distance at which the key starts fleeing.
falloffnumber2How sharply the flee strength drops with distance.
fleeDurationnumber130Duration of a dodge in milliseconds.
returnDurationnumber620Duration of the return to rest in milliseconds.
returnBouncenumber0.1Spring bounce on the return to rest.
axisstring"both"Axes the key may move along: "x", "y" or "both".
wallstring"clamp"Edge behaviour: "clamp" stops at the edge, "bounce" rebounds.
patiencenumber4Dodges before the key gives in and can be caught.
disabledbooleanfalseDisables dodging and clicks.
onDodgeany-Called with the dodge count after each dodge.
onRelentany-Called when the key gives in.
onCatchany-Called when the key is clicked.
styleany-Inline styles for the root.

Comments

  • No comments yet.