KQ-1625 · DEALT/FEED

Dealt Feed

A live list whose new entries are dealt onto it like cards: each leaves a deck in the corner face down, flies to the top along an arc on two springs of different stiffness, turning face up and spinning a little against its travel, and slaps into place with the two bounces of springs.recoil while the rows below glide down on springs.glide to make room and jostle as it lands, and the count beside the heading rolls up a digit on springs.snap. Several arrivals are dealt one after another. A pointer or keyboard focus in the feed holds the deal so nothing moves under the reader; arrivals wait on the deck with a count, and pressing the deck (Enter or Space) deals them now.

KQ-1625 · DEALT/FEED

Fieldline sign-ups

012345678901234567890123456789today

Mara OkaforTeam
Joined from the autumn walks page
2 min
Tomas ReyneSolo
Invited by Ines Varga
6 min
Ada KerrowTeam
Coldbrook, coast path group
11 min
Sefa LindqvistPro
Joined from the tide tables
18 min
Noor HaddadTeam
Basinworks reading circle
25 min
Elio BrandtSolo
Joined from the map shop
31 min
Wren AbaraPro
Invited by Ada Kerrow
44 min
Juno ValeTeam
Fernworks walking club
1 h

live · hover to hold the deal

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/dealt-feed

Props

entries: readonly DealtFeedEntry[]; default defaultDealtFeedEntries; The list, newest first: { id, name, detail?, meta?, time?, hue? }. An entry with a new id at the front is dealt onto the list.
dealSpeed: number; default 1; How fast cards are thrown, 0.5 (a lazy toss) to 2 (a snap deal).
spin: number; default 0.5; How much a card spins in flight, 0 (it slides flat) to 1 (a spinning throw).
density: "compact" | "cozy" | "roomy"; default "cozy"; Row height, avatar size and how much each row says.
deckCorner: "top-right" | "top-left" | "bottom-right" | "bottom-left"; default "top-right"; Where the deck sits.
max: number; default 12; How many rows are kept; older ones slide out at the foot.
pauseOnHover: boolean; default true; A pointer or keyboard focus anywhere in the feed holds the deal; arrivals wait on the deck until it is pressed or the feed is left.
flip: boolean; default true; Cards leave the deck face down and turn over in flight.
title: string; default "Sign-ups"; The heading.
total: number; default —; The count beside the heading; defaults to the number of entries. It rolls up as each card lands.
totalLabel: string; default "today"; A word after the count.
label: string; default "Sign-ups, newest first"; Names the list for assistive technology.
accent: string; default "var(--accent-bright)"; The deck's colour and the new row's wash, any CSS colour.
onDeal: (entry: DealtFeedEntry) => void; default —; Fires as each dealt card lands.
sound: boolean; default false; A paper slap as each card the visitor dealt from the deck lands; automatic arrivals stay silent.
disabled: boolean; default false; Arrivals still land, but the deck cannot be pressed.
className: string; default "h-full w-full"; Sizes the box; the feed fills it. Give it a height.

Prop	Type	Default	Description
entries	readonly DealtFeedEntry[]	defaultDealtFeedEntries	The list, newest first: { id, name, detail?, meta?, time?, hue? }. An entry with a new id at the front is dealt onto the list.
dealSpeed	number	1	How fast cards are thrown, 0.5 (a lazy toss) to 2 (a snap deal).
spin	number	0.5	How much a card spins in flight, 0 (it slides flat) to 1 (a spinning throw).
density	"compact" \| "cozy" \| "roomy"	"cozy"	Row height, avatar size and how much each row says.
deckCorner	"top-right" \| "top-left" \| "bottom-right" \| "bottom-left"	"top-right"	Where the deck sits.
max	number	12	How many rows are kept; older ones slide out at the foot.
pauseOnHover	boolean	true	A pointer or keyboard focus anywhere in the feed holds the deal; arrivals wait on the deck until it is pressed or the feed is left.
flip	boolean	true	Cards leave the deck face down and turn over in flight.
title	string	"Sign-ups"	The heading.
total	number	—	The count beside the heading; defaults to the number of entries. It rolls up as each card lands.
totalLabel	string	"today"	A word after the count.
label	string	"Sign-ups, newest first"	Names the list for assistive technology.
accent	string	"var(--accent-bright)"	The deck's colour and the new row's wash, any CSS colour.
onDeal	(entry: DealtFeedEntry) => void	—	Fires as each dealt card lands.
sound	boolean	false	A paper slap as each card the visitor dealt from the deck lands; automatic arrivals stay silent.
disabled	boolean	false	Arrivals still land, but the deck cannot be pressed.
className	string	"h-full w-full"	Sizes the box; the feed fills it. Give it a height.