KQ-1698 · SHORTCUT/DRILLS

Shortcut Drills

A keyboard practice built from a list of actions and their keys: the screen names an action, you press its shortcut, and every key you press is mirrored on a small keyboard whose caps go down on springs.flick and come back on springs.snap. A correct chord bottoms out together and lights, the caps rise key first and modifiers after, and a bead lifts off the key and flies on an arc into the streak rail on springs.glide, landing on springs.recoil; a wrong one shakes nothing and gently shows the right chord with a breathing ring and a caption. The prompt is a focusable practice pad that takes real chords (Tab and Escape still leave), the board is a roving group of buttons where modifiers latch and a key commits, and the set ends on a summary where any drill can be repeated.

KQ-1698 · SHORTCUT/DRILLS

Fieldline shortcuts

1 of 6

Streak

Press the keys forSelect to start

6 shortcuts · about a minute

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/shortcut-drills

Props

drills: ShortcutDrill[]; default defaultShortcutDrills; The shortcuts in order: { id, action, detail?, keys } where keys are Mod, Shift, Alt, Control, Meta plus one KeyboardEvent.code (Mod accepts ⌘ or Ctrl).
results / defaultResults: Record<string, "clean" | "hinted" | "skipped">; default — / {}; Each drill's result by id, controlled or initial; a returning visitor's beads.
onResultsChange: (results: ShortcutResults) => void; default —; Fires from the press, tap or skip that changed a result, with every result.
onComplete: (summary: { total, clean, hinted, skipped, results }) => void; default —; A run reached the summary: the whole set, or a repeat of part of it.
onSkip: (drill: ShortcutDrill, index: number) => void; default —; Skip was pressed on a drill.
onAttempt: (attempt: { drill, keys, correct }) => void; default —; Every chord pressed or tapped while a drill was asked, right or wrong.
keyboardLayout: "command" | "control" | "split"; default "command"; ⌘ ⌥ ⌃ legends, Ctrl and Alt legends, or the ⌘ board split in two halves.
keycapStyle: "sculpted" | "flat" | "outline"; default "sculpted"; Tall caps with a skirt and real travel, low chiclets with a shadow, or line drawings that scale instead of travelling.
accent: "cobalt" | "signal" | "amber" | "graphite" | string; default "cobalt"; Lit caps, beads, the hint ring and the streak: a named accent or any CSS colour.
reveal: "miss" | "always"; default "miss"; Show the chord after a wrong press, or from the start as a learn mode.
advanceDelay: number; default 650; Milliseconds between a correct press and the next drill.
tapThrough: boolean; default true; The caps answer taps: modifiers latch, a key commits the chord.
title: string; default "Fieldline shortcuts"; The heading.
status: "ready" | "loading" | "error"; default "ready"; Whether the drills have arrived: a skeleton while loading, a retry on error.
onRetry: () => void; default —; Try again was pressed after the drills failed to load.
sound: boolean; default false; A tick on every press, a brighter one when the bead lands.
disabled: boolean; default false; Holds the pad, the board and the buttons.
className: string; default —; Classes for the surface; give it a height to fix its frame.

Prop	Type	Default	Description
drills	ShortcutDrill[]	defaultShortcutDrills	The shortcuts in order: { id, action, detail?, keys } where keys are Mod, Shift, Alt, Control, Meta plus one KeyboardEvent.code (Mod accepts ⌘ or Ctrl).
results / defaultResults	Record<string, "clean" \| "hinted" \| "skipped">	— / {}	Each drill's result by id, controlled or initial; a returning visitor's beads.
onResultsChange	(results: ShortcutResults) => void	—	Fires from the press, tap or skip that changed a result, with every result.
onComplete	(summary: { total, clean, hinted, skipped, results }) => void	—	A run reached the summary: the whole set, or a repeat of part of it.
onSkip	(drill: ShortcutDrill, index: number) => void	—	Skip was pressed on a drill.
onAttempt	(attempt: { drill, keys, correct }) => void	—	Every chord pressed or tapped while a drill was asked, right or wrong.
keyboardLayout	"command" \| "control" \| "split"	"command"	⌘ ⌥ ⌃ legends, Ctrl and Alt legends, or the ⌘ board split in two halves.
keycapStyle	"sculpted" \| "flat" \| "outline"	"sculpted"	Tall caps with a skirt and real travel, low chiclets with a shadow, or line drawings that scale instead of travelling.
accent	"cobalt" \| "signal" \| "amber" \| "graphite" \| string	"cobalt"	Lit caps, beads, the hint ring and the streak: a named accent or any CSS colour.
reveal	"miss" \| "always"	"miss"	Show the chord after a wrong press, or from the start as a learn mode.
advanceDelay	number	650	Milliseconds between a correct press and the next drill.
tapThrough	boolean	true	The caps answer taps: modifiers latch, a key commits the chord.
title	string	"Fieldline shortcuts"	The heading.
status	"ready" \| "loading" \| "error"	"ready"	Whether the drills have arrived: a skeleton while loading, a retry on error.
onRetry	() => void	—	Try again was pressed after the drills failed to load.
sound	boolean	false	A tick on every press, a brighter one when the bead lands.
disabled	boolean	false	Holds the pad, the board and the buttons.
className	string	—	Classes for the surface; give it a height to fix its frame.