KQ-1195 · YARN/KNIT

Yarn Knit

An inline loader drawn as knitting: a needle holds a row of stitches, the working needle crosses it at the last one, and the yarn hangs from there to a ball on the floor. Each stitch the working needle stabs in and back on two tweens, the new V grows down from the needle on the fibre's spring (wool springs.snap, cotton springs.flick, mohair springs.drift), and the yarn tugs the ball, which jerks toward the work and rolls back on springs.snap, turning as it unwinds and shrinking as the row grows; given progress the row is that share knitted and glides on springs.glide, otherwise it knits to the end, holds and unravels. The glyph is a button: drag the yarn and its middle follows the finger 1:1 with a loop forming where it is pinched, and letting go of a long pull has the needles take the loop with a click — the next stitch when free-running, wound back when determinate — while a tap, Enter or Space pulls one loop.

KQ-1195 · YARN/KNIT

Fernworks is thinking

Summarising 14 pages62%

thinking · 14 pages to read

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/yarn-knit

Props

label: string; default "Loading"; What is loading. Shown beside the glyph and the loader's accessible name: the status's, or the progressbar's when progress is given.
hideLabel: boolean; default false; Keep the label for assistive technology only, for a glyph inline in a sentence or a row.
size: number; default 24; The glyph's box in px, crisp from 16 to 64: detail simplifies below 40 and below 24 so it still reads at text size.
speed: number; default 1; How fast it knits, 0.5 to 2: the stitch rhythm, the stab, the hold and the unravel.
yarn: "wool" | "cotton" | "mohair"; default "wool"; The fibre, which sets the look and the spring: wool is springy with a ply twist, cotton thin, taut and quick, mohair soft and lazy with a halo and loose fibres.
colour: "rose" | "sage" | "navy"; default "rose"; The yarn's dye, as fixed pigments that look the same in both themes; the needles are theme ink.
progress: number; default —; Determinate, 0 to 1: how much of the row is knitted, the partial stitch growing smoothly and the needle stabbing as each whole stitch completes. Without it the row knits, holds and unravels on its own.
onTug: () => void; default —; A loop was pulled by hand, tap or key.
sound: boolean; default false; Play the needles taking a pulled loop (pitched by fibre), and a softer knock when a determinate loop is wound back. Knitting and unravelling are silent.
disabled: boolean; default false; Keep knitting, but refuse the hand: the glyph is drawn as a picture with no button, for loaders that should not be a tab stop.
className: string; default —; Classes for the inline root; text size set here reaches the label.

Prop	Type	Default	Description
label	string	"Loading"	What is loading. Shown beside the glyph and the loader's accessible name: the status's, or the progressbar's when progress is given.
hideLabel	boolean	false	Keep the label for assistive technology only, for a glyph inline in a sentence or a row.
size	number	24	The glyph's box in px, crisp from 16 to 64: detail simplifies below 40 and below 24 so it still reads at text size.
speed	number	1	How fast it knits, 0.5 to 2: the stitch rhythm, the stab, the hold and the unravel.
yarn	"wool" \| "cotton" \| "mohair"	"wool"	The fibre, which sets the look and the spring: wool is springy with a ply twist, cotton thin, taut and quick, mohair soft and lazy with a halo and loose fibres.
colour	"rose" \| "sage" \| "navy"	"rose"	The yarn's dye, as fixed pigments that look the same in both themes; the needles are theme ink.
progress	number	—	Determinate, 0 to 1: how much of the row is knitted, the partial stitch growing smoothly and the needle stabbing as each whole stitch completes. Without it the row knits, holds and unravels on its own.
onTug	() => void	—	A loop was pulled by hand, tap or key.
sound	boolean	false	Play the needles taking a pulled loop (pitched by fibre), and a softer knock when a determinate loop is wound back. Knitting and unravelling are silent.
disabled	boolean	false	Keep knitting, but refuse the hand: the glyph is drawn as a picture with no button, for loaders that should not be a tab stop.
className	string	—	Classes for the inline root; text size set here reaches the label.