KQ-1553 · BUNTING/LINE
Bunting Line
A headline strung across the frame as bunting: each letter printed on a cloth flag sewn along a string that sags between two pegs, the string a real one — forty-eight nodes under the damped wave equation, fixed at the pegs — and every flag riding its slope on its own pair of damped oscillators for sway and swing, driven by the string's jolts and a breeze whose gusts run along the line so the flags flutter in turn. Pressing near the string and pulling bends it 1:1 under the pointer; letting go splits the kink into two waves that run out to both pegs and back. A tap plucks it with a flick, the mouse brushing across strums it, and Space or Enter plucks at a marker that Left and Right move from flag to flag.
Fernworks summer fair · Saturday 14 June
FAIR DAY
Press Space to pluck the string; Left and Right move along it.Stalls on the green from ten, the brass band at noon and lanterns at dusk.
breezy · press Space to pluck the string
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/bunting-line
Props
- text
- string
- default —
- The headline, a letter to a flag; \n hangs another string below.
- as
- "h1" | "h2" | "h3" | "p" | "div"
- default "h2"
- The element rendered.
- sag
- number
- default 0.5
- How deep the string hangs between its pegs, 0 (taut) to 1.
- wind
- number
- default 0.4
- The breeze, 0 (still air) to 1: the flags' lean, the gusts and their flutter.
- flagShape
- "pennant" | "swallow" | "square" | "scallop"
- default "pennant"
- The cut of the flags.
- colors
- string[]
- default five pigments from the accent, danger, warn and success tokens
- Flag cloth, in order along the string; any CSS colours.
- letterColor
- string
- default "oklch(0.985 0.012 90)"
- The printed letters.
- stringColor
- string
- default "var(--ink-3)"
- The string, its pegs and the keyboard marker.
- tension
- number
- default 0.5
- How taut the string is, 0 to 1: a pluck runs faster along a tauter string.
- ring
- number
- default 0.5
- How long a pluck rings, 0 (dead) to 1 (long).
- seed
- number
- default 1
- Where the palette starts along the string, and the flutter phases.
- interactive
- boolean
- default true
- The pointer and the keys pluck the string.
- disabled
- boolean
- default false
- Nothing plucks.
- paused
- boolean
- default false
- Still air; a pluck still rings.
- onPluck
- (at: number) => void
- default —
- A pluck: where along the string, 0 (left peg) to 1 (right peg).
- className
- string
- default —
- Width and colour; the drawing scales with the width.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The headline, a letter to a flag; \n hangs another string below. |
| as | "h1" | "h2" | "h3" | "p" | "div" | "h2" | The element rendered. |
| sag | number | 0.5 | How deep the string hangs between its pegs, 0 (taut) to 1. |
| wind | number | 0.4 | The breeze, 0 (still air) to 1: the flags' lean, the gusts and their flutter. |
| flagShape | "pennant" | "swallow" | "square" | "scallop" | "pennant" | The cut of the flags. |
| colors | string[] | five pigments from the accent, danger, warn and success tokens | Flag cloth, in order along the string; any CSS colours. |
| letterColor | string | "oklch(0.985 0.012 90)" | The printed letters. |
| stringColor | string | "var(--ink-3)" | The string, its pegs and the keyboard marker. |
| tension | number | 0.5 | How taut the string is, 0 to 1: a pluck runs faster along a tauter string. |
| ring | number | 0.5 | How long a pluck rings, 0 (dead) to 1 (long). |
| seed | number | 1 | Where the palette starts along the string, and the flutter phases. |
| interactive | boolean | true | The pointer and the keys pluck the string. |
| disabled | boolean | false | Nothing plucks. |
| paused | boolean | false | Still air; a pluck still rings. |
| onPluck | (at: number) => void | — | A pluck: where along the string, 0 (left peg) to 1 (right peg). |
| className | string | — | Width and colour; the drawing scales with the width. |