KQ-581 · CART/FLY

Cart Fly

Add to cart, with the item making the trip. Pressing throws a ghost of the button's thumbnail along an arc to whatever cartRef points at — x on a linear tween, y through a lifted middle keyframe — and the flight's own onComplete calls onAdd, so the cart bumps on recoil because it caught something. The button confirms with a check drawn on flick, and Enter or Space runs the same path.

KQ-581 · CART/FLY

Fernworks supply

Waylight task lamp
48.00
Fernworks planter
26.00
Coldbrook flask
34.00

Cart holds 0

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/cart-fly

Props

cartRef: React.RefObject<HTMLElement | null>; default —; The element the ghost flies to; its box is measured at press time.
thumbnail: React.ReactNode; default —; The picture that flies — rendered in the button and again as the ghost.
onAdd: () => void; default —; Fires when the flight lands, so the cart counts what arrived.
label: string; default Add to cart; Button copy.
disabled: boolean; default false; Locks the button; no flight leaves.

Prop	Type	Default	Description
cartRef	React.RefObject<HTMLElement \| null>	—	The element the ghost flies to; its box is measured at press time.
thumbnail	React.ReactNode	—	The picture that flies — rendered in the button and again as the ghost.
onAdd	() => void	—	Fires when the flight lands, so the cart counts what arrived.
label	string	Add to cart	Button copy.
disabled	boolean	false	Locks the button; no flight leaves.