Tick Flash Table

A live table where a changed row flashes and fades back to neutral, with an arrow saying which way it moved.

ACME184.20—
NORTH62.85—
VERTA311.40—
OKRA9.14—

Build a live-updating table whose changed rows flash. Structure: a bordered list of rows, each with a symbol, a price, and a delta cell. The flash: when a row's value changes, animate its background from a tinted status color TO TRANSPARENT over about 0.9s (a two-keyframe animation, tint then nothing). The fade back is the whole point - a tint that stays makes the next change unreadable, because by then everything is coloured. Direction must not be colour alone. Every changed row shows an up or down ARROW next to the delta. Colour on its own leaves a red-green reader watching a table that blinks for no reason they can see. Rows that did not change show an em dash, not an empty cell. An empty cell reads as missing data; a dash reads as no change, which is information. Set fontVariantNumeric: "tabular-nums" on the numbers so digits keep their columns and prices do not jitter sideways as they update. Space the ticks about 1.4s apart - long enough that a flash finishes and the row returns to neutral before the next change lands. Use two scales of feedback deliberately: the row tint says where to look, the delta cell says what happened. Under prefers-reduced-motion, keep updating values and arrows but skip the background flash entirely. Colors as tokens: paper rows, hairline separators, and a reserved status green and red for direction - never the accent. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data