KQ-1861 · FASCICLE/RUN

Fascicle Run

An endless flight down the inside of a nerve bundle, drawn per pixel in one WebGL2 pass with your content on top: every view ray is intersected with four concentric layers of a curving tube, so soft translucent fibres spiral along the walls with real parallax between layers, narrow at regular nodes, and carry signals racing past in both directions that flare at the nodes they jump between; at intervals a branch opens in the wall and the nearest fibres bend toward it and peel away. The pointer steers the camera across the bundle on springs.drift's constants with a gentle bank, and a held press speeds the flight up on the same spring, widening the view and stretching the signals into streaks. The keyboard's way in is a button behind your content: arrow keys steer, holding Space or Enter speeds up, Escape recentres.

KQ-1861 · FASCICLE/RUN

Fieldline · neural imaging

Signals, end to end.

cruising · hold to speed up

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/fascicle-run

Props

strands: number; default 24; How many fibres line the bundle, across all its layers, 8 to 48.
speed: number; default 1; How fast the flight cruises, 0 (hovering) to 2.
pulse: number; default 0.5; How often signals race along each fibre, 0 (a rare pulse) to 1 (a busy bundle).
boost: number; default 3; How many times faster the flight goes while a press is held, 1 to 6.
curve: number; default 0.5; How much the bundle bends, 0 (dead straight) to 1.
branches: number; default 0.5; How often a side branch opens and fibres peel away into it, 0 (never) to 1 (often).
steer: number; default 0.6; How far the pointer steers the camera within the bundle, 0 to 1.
fiberColor: string; default "var(--accent-bright)"; The fibres' colour, any CSS colour; resolved on the element so it follows the theme.
pulseColor: string; default "var(--signal)"; The signals' colour.
children: React.ReactNode; default —; Content above the flight: a hero line, a heading, a call to action.
interactive: boolean; default true; The pointer steers and a held press speeds up; the keys do both.
paused: boolean; default false; Hold the flight and the signals where they are; steering still answers.
label: string; default "Nerve bundle flight"; Names the flight for assistive technology.
seed: number; default 5; Seeds the fibres' places, the signals and the branches, so two bundles never match.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onBoostChange: (boosting: boolean) => void; default —; Fires when the visitor's hold speeds the flight up (true) or lets it ease back (false).
disabled: boolean; default false; Shows the flight but takes no input.
className: string; default "h-56 w-full"; Sizes the box.

Prop	Type	Default	Description
strands	number	24	How many fibres line the bundle, across all its layers, 8 to 48.
speed	number	1	How fast the flight cruises, 0 (hovering) to 2.
pulse	number	0.5	How often signals race along each fibre, 0 (a rare pulse) to 1 (a busy bundle).
boost	number	3	How many times faster the flight goes while a press is held, 1 to 6.
curve	number	0.5	How much the bundle bends, 0 (dead straight) to 1.
branches	number	0.5	How often a side branch opens and fibres peel away into it, 0 (never) to 1 (often).
steer	number	0.6	How far the pointer steers the camera within the bundle, 0 to 1.
fiberColor	string	"var(--accent-bright)"	The fibres' colour, any CSS colour; resolved on the element so it follows the theme.
pulseColor	string	"var(--signal)"	The signals' colour.
children	React.ReactNode	—	Content above the flight: a hero line, a heading, a call to action.
interactive	boolean	true	The pointer steers and a held press speeds up; the keys do both.
paused	boolean	false	Hold the flight and the signals where they are; steering still answers.
label	string	"Nerve bundle flight"	Names the flight for assistive technology.
seed	number	5	Seeds the fibres' places, the signals and the branches, so two bundles never match.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onBoostChange	(boosting: boolean) => void	—	Fires when the visitor's hold speeds the flight up (true) or lets it ease back (false).
disabled	boolean	false	Shows the flight but takes no input.
className	string	"h-56 w-full"	Sizes the box.