KQ-1367 · WEIGHT/FIELD
Weight Field
Text pressure with a body: each letter's tension is drawn through the inherited variable font's weight and width axes, and the pointer is a field — letters near it swell along a smooth bell of the distance, tensing on the snap spring and relaxing on a spring between snap and drift, so a pass across the word leaves a wake of weight relaxing behind the pointer; a press leans harder, and a flex wave runs once across the line on arrival. On touch a press-and-drag leans the same way, and a keyboard handle leans on one letter at a time with Left and Right.
KQ-1367 · WEIGHT/FIELD
Fieldline Strength · Spring intake
Lean into it.
Left and Right lean on the letters one at a time; Escape lets go.Spring intake opens Monday. Coaching from six in the morning.
relaxed · weight 400–700
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/weight-field
Props
- children
- string
- default —
- The line, as a string. Wins over text.
- text
- string
- default —
- The line, when it is not given as children.
- as
- "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"
- default "p"
- The element that carries the line.
- radius
- number
- default 2.5
- How far the pointer's pull reaches, em of the text size.
- minWeight
- number
- default 400
- Weight of a relaxed letter, on the font's wght axis.
- maxWeight
- number
- default 700
- Weight of a fully swollen letter.
- minWidth
- number
- default 80
- Width of a relaxed letter, on the font's wdth axis (100 is normal).
- maxWidth
- number
- default 100
- Width of a fully swollen letter.
- lean
- number
- default 1
- How hard the pointer leans, 0 to 1.
- relax
- number
- default 0.55
- How slowly the swell relaxes behind the pointer: 0 snaps back, 1 leaves a long wake (drift).
- axes
- "auto" | "variable" | "scale"
- default "auto"
- Draw the swell with the font's own axes, a stroke-and-stretch fallback, or whichever the font supports.
- align
- "start" | "center" | "end"
- default "center"
- Where the relaxed line sits in the room the swollen line needs.
- interactive
- boolean
- default true
- The pointer, a touch drag and the keys lean on the letters.
- trigger
- "mount" | "inView" | "hover" | "manual"
- default "inView"
- When the flex wave runs across the line.
- once
- boolean
- default true
- Run the wave once, or each time the line re-enters view or is hovered.
- delay
- number
- default 0
- Wait before the wave, ms.
- duration
- number
- default 1100
- How long the wave takes to cross the line, ms.
- play
- boolean
- default false
- With trigger "manual": true runs the wave, false lets the line rest.
- onLean
- (index: number | null) => void
- default —
- The letter the field is centred on changed, from the pointer or the keys; null when it lets go.
- onComplete
- () => void
- default —
- The flex wave has crossed the line and relaxed.
- className
- string
- default —
- Classes for the root; the type and its variable font are inherited from here.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | — | The line, as a string. Wins over text. |
| text | string | — | The line, when it is not given as children. |
| as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "p" | The element that carries the line. |
| radius | number | 2.5 | How far the pointer's pull reaches, em of the text size. |
| minWeight | number | 400 | Weight of a relaxed letter, on the font's wght axis. |
| maxWeight | number | 700 | Weight of a fully swollen letter. |
| minWidth | number | 80 | Width of a relaxed letter, on the font's wdth axis (100 is normal). |
| maxWidth | number | 100 | Width of a fully swollen letter. |
| lean | number | 1 | How hard the pointer leans, 0 to 1. |
| relax | number | 0.55 | How slowly the swell relaxes behind the pointer: 0 snaps back, 1 leaves a long wake (drift). |
| axes | "auto" | "variable" | "scale" | "auto" | Draw the swell with the font's own axes, a stroke-and-stretch fallback, or whichever the font supports. |
| align | "start" | "center" | "end" | "center" | Where the relaxed line sits in the room the swollen line needs. |
| interactive | boolean | true | The pointer, a touch drag and the keys lean on the letters. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | When the flex wave runs across the line. |
| once | boolean | true | Run the wave once, or each time the line re-enters view or is hovered. |
| delay | number | 0 | Wait before the wave, ms. |
| duration | number | 1100 | How long the wave takes to cross the line, ms. |
| play | boolean | false | With trigger "manual": true runs the wave, false lets the line rest. |
| onLean | (index: number | null) => void | — | The letter the field is centred on changed, from the pointer or the keys; null when it lets go. |
| onComplete | () => void | — | The flex wave has crossed the line and relaxed. |
| className | string | — | Classes for the root; the type and its variable font are inherited from here. |