∞ forever components

Business Graphics

Stone Record Filter

Compact Swiss-grid search over six fictional project records with only a search input, record list and empty state. An idle row scan starts at once, steps every 300 ms and stops on real input. Local demo data only. Palette: Swiss grid, off-black/off-white with persimmon accent.

cssmedium complexitymoderate motionmobile-ready

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 →
1

When to use it

Working with an AI agent

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

Edit the RECORDS array (title, phase, year) to change data. Filtering matches titles case-insensitively. Keep the data-fw-* hooks. Theme tokens are in :root and :root[data-theme=light].

Safe to edit

  • RECORDS array
  • CYCLE_MS
  • theme tokens

Keep intact

  • [data-fw-search]
  • [data-fw-record]
  • [data-fw-count]

Known limitations

  • Local demo data only; no remote search
  • Reduced motion shows a static full list with no scan
  • Not verified in a browser; the checker owns all evidence

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 cards with touch-scrubbable canvas sparklines.
  • 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…
  • Activity FeedA 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…