Seismograph Stat

Dashboards

About

A KPI card wired to a seismograph. The paper keeps rolling with a resting tremor. Every change in value sets off a quake sized to the change, shakes the number, counts up to it and leaves a labelled marker on the roll.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Seismograph Stat to your project and fits it to your theme.

Code

How Seismograph Stat is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useEffect, useState } from "react"
import { SeismographStat } from "@/components/ui/seismograph-stat"

const money = (n: number) => `$${Math.round(n).toLocaleString()}`
const ms = (n: number) => `${Math.round(n)} ms`

export default function SeismographStatDemo() {
  const [revenue, setRevenue] = useState(48210)
  const [signups, setSignups] = useState(1204)
  const [latency, setLatency] = useState(182)

  useEffect(() => {
    const a = setInterval(() => setRevenue((v) => v + Math.round((Math.random() - 0.3) * 900)), 2600)
    const b = setInterval(() => setSignups((v) => v + Math.round(Math.random() * 14)), 1900)
    const c = setInterval(() => setLatency((v) => Math.max(60, v + Math.round((Math.random() - 0.5) * 40))), 3300)
    return () => {
      clearInterval(a)
      clearInterval(b)
      clearInterval(c)
    }
  }, [])

  return (
    <div className="flex h-full min-h-[560px] w-full flex-col items-center justify-center gap-6 bg-background p-6">
      <div className="grid w-full max-w-5xl gap-4 md:grid-cols-3">
        <SeismographStat label="Revenue today" value={revenue} format={money} accent="#22c55e" />
        <SeismographStat label="New sign-ups" value={signups} accent="#3b82f6" />
        <SeismographStat label="p95 latency" value={latency} format={ms} accent="#ef4444" />
      </div>
      <button
        onClick={() => setRevenue((v) => Math.round(v * 1.35))}
        className="rounded-full border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-foreground hover:text-background"
      >
        Trigger a revenue spike
      </button>
    </div>
  )
}