MotionMetric

TxMotionMetric preserves 15 catalog variants, all 29 Metrics source capabilities, and all 29 original AnimatedMetricCard interaction branches. Cache allocations, pixel matrices, piano keys, staircase columns, paired bars, barcodes, arcs, area curves, sleep stages and message threads retain independent layouts rather than relabeling one statistic card.

Usage

Full interactive gallery

Select a catalog ID, source capability or original interaction. Switch supplied sample periods and operate chart scrubbers, noise bounds, stage selection, asset filtering and feedback input. Values and status can be edited right in the demo. Details, share, resume, start/pause and send only emit events; the demo appends sample messages locally.

Charts expose keyboard-operable data-point scrubbers by default. The noise lower input is natively bounded by the current upper value, and the upper input by the current lower value, keeping readouts and native thumbs aligned at crossings.

Data and lifecycle

The component does not query network, audio, health, financial or monitoring services, generate stock prices, simulate monitoring/countdowns, or promise notification delivery. The caller updates series, metrics, status, remaining and result models. Missing business data shows an empty state, not fixed readings. Existing SVG/D3 charts, TxStatCard, TxSlider, TxInput, TxButton and TxTextMorph are reused. Shared activity disables value/gauge motion offscreen, in hidden documents, while KeepAlive is inactive and under reduced motion.

API Reference

Props

Data types

Default labels: period: Period, empty: No data for this period, details: View details, share: Share, more: More actions, scrubber: Select a data point, current: Current, target: Target, remaining: Remaining, low: Low, high: High, minimum: Minimum, maximum: Maximum, threshold: Threshold, start: Start, pause: Pause, message: Message, send: Send, all: See all, resume: Resume, analysis: Analysis, average: Average.

Events

Slots

CSS variables

Complete variants and source mapping

15 catalog entries

All 29 source capabilities

Each source path is relative to src/components/metrics/ at pinned upstream commit 43c29ce9cdd16459e3eab4992381b8d35b38776a. The component exports MOTION_METRIC_SOURCE_MAP for programmatic mapping.

Additional AnimatedMetricCard interactions

The 15 catalog interactions above and 14 below comprise all 29 branches. Pass an interaction directly as variant, or use variant="animated-metric-card" with interaction.

Best Practices

• Provide actual data per period and respond to update events in controlled mode. Do not merely relabel a button while reusing an unfiltered series.
• The caller owns timer remaining/total, monitoring state, noise measurements and message delivery. running expresses intent, never backend success.
• Keep readouts, barcode scores, ring progress and chart units consistent with target/min/max/unit. Credit-score composite geometry defaults to 300–850 and can be overridden.
• Give series/metrics/groups/cells stable IDs, real labels and units. Missing points do not generate replacement business data.
• Use level on health sleep points for stage height. Profile segments and flight data render their respective timelines.
• Localize with labels, formatValue and licensed avatar slots. Respect reduced motion; do not add polling or permanent decorative animation.

Source and license

Ported from the pinned Amicro Metrics source implementations. MIT, Copyright (c) 2026 SYED SUBHAN UDDIN. Sample readings exist only in the documentation demo; the component has no business defaults. Build, type checking, documentation gates and real-browser acceptance are owned by integration; this page does not claim they have already run.