KQ-1250 · TARTAN/SHIFT

Tartan Shift

A tartan cloth as a backdrop, built the way a weaver builds it from layered SVG patterns: a symmetric sett laid as the weft, the same sett as the warp, and the warp shown only through a stepped 2/2 twill so crossing colours blend on the diagonal, with shaded wales and a broad light across the cloth. When the palette or the sett changes, all sixteen stripes glide from their old places and widths to their new ones on the glide spring while the new colours are laid in behind a diagonal front that crosses the cloth along the twill on a tween, a bright thread in the new pinstripe colour running along it like a shuttle. It drifts gently with scroll — its travel through the viewport, in any scroll container, becomes a diagonal offset the patterns follow on the drift spring — and slides very slowly by itself while on screen; it is decorative, with no gesture of its own, so nothing needs a keyboard path.

KQ-1250 · TARTAN/SHIFT

Fernworks Mill

Winter cloth

Woven on our own looms, three setts this season

highland · bold sett · scroll to drift

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/tartan-shift

Props

sett: "fine" | "bold"; default "bold"; The pattern's scale and character: fine is a 96px repeat of 2px threads with narrow lines and overchecks, bold a 180px repeat of 2.5px threads with broad blocks. A change slides the stripes and re-threads the cloth.
palette: "highland" | "modern" | "earth"; default "highland"; The cloth's dyes — green, navy, black, red and yellow; grey, charcoal, cream, coral and teal; brown, rust, ochre, olive and cream — as pigments whose lightness follows the theme. A change slides the stripes into the new sett and re-threads it; a change mid-crossing finishes from where it is.
drift: number; default 0.5; How far scrolling carries the cloth and how fast it slides by itself, 0 to 1. 0 holds it still.
children: React.ReactNode; default —; What sits on the cloth — a hero, a heading — in a normal layer above it.
className: string; default —; Classes for the root, which fills its container (h-full w-full); set its size and radius here.

Prop	Type	Default	Description
sett	"fine" \| "bold"	"bold"	The pattern's scale and character: fine is a 96px repeat of 2px threads with narrow lines and overchecks, bold a 180px repeat of 2.5px threads with broad blocks. A change slides the stripes and re-threads the cloth.
palette	"highland" \| "modern" \| "earth"	"highland"	The cloth's dyes — green, navy, black, red and yellow; grey, charcoal, cream, coral and teal; brown, rust, ochre, olive and cream — as pigments whose lightness follows the theme. A change slides the stripes into the new sett and re-threads it; a change mid-crossing finishes from where it is.
drift	number	0.5	How far scrolling carries the cloth and how fast it slides by itself, 0 to 1. 0 holds it still.
children	React.ReactNode	—	What sits on the cloth — a hero, a heading — in a normal layer above it.
className	string	—	Classes for the root, which fills its container (h-full w-full); set its size and radius here.