KQ-1550 · ARMILLARY/WORDS
Armillary Words
An armillary sphere of thin metal bands drawn on a canvas with its own perspective, each band engraved round its outer face with one line and graduated in degrees on the rest, every segment of every band depth-sorted with the globe and polar rod so the rings cross properly. A drag spins the sphere 1:1 and a throw coasts down by its friction to a slow idle turn; tapping a ring, or picking or tabbing to its plate, swings it to face you — its orientation slerps on the springs.snap constants with one crisp overshoot to level, line centred toward you, a little forward — while the other rings slow on the springs.drift constants and dim. The sphere is a slider that Left and Right throw, and the plates are a toolbar of toggle buttons named by their lines; Escape lets the ring go.
turning · drag to spin, pick a ring to read it
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/armillary-words
Props
- lines
- string[]
- default defaultArmillaryLines
- One line per ring, engraved round its band; cycled when there are more rings than lines.
- ringCount
- number
- default 4
- How many rings, 2 to 6.
- tilt
- number
- default 26
- Degrees between neighbouring rings' tilts, 0 to 45: a small tilt nests them, a large one opens the sphere.
- finish
- "brass" | "bronze" | "steel" | "gilt"
- default "brass"
- The metal.
- value / defaultValue
- number | null
- default null
- The ring facing you, or null.
- onValueChange
- (ring: number | null) => void
- default —
- From the tap, key or focus that turned a ring to face you or let it go.
- spin
- number
- default 9
- Idle turn, degrees a second; 0 holds the sphere still.
- friction
- number
- default 0.5
- How quickly a throw slows, 0 (coasts) to 1 (stops short).
- view
- number
- default 14
- How far above the sphere you look from, degrees.
- caps
- boolean
- default true
- Engrave the lines in capitals.
- graduations
- boolean
- default true
- Degree ticks on the rest of each band.
- globe
- boolean
- default true
- A small globe and the polar rod at the centre.
- height
- number
- default 196
- Height of the sphere's stage, px.
- dpr
- number
- default 2
- Device pixel ratio cap for the canvas.
- paused
- boolean
- default false
- Hold the idle turn.
- disabled
- boolean
- default false
- No dragging, tapping or keys.
- label
- string
- default "Armillary sphere"
- Accessible name of the sphere.
- className
- string
- default —
- Width; the stage's height is `height`.
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | string[] | defaultArmillaryLines | One line per ring, engraved round its band; cycled when there are more rings than lines. |
| ringCount | number | 4 | How many rings, 2 to 6. |
| tilt | number | 26 | Degrees between neighbouring rings' tilts, 0 to 45: a small tilt nests them, a large one opens the sphere. |
| finish | "brass" | "bronze" | "steel" | "gilt" | "brass" | The metal. |
| value / defaultValue | number | null | null | The ring facing you, or null. |
| onValueChange | (ring: number | null) => void | — | From the tap, key or focus that turned a ring to face you or let it go. |
| spin | number | 9 | Idle turn, degrees a second; 0 holds the sphere still. |
| friction | number | 0.5 | How quickly a throw slows, 0 (coasts) to 1 (stops short). |
| view | number | 14 | How far above the sphere you look from, degrees. |
| caps | boolean | true | Engrave the lines in capitals. |
| graduations | boolean | true | Degree ticks on the rest of each band. |
| globe | boolean | true | A small globe and the polar rod at the centre. |
| height | number | 196 | Height of the sphere's stage, px. |
| dpr | number | 2 | Device pixel ratio cap for the canvas. |
| paused | boolean | false | Hold the idle turn. |
| disabled | boolean | false | No dragging, tapping or keys. |
| label | string | "Armillary sphere" | Accessible name of the sphere. |
| className | string | — | Width; the stage's height is `height`. |