KQ-1543 · REED/TYPE
Reed Type
Each letter stands on a slim stalk rising out of a waterline, the stalk drawn as one smooth arc and the letter riding its tip, turned about its own foot. Every reed is a damped angular oscillator joined to its neighbours by a coupling spring, with stiffness set between springs.drift and springs.snap, so a reed the pointer brushes bends away, whips back on a damped sway and pulls the next one a beat later; a fast drag released across the line sends a gust down all of it, and reeds that sank on a leave grow back up on springs.glide. A transparent button takes focus: keyboard focus sends a gentle ripple across, Enter or Space a strong one, and Left and Right a gust from either end.
Fernworks · water gardens
Down by the water
still · brush through the reeds
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/reed-type
Props
- children / text
- string
- default —
- The line, as children or a prop.
- as
- "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"
- default "p"
- The element that carries the line.
- stalk
- number
- default 0.9
- Stalk length, em: tall reeds sway wider and slower.
- stiffness
- number
- default 0.5
- Spring rate of the stalks, 0 (limp, the drift calibration) to 1 (springy, the snap calibration).
- damping
- number
- default 0.3
- How quickly a sway dies, 0 (whippy, many swings) to 1 (composed, one).
- coupling
- number
- default 0.5
- How strongly a bent reed pulls its neighbours, 0 (alone) to 1 (a single mat).
- radius
- number
- default 1.4
- How far the pointer's reach extends, em.
- strength
- number
- default 0.6
- How hard a passing pointer pushes, 0 to 1.
- maxBend
- number
- default 38
- The largest bend a stalk takes, degrees; bends ease into it.
- stalkColor
- string
- default —
- The stalks' colour, any CSS colour; sage ink by default.
- water
- boolean
- default true
- Draw the waterline, the stalks' reflections and the ripples.
- trigger
- "mount" | "inView" | "hover" | "manual"
- default "inView"
- What sends the arrival gust (and raises reeds that sank).
- once
- boolean
- default true
- Arrive once, or sink and rise again each time the line re-enters view or is hovered.
- play
- boolean
- default false
- With trigger "manual": true brings the reeds in, false sinks them.
- delay
- number
- default 0
- Wait before the arrival, ms.
- stagger
- number
- default 45
- Gap between reeds rising, ms.
- duration
- number
- default 520
- Time scale of the rise, ms (the glide spring's ratio is kept).
- interactive
- boolean
- default true
- The pointer, touch and the keys sway the reeds.
- onSwayChange
- (swaying: boolean) => void
- default —
- The reeds started swaying (true), or every reed has come to rest (false).
- onComplete
- () => void
- default —
- The arrival has settled.
- className
- string
- default —
- Size and type; stalks and bends are in em.
| Prop | Type | Default | Description |
|---|---|---|---|
| children / text | string | — | The line, as children or a prop. |
| as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "p" | The element that carries the line. |
| stalk | number | 0.9 | Stalk length, em: tall reeds sway wider and slower. |
| stiffness | number | 0.5 | Spring rate of the stalks, 0 (limp, the drift calibration) to 1 (springy, the snap calibration). |
| damping | number | 0.3 | How quickly a sway dies, 0 (whippy, many swings) to 1 (composed, one). |
| coupling | number | 0.5 | How strongly a bent reed pulls its neighbours, 0 (alone) to 1 (a single mat). |
| radius | number | 1.4 | How far the pointer's reach extends, em. |
| strength | number | 0.6 | How hard a passing pointer pushes, 0 to 1. |
| maxBend | number | 38 | The largest bend a stalk takes, degrees; bends ease into it. |
| stalkColor | string | — | The stalks' colour, any CSS colour; sage ink by default. |
| water | boolean | true | Draw the waterline, the stalks' reflections and the ripples. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | What sends the arrival gust (and raises reeds that sank). |
| once | boolean | true | Arrive once, or sink and rise again each time the line re-enters view or is hovered. |
| play | boolean | false | With trigger "manual": true brings the reeds in, false sinks them. |
| delay | number | 0 | Wait before the arrival, ms. |
| stagger | number | 45 | Gap between reeds rising, ms. |
| duration | number | 520 | Time scale of the rise, ms (the glide spring's ratio is kept). |
| interactive | boolean | true | The pointer, touch and the keys sway the reeds. |
| onSwayChange | (swaying: boolean) => void | — | The reeds started swaying (true), or every reed has come to rest (false). |
| onComplete | () => void | — | The arrival has settled. |
| className | string | — | Size and type; stalks and bends are in em. |