KQ-820 · MEMORY/AGE

Memory Age

A list of remembered facts whose ink fades with age: each row's opacity is one minus 0.65 times its share of the horizon, tweened on the base duration, so the oldest sit at 35 percent and the list sorts freshest first. When the host answers a Refresh by dropping a row's age, a soft cobalt wash sweeps the row left to right on a slow tween while its ink returns, and the row rises to the top with layout on glide — a FLIP move that travels rather than blinking into place. A legend beneath reads the horizon.

KQ-820 · MEMORY/AGE

Gaugeworks Reasoner remembers

Coldbrook Bank statements arrive as CSV1d
The Basinworks yard gate opens at 06:305d
Crew lead Ines wants quantities in metric2w
Yard reports go out Friday before noon3w
Coldbrook waives transfer fees over 5,0004w

freshfadingfaintFades over 30 days

2 fresh · 3 fading · oldest 27d

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/memory-age

Props

items: MemoryAgeItem[]; default —; The facts — id, text and an age in days the host supplies — in any order; the list sorts freshest first.
horizon: number; default 30; Days at which a memory is at its faintest.
formatAge: (days: number) => string; default today / Nd / Nw; Labels each row's age.
onRefresh: (id: string) => void; default —; Fires from a row's Refresh button; set that item's age to 0 to sweep and lift it.
label: string; default —; Names the list for assistive technology and prints as its heading.

Prop	Type	Default	Description
items	MemoryAgeItem[]	—	The facts — id, text and an age in days the host supplies — in any order; the list sorts freshest first.
horizon	number	30	Days at which a memory is at its faintest.
formatAge	(days: number) => string	today / Nd / Nw	Labels each row's age.
onRefresh	(id: string) => void	—	Fires from a row's Refresh button; set that item's age to 0 to sweep and lift it.
label	string	—	Names the list for assistive technology and prints as its heading.