components / article-list

article-list.

searchable, tag-filterable grid of article cards. animated banners stay frozen in grayscale until hover, then play in full color. cards stagger their entrance fade.

Deferring GIF banners until hover

May 12, 2026

Freeze the first frame of an animated banner to a still PNG, then swap to the real GIF only when the user hovers.

canvasperformancereact

Grayscale-to-color on hover

April 3, 2026

A small CSS transition that makes a card feel alive: muted and grayscale at rest, full color on hover.

csstailwind

Client-side search and tag filters

February 21, 2026

Wire a search box and clickable tag chips over a list with nothing more than useMemo.

reactux

Framework-agnostic cards

January 9, 2026

Plain anchors and img tags keep this list portable — drop it into any router by setting basePath.

htmlux

installation

bunx @justin06lee/chrome@latest add article-list

props

name	type	default	description
articles *	ArticlePreview[]	-	articles to render as cards.
basePath	string	''	prefix for card hrefs, built as `${basePath}/${slug}`.
defaultQuery	string	''	initial value of the search box.
defaultTag	string	-	initially selected tag filter.
stagger	boolean	true	stagger each card's entrance fade by index (60ms per card, capped; honors prefers-reduced-motion).
className	string	-