Signpost
Wooden signs on a picture, each a toggle: boards on a pole, arrows to either side, an effect on the chosen one and a sheen on the rest.
Features
- Signs placed by percent on any picture, so they stay on the painted post at every width.
- Three shapes: a framed board with brass nails, and arrows pointing left or right from a pole.
- The chosen sign stands proud and draws its own effect; the others pass a sheen now and then, so they read as buttons.
- A hidden sign fades and steps aside; in a container under 640px the signs leave the picture for a two-column board.
Use it for
- Choosing a section of a page with a picture that means something.
- Game menus, maps, crossroads.
On this site
- My Stuff: the forkArticles and Books hang on the post; Professional points to the sunny castle, Personal to the stormy one.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
API
| Prop | Type | What it does |
|---|---|---|
image | img attributes | The picture; its width and height set its shape. |
signs | { id, label, count?, shape, at, effect?, hidden? }[] | at is [x, y] in percent: the pole for boards, the base for arrows. |
value / onValueChange | string | The chosen sign. |
pole | [x, top, bottom] | A pole in percent that carries the boards. |
idle | boolean | The occasional sheen; off when motion is off. |
label | string | The name of the group of signs. |
Accessibility
- Signs are toggle buttons (aria-pressed) inside a labelled nav.
- A hidden sign leaves the tab order and the accessibility tree.
- Reduced motion drops the sheens; the chosen sign still stands proud.
Source
The code is in src/kit/signpost.tsx in runets, MIT licensed.