Business Graphics

Activity Feed

A live workspace audit stream: new events slide and fade in at the top with a colored initials avatar, an actor, an action (approved invoice, deployed api-gateway, invited a teammate) and a relative time, while the oldest event fades out — 7 visible at once.

cssmedium complexitysubtle motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →

Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Dashboard sidebars, audit/activity logs, notification centers, admin overview panels, and team workspace feeds that need a sense of live recent activity.

When not to

When events must reflect a real backend stream (these are simulated), or when full event detail, filtering, and pagination are required — use a real log table instead.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Edit the people and acts arrays (actor names, action text, colour key, detail sub-line, and optional id number-base) to set your own event stream, and change the add interval (loop setTimeout 2800ms) or VISIBLE count. Colour keys (a/c/o/w/e/m) map avatar tints to the theme tokens. Re-theme to light by setting --pro-bg:#f6f8fa; --pro-surface:#ffffff; --pro-border:rgba(0,0,0,.08); --pro-text:#1f2328; --pro-muted:#59636e (keep --pro-accent), and update the catalog bg field to match. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

theme tokens (:root --pro-bg, --pro-surface, --pro-border, --pro-text, --pro-muted, --pro-accent)
event data (people array and acts array: action text, colour key, detail sub-line, id number-base)
add-event interval (loop setTimeout 2800ms)
visible event count (VISIBLE=7) and avatar colour-to-token map (COL)
theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

:root --pro-* token block (renaming breaks the shared pro theming API)
role=img + aria-label on .afd-stage
IIFE wrapper
prefers-reduced-motion early return to the populated static stream
visibilitychange pause (running flag)
theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

Light re-theme via the --pro-* block; catalog bg/accent describe the dark default
Events are randomly generated on a loop for demo, not wired to a real activity source
Relative timestamps advance on each add tick (~2.8s), not once per second

activity-feedaudit-logtimelinenotificationsavatarssaasrealtimedatavizadmin

More Business Graphics components

Funnel AnalysisInteractive conversions funnel stage chart with flow particles reacting to mouse hover.
Grid MonitorSystem health grid monitoring status of 30 nodes with active scanning sweeps and interactive detail pane.
KPI SparklineKPI metric cards featuring interactive, scrubbable sparkline trends on HTML5 canvas with custom tooltip tracking.
KPI Stat RowFour SaaS metric cards — MRR, active users, churn, net revenue retention — with count-up values, colored delta chips and trend arrows, updating with…