KQ-1192 · KNOT/TIE
Knot Tie
An inline loader drawn as a short rope that ties itself: one Catmull-Rom path through a fixed set of points is blended every frame through four stages of the knot — slack, the first loop lifted over, loosely tied, snug — on move tweens, cinched on the rope's own spring (jute glides, nylon snaps one overshoot past, silk flicks), then loosened and untied. Where the rope crosses itself the upper strand is redrawn on top with its lay continuing unbroken, so the overhand, bow and figure-eight alternate over and under like real knots. Dragging the rope sideways tightens it early 1:1 with the pull, rubber-banding past snug, and a release cinches it with the release velocity; Enter or Space on the rope's button tugs it snug the same way, and the rope creaks only while the visitor pulls.
packing · tug the rope to cinch it
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/knot-tie
Props
- label
- string
- default —
- Visible text beside the glyph, and the loader's accessible name ("Loading" when omitted).
- hideLabel
- boolean
- default false
- Keep the label for assistive technology only.
- size
- number
- default 32
- The glyph's box in px, 16 to 64. Detail is chosen by size: crossings from 20, the rope's lay from 28, frayed or sealed ends and a shadow from 40.
- speed
- number
- default 1
- How fast it ties, holds, loosens and lets go, 0.5 to 2.
- knot
- "overhand" | "bow" | "figure"
- default "overhand"
- Which knot it ties: an overhand, a shoelace bow or a figure eight.
- rope
- "jute" | "nylon" | "silk"
- default "jute"
- What the rope is: its thickness, pigment, lay, end finish, snug spring and how quickly it slides loose.
- progress
- number
- default —
- Determinate share done, 0 to 1: the knot is tied that far and snug at 1. Omit for a rope that keeps tying and untying.
- sound
- boolean
- default false
- Play a creak loop while the visitor pulls the rope, pitched by the tension and loud as the rope moves; it stops on release. The self-tying cycle is silent.
- disabled
- boolean
- default false
- Keeps tying itself, but cannot be tugged.
- className
- string
- default —
- Classes for the inline root; the label inherits its font size and colour.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Visible text beside the glyph, and the loader's accessible name ("Loading" when omitted). |
| hideLabel | boolean | false | Keep the label for assistive technology only. |
| size | number | 32 | The glyph's box in px, 16 to 64. Detail is chosen by size: crossings from 20, the rope's lay from 28, frayed or sealed ends and a shadow from 40. |
| speed | number | 1 | How fast it ties, holds, loosens and lets go, 0.5 to 2. |
| knot | "overhand" | "bow" | "figure" | "overhand" | Which knot it ties: an overhand, a shoelace bow or a figure eight. |
| rope | "jute" | "nylon" | "silk" | "jute" | What the rope is: its thickness, pigment, lay, end finish, snug spring and how quickly it slides loose. |
| progress | number | — | Determinate share done, 0 to 1: the knot is tied that far and snug at 1. Omit for a rope that keeps tying and untying. |
| sound | boolean | false | Play a creak loop while the visitor pulls the rope, pitched by the tension and loud as the rope moves; it stops on release. The self-tying cycle is silent. |
| disabled | boolean | false | Keeps tying itself, but cannot be tugged. |
| className | string | — | Classes for the inline root; the label inherits its font size and colour. |