Sign-in
Sign in and sign up on one plate: Google and GitHub keys with their marks stamped in monochrome, an email route underneath, a two-way selector that re-prints the plate, and errors that say how to fix them.
Kit parts
Wax tablet
A signature pad as a real wax tablet: a walnut frame around a bed of wax, and a steel stylus that lifts out of its tray, follows the pointer and cuts a groove where you sign. A raking lamp lights the far wall of each cut and shades the near one, so the line reads as carved. Clear sweeps a flat steel edge across and smooths the wax; Undo takes back the last stroke. A plate under the tablet, and a polite status region, say whether it holds a signature.
Anatomy
The tablet is one box: a walnut frame drawn from layered gradients (straight grain, a little figure, fibre from the shared noise token) with a tray cut into its bottom rail, and the wax set into it as a recessed bed. The wax colour is the lamp amber folded into the finish’s own face, so aluminium gets pale beeswax and graphite a dark wax. The groove is five copies of one SVG path, each pushed a pixel toward or away from a lamp at the top left: the shaded near wall, the lit far wall, the dark cut between, and a faint glint and shade on the wax pushed up beside it. The stylus is one clipped steel rod with a point and a flat end; held, it is rotated and foreshortened with its tip on the pointer, and its shadow pivots on the tip, so it meets the pen when it cuts and parts from it when it lifts. Clear runs a steel edge across the wax and clips the groove away behind it. A transparent native button over the wax takes the pointer and the keyboard. Tokens only, no colour written in the part.
Variants
- Signed
- Blank
- Compact, no plate or keys
- Disabled
States
- At rest
- Hover
- Focus
- Mid-stroke
- Disabled
Props and options
| Name | Kind | Description |
|---|---|---|
| label | attribute | Names the stylus for a screen reader (e.g. "Sign here"); it stays fixed, since aria-valuetext carries the changing state. |
| stage-width / stage-height | attribute | The size of the wax: how far the stylus can travel. |
| value | attribute | |
| step | attribute | How far one arrow-key press moves the stylus; Shift multiplies it by 3. |
| disabled | attribute | The stylus and both keys stop taking pointer or keyboard input; the stylus stays in its tray. |
| value | property | |
| clear() / undo() | method | clear() smooths the wax (a flat edge sweeps across, at once under reduced motion); undo() takes back the last stroke. Both fire input and change. |
| strokes / empty | property | strokes: the groove as an array of point arrays. empty: true once every stroke holds no points. |
| input / change | event | input fires as the groove is cut; change fires once a stroke ends (pointer lifted, or Space lifts the stylus), and on Undo and Clear. |
| Space, arrow keys | key | Space lowers or lifts the stylus; arrow keys move it, and while it is down they cut a straight groove (Shift for a bigger step). |
| waxTabletHTML(options) | function |
Usage notes
Drag across the wax to sign; the stylus follows. By keyboard: Tab to the tablet, Space lowers the stylus, arrow keys cut, Space lifts it.
Accessibility
- The tablet is a native button: Tab reaches it, Space lowers or lifts the stylus, and arrow keys move it and cut while it is down; aria-valuetext reads the state out ("Pen down.
- Frame, wax, groove and stylus are aria-hidden: they are the state drawn, not a second copy of it; the button’s own aria-label names the action and never changes.
- Whether the tablet is signed is never shown by colour or drawing alone: it is read out in words by aria-valuetext and printed again on the plate under the tablet.
- A polite status region echoes the same words on every change, for a screen reader that announces status regions rather than aria-valuetext changes.
- Focus draws a ring round the wax, and a keyboard user gets the stylus lifted over the wax so they can see where it will cut.
- Reduced motion keeps every state and drops the movement: the stylus jumps between tray and wax, and Clear empties the wax at once instead of sweeping.
- Undo and Clear are real, separately focusable keys.
Related parts
Tag input
A text input that turns what you type into printed tags. Enter or a comma sets one down in the well; each tag is a key that takes itself away, and every change is spoken.
Drop zone
An in-tray for files. A machined lip stands round a ribbed floor; the floor rises a little when a file is dragged over it, and a lamp on the lip lights. What goes in lands in the tray as a sheet of paper and is listed as printed rows, a refusal says why, and the key inside the tray is a real file input.