# Live Data Command Hero > An editable hero block for operational-data products centered on continuity and changing state. Composes KPI Number Morph (three metrics), Data Refresh State, a small Streaming Data Rows subset, and Filter Result Transition across initial/live/filtering/refreshing/partial-update/stale/error/recovery. App-controlled, clearly-fictional demo data. SSR-safe, reduced-motion-safe. A shadcn/ui block from the [@motiq](https://motiq.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/motiq/live-data-command-hero). - Page, with a live preview: https://shadcn.exchange/r/motiq/live-data-command-hero - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/motiq/live-data-command-hero-light-1a972aa7314f6eb6.png - Registry item: https://motiq.dev/r/live-data-command-hero.json - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/motiq/live-data-command-hero.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `motion` - Registry items: `https://motiq.dev/r/kpi-number-morph.json`, `https://motiq.dev/r/data-refresh-state.json`, `https://motiq.dev/r/streaming-data-rows.json`, `https://motiq.dev/r/filter-result-transition.json`, `https://motiq.dev/r/utils.json`, `https://motiq.dev/r/primitives.json` ## Files ### `registry/blocks/live-data-command-hero.tsx` ```tsx "use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { useReducedMotion, useControllableState, statusVars, type StatusTone, } from "@/lib/motiq"; import { KpiNumberMorph } from "@/components/motiq/kpi-number-morph"; import { DataRefreshState, type RefreshState, } from "@/components/motiq/data-refresh-state"; import { StreamingDataRows, type Column, type StreamingTableState, } from "@/components/motiq/streaming-data-rows"; import { FilterResultTransition, type ActiveFilter, type FilterResultState, } from "@/components/motiq/filter-result-transition"; /** * LiveDataCommandHero — an editable hero block for operational-data products. * Instead of a static KPI screenshot, a wide copy band sits above a full-width * *live surface*: three morphing KPIs, the current refresh state, a small live * subset of signals, and one active filter — all driven by a single phase the * app owns. On wide screens the watched signals and the live feed tile into two * columns so the hero holds a calm height. The point is continuity and changing * state over time, at reduced complexity: it is a hero framing, not a full * analytics dashboard. * * IMPORTANT — DEMO ONLY. Every signal, region, metric, and timestamp below is * fictional and provider-neutral; nothing here talks to a real backend. Rewire * `dataset` and `phase` to your own telemetry. * * Determinism: no `Date.now()` / `Math.random()` / `new Date()` at module scope, * during render, or in initializers. Every snapshot derives from a fixed baseline * via a pure wobble; timestamps come from fixed epoch constants; the only motion * over time is a client-only "live" tick that pauses offscreen and under reduced * motion. Server and first client render are identical. Clean-room original. */ /* -------------------------------------------------------------------------- */ /* Public types */ /* -------------------------------------------------------------------------- */ /** The lifecycle the host application drives; the block maps it onto the surface. */ export type DataHeroPhase = | "initial" | "live" | "filtering" | "refreshing" | "partial-update" | "stale" | "error" | "recovery"; export type SignalStatus = "healthy" | "degraded" | "critical"; export interface HeroSignal { /** Stable identity — the key to smooth insert / update / resort. */ id: string; name: string; region: string; /** Priority band; the demo filter narrows to tier-1. */ tier: "tier-1" | "tier-2"; status: SignalStatus; /** Events per minute. */ throughput: number; /** p95 latency in milliseconds. */ latency: number; /** Error rate as a percentage (0.34 = 0.34%). */ errorRate: number; } /** A hero call to action. Renders as a link when `href` is set, else a button. */ export interface HeroCta { label: string; href?: string; onClick?: () => void; } export interface LiveDataCommandHeroProps extends Omit, "onChange"> { /** Outcome headline (a real heading). */ headline?: React.ReactNode; /** Supporting copy under the headline. */ copy?: React.ReactNode; /** Small label above the headline. */ eyebrow?: React.ReactNode; primaryCta?: HeroCta; secondaryCta?: HeroCta; /** Controlled lifecycle phase. */ phase?: DataHeroPhase; /** Initial phase when uncontrolled. */ defaultPhase?: DataHeroPhase; onPhaseChange?: (phase: DataHeroPhase) => void; /** The baseline signals (the app owns this). Snapshots derive from it. */ dataset?: HeroSignal[]; /** Decorative background slot rendered behind the hero (not imported here). */ background?: React.ReactNode; /** Force the static, reduced-motion presentation. */ reducedMotion?: boolean; className?: string; } /* -------------------------------------------------------------------------- */ /* Fixed, deterministic demo data */ /* -------------------------------------------------------------------------- */ // Fixed epoch anchors so the server-rendered first paint is deterministic. The // live tick advances motion only — never wall-clock now(). const BASE_TS = 1_700_000_000_000; const NOW = BASE_TS + 4 * 60 * 1000; // stable reference "now" (4m after baseline) const REFRESH_INTERVAL = 20_000; const LIVE_TICK_MS = 2600; const DEFAULT_DATASET: HeroSignal[] = [ { id: "sig-ingest", name: "Ingest Gateway", region: "us-east", tier: "tier-1", status: "healthy", throughput: 42600, latency: 84, errorRate: 0.12 }, { id: "sig-stream", name: "Stream Processor", region: "us-east", tier: "tier-1", status: "healthy", throughput: 38100, latency: 132, errorRate: 0.34 }, { id: "sig-index", name: "Index Builder", region: "eu-west", tier: "tier-2", status: "degraded", throughput: 15900, latency: 268, errorRate: 1.90 }, { id: "sig-archive", name: "Cold Archive", region: "ap-south", tier: "tier-2", status: "healthy", throughput: 6300, latency: 410, errorRate: 0.08 }, ]; // Each phase gets a distinct snapshot offset so switching phases produces a // visible morph even without the ambient tick. const PHASE_K: Record = { initial: 0, live: 0, filtering: 1, refreshing: 2, "partial-update": 3, stale: 4, error: 5, recovery: 6, }; /** Deterministic small signed offset in [-span, span] from stable indices. */ function wobble(i: number, k: number, span: number): number { const period = 2 * span + 1; return ((((i * 31 + k * 17 + 7) % period) + period) % period) - span; } const round2 = (n: number) => Math.round(n * 100) / 100; function statusFor(errorRate: number): SignalStatus { if (errorRate > 5) return "critical"; if (errorRate > 1.5) return "degraded"; return "healthy"; } /** * A pure snapshot: nudges each signal's metrics by a deterministic wobble so * refreshing produces visible morphs. `subset` limits the change to a few rows * (partial update); untouched rows are returned unchanged. */ function snapshotAt(base: HeroSignal[], k: number, subset?: (i: number) => boolean): HeroSignal[] { return base.map((r, i) => { if (subset && !subset(i)) return r; const throughput = Math.max(0, Math.round(r.throughput + wobble(i, k, 4) * Math.max(1, Math.round(r.throughput * 0.03)))); const latency = Math.max(12, r.latency + wobble(i, k + 3, 3) * 6); const errorRate = Math.max(0, round2(r.errorRate + wobble(i, k + 5, 3) * 0.22)); return { ...r, throughput, latency, errorRate, status: statusFor(errorRate) }; }); } interface Aggregate { throughput: number; latency: number; errorRate: number; } function aggregate(rows: HeroSignal[]): Aggregate { if (rows.length === 0) return { throughput: 0, latency: 0, errorRate: 0 }; const throughput = rows.reduce((s, r) => s + r.throughput, 0); const latency = Math.round(rows.reduce((s, r) => s + r.latency, 0) / rows.length); // Throughput-weighted error rate — the number an operator actually watches. const weighted = rows.reduce((s, r) => s + r.errorRate * r.throughput, 0); const errorRate = throughput > 0 ? round2(weighted / throughput) : 0; return { throughput, latency, errorRate }; } /* -------------------------------------------------------------------------- */ /* Status badge — tone via glyph + label, never color alone */ /* -------------------------------------------------------------------------- */ const STATUS_TONE: Record = { healthy: "success", degraded: "warning", critical: "error", }; const STATUS_LABEL: Record = { healthy: "Healthy", degraded: "Degraded", critical: "Critical", }; function StatusBadge({ status }: { status: SignalStatus }) { const vars = statusVars(STATUS_TONE[status]); return ( {status === "healthy" ? ( ) : status === "degraded" ? ( ) : ( )} {STATUS_LABEL[status]} ); } const fmtThroughput = (n: number): string => new Intl.NumberFormat(undefined, { notation: "compact", maximumFractionDigits: 1 }).format(n); /* -------------------------------------------------------------------------- */ /* CTA rendering */ /* -------------------------------------------------------------------------- */ const focusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus,var(--color-accent))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg)]"; function CtaLink({ cta, variant }: { cta: HeroCta; variant: "primary" | "secondary" }) { const className = cn( // Full-bleed, equal-width, 44px-tall on phones; from `sm` the original // intrinsic-width pill, unchanged. "inline-flex min-h-[44px] w-full items-center justify-center gap-1.5 rounded-xl px-5 py-2.5 text-[14px] font-semibold transition-colors @md/hero:min-h-0 @md/hero:w-auto", focusRing, variant === "primary" ? "border border-[color-mix(in_oklab,var(--color-accent)_55%,black)] bg-[linear-gradient(180deg,color-mix(in_oklab,var(--color-accent)_86%,white)_0%,var(--color-accent)_60%)] text-[var(--color-accent-foreground,white)] shadow-[0_1px_0_0_color-mix(in_oklab,white_45%,transparent)_inset,0_8px_22px_-10px_color-mix(in_oklab,var(--color-accent)_80%,transparent)] transition-[transform,filter] hover:brightness-[1.06] motion-safe:hover:-translate-y-px" : "border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-fg)] hover:border-[var(--color-accent)] hover:text-[var(--color-accent)]", ); if (cta.href) { return ( {cta.label} ); } return ( ); } /* -------------------------------------------------------------------------- */ /* Offscreen pause — keep continuous motion out of view idle */ /* -------------------------------------------------------------------------- */ /** * SSR-safe "is this a phone-width viewport" flag. Starts `false` so the server * and the first client render agree; it only ever *adds* narrow-viewport * affordances after mount. Used strictly for behaviour that CSS cannot express * (keyboard reachability of the metric rail) — every layout change is CSS. */ function useNarrowViewport(): boolean { const [narrow, setNarrow] = React.useState(false); React.useEffect(() => { if (typeof window === "undefined" || typeof window.matchMedia !== "function") return; const mq = window.matchMedia("(max-width: 639.98px)"); const update = () => setNarrow(mq.matches); update(); mq.addEventListener("change", update); return () => mq.removeEventListener("change", update); }, []); return narrow; } function useInView(ref: React.RefObject): boolean { // Defaults to true so the very first paint (and any non-IO environment such as // jsdom/SSR) renders the surface as visible; the observer only narrows it. const [inView, setInView] = React.useState(true); React.useEffect(() => { const node = ref.current; if (!node || typeof IntersectionObserver === "undefined") return; const io = new IntersectionObserver( (entries) => setInView(entries.some((e) => e.isIntersecting)), { threshold: 0 }, ); io.observe(node); return () => io.disconnect(); }, [ref]); return inView; } /* -------------------------------------------------------------------------- */ /* Shared shell — ambient backdrop + capability proof strip */ /* -------------------------------------------------------------------------- */ /** Decorative, static, token-based ambient field — soft accent glows + a fading * dot grid. Purely visual: aria-hidden, no motion, no browser globals. Renders * only when the consumer provides no `background` of their own. */ function HeroBackdrop() { return (
); } const DEFAULT_PROOF: string[] = [ "Metrics that morph in place, never a reload", "Refresh state you can actually see", "Streaming signals, filtered live", ]; /** Three short capability lines that give the copy region substance beside the * live surface. Text-only; the check glyph is decorative. */ function ProofStrip({ items }: { items: string[] }) { return (
    {items.map((t) => (
  • {t}
    • ))}
); } /* -------------------------------------------------------------------------- */ /* Metric rail — snap carousel on phones, the original 3-up grid from `sm` */ /* -------------------------------------------------------------------------- */ /** * Three KPI tiles cost ~300px stacked on a phone, and squeezing them into * columns shrinks the numbers past legibility. Below `sm` they become one * snap-scrolling rail — one tile at full size is the hero's focal moment, the * other two are a swipe (or an arrow key) away, and a dot row makes that * obvious. From `sm` up the container is the original `grid-cols-3`, so the * desktop composition is byte-for-byte what it was. */ function MetricRail({ label, tiles }: { label: string; tiles: React.ReactNode[] }) { const railRef = React.useRef(null); const [active, setActive] = React.useState(0); // Only the narrow layout actually scrolls, so only there is the rail a // focusable region — desktop keeps its original tab order. const narrow = useNarrowViewport(); const handleScroll = React.useCallback(() => { const el = railRef.current; if (!el || tiles.length === 0) return; const step = el.scrollWidth / tiles.length; if (step <= 0) return; setActive(Math.max(0, Math.min(tiles.length - 1, Math.round(el.scrollLeft / step)))); }, [tiles.length]); return (
{tiles.map((tile, i) => ( // `grid` (not `flex`) so the tile stretches on both axes and fills its // slot exactly as it did when the tiles were grid children themselves.
{tile}
))}
{/* Pagination affordance — decorative; the rail itself carries the label. */}
{tiles.map((_, i) => ( ))}
); } /* -------------------------------------------------------------------------- */ /* Main block */ /* -------------------------------------------------------------------------- */ export function LiveDataCommandHero({ headline = "See your data change the moment it does", copy = "A command surface for operational data - live metrics, refresh state, and streaming signals that morph in place, so your team reads change instead of chasing it.", eyebrow = "Operational data platform", primaryCta = { label: "Start monitoring" }, secondaryCta = { label: "Book a walkthrough" }, phase: phaseProp, defaultPhase = "live", onPhaseChange, dataset = DEFAULT_DATASET, background, reducedMotion, className, ...rest }: LiveDataCommandHeroProps) { const systemReduce = useReducedMotion(); const reduce = reducedMotion ?? systemReduce; const [phase] = useControllableState({ value: phaseProp, defaultValue: defaultPhase, onChange: onPhaseChange, }); const base = React.useMemo(() => dataset, [dataset]); /* --- ambient "live" tick: real continuity, paused offscreen / reduced ---- */ const rootRef = React.useRef(null); const inView = useInView(rootRef); const [tick, setTick] = React.useState(0); const running = phase === "live" && !reduce && inView; React.useEffect(() => { if (!running) return; const id = setInterval(() => setTick((t) => t + 1), LIVE_TICK_MS); return () => clearInterval(id); }, [running]); /* --- derived snapshots -------------------------------------------------- */ const k = tick + PHASE_K[phase]; const data = React.useMemo( () => snapshotAt(base, k, phase === "partial-update" ? (i) => i % 2 === 0 : undefined), [base, k, phase], ); const prevData = React.useMemo(() => snapshotAt(base, Math.max(0, k - 1)), [base, k]); const agg = React.useMemo(() => aggregate(data), [data]); const prevAgg = React.useMemo(() => aggregate(prevData), [prevData]); /* --- active filter (the "one active filter" state) ---------------------- */ const filtering = phase === "filtering"; const activeFilters: ActiveFilter[] = filtering ? [{ id: "tier-1", group: "Priority", label: "Tier-1" }] : []; const watchlist = React.useMemo( () => (filtering ? data.filter((r) => r.tier === "tier-1") : data), [data, filtering], ); /* --- phase → component state -------------------------------------------- */ const isInitial = phase === "initial"; const isError = phase === "error"; const cellState: "idle" | "loading" | "error" = isInitial ? "loading" : isError ? "error" : "idle"; const tableState: StreamingTableState = cellState; const filterState: FilterResultState = cellState; const kpiState: "idle" | "loading" | "error" = cellState; // Freeze morphs while stale so a frozen dataset never implies live movement. const tablePaused = phase === "stale"; const refreshState: RefreshState = ((): RefreshState => { switch (phase) { case "initial": return "checking"; case "refreshing": return "refreshing"; case "partial-update": return "partially_updated"; case "stale": return "stale"; case "error": return "error"; case "recovery": return "success"; default: return "idle"; } })(); const changedCount = phase === "partial-update" ? base.filter((_, i) => i % 2 === 0).length : base.length; /* --- table columns ------------------------------------------------------ */ const columns = React.useMemo[]>( () => [ { key: "name", header: "Signal", value: (r) => r.name, render: (r) => ( {r.name} {r.region} ), }, { key: "status", header: "Status", value: (r) => r.status, render: (r) => , }, { key: "throughput", header: "Events/min", align: "end", numeric: true, value: (r) => r.throughput, format: fmtThroughput, }, { key: "errorRate", header: "Errors", align: "end", numeric: true, value: (r) => r.errorRate, format: (n) => `${n.toFixed(2)}%`, }, ], [], ); const getRowId = React.useCallback((r: HeroSignal) => r.id, []); const getItemId = React.useCallback((r: HeroSignal) => r.id, []); /* --- narrow-viewport disclosure for the watchlist ------------------------ */ // On a phone the watchlist and the live feed show the same four signals, so // stacking both is ~300px of duplication. The feed stays the focal surface and // the watchlist collapses behind a real disclosure (CSS keeps it open from // `sm` up, so the desktop two-column composition never changes). const watchlistPanelId = `${React.useId()}-watchlist`; const [watchlistOpen, setWatchlistOpen] = React.useState(false); return (
{background ? (
{background}
) : ( )} {/* `max-[360px]` trims the padding chain on the smallest phones only, where four nested paddings otherwise eat ~45% of the viewport. */}
{/* Copy band — headline/copy on one side, CTAs + live status on the other, so the marketing row reads wide instead of a thin column. */} {/* The side-by-side copy/CTA split only earns its keep once the container can give the headline a real measure — below ~900px it produced a four-line headline beside dead space, so it stacks instead. */}
{eyebrow ? ( {eyebrow} ) : null} {/* The `sm` expression is the original desktop clamp, untouched; the unprefixed one is a phone-first scale so the headline never lands at a size that costs it two extra lines. */} {/* cqw, not vw: sized off the container. A vw-based clamp gave a ~50px headline inside a 780px column on a 1440px screen, which is what pushed it to four cramped lines. */}

{headline}

{copy ? (

{copy}

) : null}
{primaryCta ? : null} {secondaryCta ? : null}
{phase === "live" && !reduce ? ( ) : null} Live signals
{/* Proof row — three capability lines that carry the copy region. */}
{/* Signal command — a full-width app window. On wide screens the watched signals and the live feed tile into two columns so the hero holds a calm height. No overflow/max-height clip: the composed children run Framer `layout` animations that collapse inside a constrained scroll ancestor. */}
{/* Window header --------------------------------------------- */}
{/* Window-chrome dots are pure decoration; a phone needs the room. */} Signal command demo-stream · fictional Demo data
{/* Refresh state — full-width strip. It brings its own bordered shell, so it is not wrapped in a second one. */} {/* Three KPIs — a snap rail on phones, a 3-up row from `sm`. */} , , , ]} /> {/* Watched signals · live feed — two tiled columns */}
{/* Narrow-container disclosure. The panel is unconditionally shown once the container passes @2xl, so this control simply does not exist at widths that can afford both tiles. */}
items={watchlist} getItemId={getItemId} layout="list" state={filterState} regionLabel="Watched signals" activeFilters={activeFilters} loadingCount={3} error="Couldn't load signals - the endpoint is unavailable." resultLabel={(n) => ( <> {n}{" "} {n === 1 ? "signal watched" : "signals watched"} )} renderItem={(r) => (
{/* Wraps to two lines rather than eliding to "R…". */} {r.name} {r.region}
)} />
rows={data} columns={columns} getRowId={getRowId} state={tableState} paused={tablePaused} loadingRows={3} caption="Live per-signal operational metrics" emptyContent="No signals match this view." errorContent="Live feed unavailable - the endpoint timed out." renderMobileRow={(r) => ( // Each stacked row is a labelled key/value block. Every // label sits in the same unwrappable span as its value, so // a narrow card wraps whole pairs onto the next line // instead of stranding single words (or a separator).
{r.name}
Region
{r.region}
Events
{fmtThroughput(r.throughput)}
Errors
{r.errorRate.toFixed(2)}%
)} />
{/* Honesty footer ------------------------------------------- */}

Demo data - fictional signals, no live backend.

); } export default LiveDataCommandHero; ```