KQ-528 · DOCK/PLAYER

Dock Player

A media card that docks. An IntersectionObserver watches its seat against the scrolling container, and once less than 40 percent of the seat is on screen the card shrinks into the corner along one shared layoutId, travelling on glide because a layout shift should not bounce. Play, progress and close ride along, the docked picture is a button that scrolls the seat back into view, and under reduced motion the two positions cross-fade.

KQ-528 · DOCK/PLAYER

The long calibration

Waylight · Fieldline archive

0:00

Bay 4 calibration

The vane on bay 4 had been reading long since the spring service, and nobody could say by how much until the rig was stripped.

What the tape shows is the third sweep, where the gauge drifts a full two degrees before it settles back against the stop.

Fieldline's fix was unglamorous: retorque to 18 Nm, log the drift, and hand the bay over with the numbers written down.

Six weeks on, the same sweep reads flat. The tape stays in the archive as the reference the next shift measures against.

Player inline · scroll the article

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/dock-player

Props

container: React.RefObject<HTMLElement | null>; default —; The scrolling element whose viewport decides when the card docks; it is the observer's root.
title: string; default —; Card title, and the accessible name of the play, close and return controls.
corner: "bottom-right" | "bottom-left"; default "bottom-right"; Corner the card docks into.
children: React.ReactNode; default —; The media surface; it is stretched to fill the card's picture area in both sizes.
onStateChange: (state: DockPlayerState) => void; default —; Fires when the card moves between inline, docked and closed.

Prop	Type	Default	Description
container	React.RefObject<HTMLElement \| null>	—	The scrolling element whose viewport decides when the card docks; it is the observer's root.
title	string	—	Card title, and the accessible name of the play, close and return controls.
corner	"bottom-right" \| "bottom-left"	"bottom-right"	Corner the card docks into.
children	React.ReactNode	—	The media surface; it is stretched to fill the card's picture area in both sizes.
onStateChange	(state: DockPlayerState) => void	—	Fires when the card moves between inline, docked and closed.