KQ-1413 · MOSAIC/TRAIL

Mosaic Trail

A pointer trail laid in pixels: the box is a mosaic of square cells, and every cell along the pointer's path lights under a soft brush, holds for a beat, then fades while its colour walks from the head of the palette to the tail with its age, so a stroke is a comet that cools behind you. Brightness steps down through an ordered dither, so the tail dissolves pixel by pixel in a checker-and-cross pattern, and each tile that lights from dark pops in on its own spring with the springs.snap constants. A click sends an eight-ray pixel burst; keyboard focus inside runs a comet to the focused control on springs.glide and traces a pixel frame round it.

KQ-1413 · MOSAIC/TRAIL

Fieldline · route planner

Every route, drawn as you go.

field at rest · move across it, click for a burst

Open it on the Canvas stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/mosaic-trail

Props

children: ReactNode; default —; Content laid over the mosaic. It stays fully interactive; the tiles never take a click.
cell: number; default 14; The side of one square cell, in px.
gap: number; default 2; The grout between lit tiles, in px.
fade: number; default 900; How long a tile takes to fade out once its hold is over, in ms.
hold: number; default 140; How long a tile stays at full brightness before it starts to fade, in ms.
colors: "aurora" | "ember" | "ink" | readonly string[]; default "aurora"; The trail's colours from head to tail: a preset, or any CSS colours resolved on the element and mixed in oklab.
levels: number; default 5; How many brightness steps a tile fades through, 2 to 8.
dither: boolean; default true; Fade through an ordered dither, so tiles drop out in a pixel pattern rather than all together.
brush: number; default 1; The brush's radius in cells; a fast stroke paints a little wider.
round: number; default 0.18; How rounded each tile is, as a share of its side (0 to 0.5).
grid: number; default 0.6; How visible the resting grout grid is, 0 to 1.
intensity: number; default 0.9; The brightest a tile gets, 0 to 1.
burst: number; default 6; A click sends a pixel burst with rays this many cells long; 0 turns it off.
intro: boolean; default true; One comet across the mosaic the first time it comes into view.
followFocus: boolean; default true; Keyboard focus inside draws a comet to the focused control and frames it in pixels.
interactive: boolean; default true; The pointer paints (mouse and pen); a tap sends a burst.
paused: boolean; default false; Freezes the trail where it is.
seed: number; default 11; Seed for the dither offsets, the intro's path and the reduced-motion still.
dpr: number; default 2; The highest device pixel ratio the canvas draws at (never above 2).
onActiveChange: (active: boolean) => void; default —; Fires when the first tile lights and when the last one has faded.
className: string; default —; Classes for the box. Give it a height; children are laid out inside it.

Prop	Type	Default	Description
children	ReactNode	—	Content laid over the mosaic. It stays fully interactive; the tiles never take a click.
cell	number	14	The side of one square cell, in px.
gap	number	2	The grout between lit tiles, in px.
fade	number	900	How long a tile takes to fade out once its hold is over, in ms.
hold	number	140	How long a tile stays at full brightness before it starts to fade, in ms.
colors	"aurora" \| "ember" \| "ink" \| readonly string[]	"aurora"	The trail's colours from head to tail: a preset, or any CSS colours resolved on the element and mixed in oklab.
levels	number	5	How many brightness steps a tile fades through, 2 to 8.
dither	boolean	true	Fade through an ordered dither, so tiles drop out in a pixel pattern rather than all together.
brush	number	1	The brush's radius in cells; a fast stroke paints a little wider.
round	number	0.18	How rounded each tile is, as a share of its side (0 to 0.5).
grid	number	0.6	How visible the resting grout grid is, 0 to 1.
intensity	number	0.9	The brightest a tile gets, 0 to 1.
burst	number	6	A click sends a pixel burst with rays this many cells long; 0 turns it off.
intro	boolean	true	One comet across the mosaic the first time it comes into view.
followFocus	boolean	true	Keyboard focus inside draws a comet to the focused control and frames it in pixels.
interactive	boolean	true	The pointer paints (mouse and pen); a tap sends a burst.
paused	boolean	false	Freezes the trail where it is.
seed	number	11	Seed for the dither offsets, the intro's path and the reduced-motion still.
dpr	number	2	The highest device pixel ratio the canvas draws at (never above 2).
onActiveChange	(active: boolean) => void	—	Fires when the first tile lights and when the last one has faded.
className	string	—	Classes for the box. Give it a height; children are laid out inside it.