Usage analytics — Dither Kit study

The prompt that produced this. Re-run it to generate more in the same taste.

Aesthetic

dark operator console — compact telemetry, squared geometry, phosphor colour, dithered signal fields, restrained bloom

Reference

https://www.tripwire.sh/dither-kit

Intent

compare OmniRoute’s current flat weekly-usage treatment with a Dither Kit candidate using the same data and density

Guardrails

always show both treatments against identical data, keep values available as semantic table data, reserve glow and texture for the candidate chart

never replace dense operational data with decoration, hide the comparison behind tabs, depend on colour alone to distinguish series

pnpm dlx shadcn@latest add http://localhost:3040/r/usage-analytics-dither-study.json

Meta block and library type import stripped - this is what pastes cleanly elsewhere.

import { Bar } from '@/components/dither-kit/bar'
import { BarChart } from '@/components/dither-kit/bar-chart'
import type { ChartConfig } from '@/components/dither-kit/chart-context'
import { Grid } from '@/components/dither-kit/grid'
import { Legend } from '@/components/dither-kit/legend'
import { Tooltip } from '@/components/dither-kit/tooltip'
import { XAxis } from '@/components/dither-kit/x-axis'
import { YAxis } from '@/components/dither-kit/y-axis'

const DATA = [
  { day: 'Mon', input: 118, output: 64 },
  { day: 'Tue', input: 176, output: 82 },
  { day: 'Wed', input: 143, output: 96 },
  { day: 'Thu', input: 224, output: 112 },
  { day: 'Fri', input: 198, output: 104 },
  { day: 'Sat', input: 96, output: 48 },
  { day: 'Sun', input: 132, output: 76 },
]

const CONFIG = {
  input: { label: 'Input', color: 'blue' },
  output: { label: 'Output', color: 'green' },
} satisfies ChartConfig

const MAX_TOTAL = Math.max(...DATA.map((point) => point.input + point.output))

function formatTokens(value: number) {
  return `${value}k`
}

function AccessibleUsageTable() {
  return (
    <table className="sr-only">
      <caption>Daily input and output token usage, in thousands</caption>
      <thead>
        <tr>
          <th scope="col">Day</th>
          <th scope="col">Input tokens</th>
          <th scope="col">Output tokens</th>
        </tr>
      </thead>
      <tbody>
        {DATA.map((point) => (
          <tr key={point.day}>
            <th scope="row">{point.day}</th>
            <td>{point.input} thousand</td>
            <td>{point.output} thousand</td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

function FlatWeeklyChart() {
  return (
    <div className="flex h-60 items-end gap-3 border-white/8 border-b px-2 pb-7" aria-hidden>
      {DATA.map((point) => {
        const total = point.input + point.output
        return (
          <div key={point.day} className="flex h-full min-w-0 flex-1 flex-col justify-end">
            <div
              className="flex w-full flex-col justify-end overflow-hidden rounded-[3px_3px_0_0] bg-white/5"
              style={{ height: `${(total / MAX_TOTAL) * 100}%` }}
            >
              <div
                className="w-full bg-emerald-400/65"
                style={{ height: `${(point.output / total) * 100}%` }}
              />
              <div
                className="w-full bg-sky-400/65"
                style={{ height: `${(point.input / total) * 100}%` }}
              />
            </div>
            <span className="-mb-6 mt-2 text-center font-mono text-[9px] text-slate-500">
              {point.day}
            </span>
          </div>
        )
      })}
    </div>
  )
}

function DitherWeeklyChart() {
  return (
    <div className="h-60" aria-hidden>
      <BarChart
        data={DATA}
        config={CONFIG}
        stackType="stacked"
        bloom="low"
        bloomOnHover
        margins={{ top: 34, right: 10, bottom: 24, left: 34 }}
      >
        <Grid />
        <XAxis dataKey="day" />
        <YAxis tickFormatter={formatTokens} />
        <Legend align="left" isClickable />
        <Tooltip labelKey="day" valueFormatter={formatTokens} variant="frosted-glass" />
        <Bar dataKey="input" variant="hatched" />
        <Bar dataKey="output" variant="gradient" />
      </BarChart>
    </div>
  )
}

function StudyCard({
  eyebrow,
  title,
  description,
  children,
}: {
  eyebrow: string
  title: string
  description: string
  children: React.ReactNode
}) {
  return (
    <article className="overflow-hidden rounded-xl border border-white/8 bg-[#111722]">
      <header className="border-white/8 border-b px-5 py-4">
        <p className="font-mono text-[9px] text-slate-500 uppercase tracking-[0.2em]">{eyebrow}</p>
        <div className="mt-1.5 flex items-baseline justify-between gap-4">
          <h2 className="font-medium text-[15px] text-slate-100 tracking-[-0.01em]">{title}</h2>
          <span className="shrink-0 font-mono text-[9px] text-slate-600">7 DAYS</span>
        </div>
        <p className="mt-1 max-w-md text-[11px] text-slate-500 leading-relaxed">{description}</p>
      </header>
      <div className="px-4 pt-4 pb-3">{children}</div>
    </article>
  )
}

export default function UsageAnalyticsDitherStudy() {
  return (
    <main className="min-h-[100dvh] bg-[#070b12] px-4 py-8 text-slate-100 sm:px-8 lg:px-12">
      <div className="mx-auto max-w-6xl">
        <header className="flex flex-col gap-5 border-white/8 border-b pb-6 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <p className="font-mono text-[10px] text-rose-400 uppercase tracking-[0.22em]">
              OmniRoute / component study 01
            </p>
            <h1 className="mt-2 font-semibold text-2xl tracking-[-0.035em] sm:text-3xl">
              Weekly token activity
            </h1>
            <p className="mt-2 max-w-2xl text-[13px] text-slate-400 leading-relaxed">
              One data set, two rendering languages. The candidate should add signal without making
              the operator work harder.
            </p>
          </div>
          <div className="grid grid-cols-3 divide-x divide-white/8 rounded-lg border border-white/8 bg-[#0d121c]">
            {[
              ['1.81M', 'tokens'],
              ['68.2%', 'input'],
              ['$0.31', 'cost'],
            ].map(([value, label]) => (
              <div key={label} className="px-4 py-3">
                <div className="font-mono text-[14px] text-slate-100 tabular-nums">{value}</div>
                <div className="mt-0.5 font-mono text-[8px] text-slate-600 uppercase tracking-wider">
                  {label}
                </div>
              </div>
            ))}
          </div>
        </header>

        <section className="mt-6 grid gap-5 lg:grid-cols-2" aria-label="Chart treatment comparison">
          <StudyCard
            eyebrow="Baseline"
            title="Flat stacked bars"
            description="Fast, quiet, and familiar. The texture carries no information beyond series colour."
          >
            <FlatWeeklyChart />
          </StudyCard>

          <StudyCard
            eyebrow="Candidate"
            title="Dithered stacked bars"
            description="Pattern, bloom, and scrub affordance make the telemetry feel native to a technical cockpit."
          >
            <DitherWeeklyChart />
          </StudyCard>
        </section>

        <AccessibleUsageTable />

        <footer className="mt-5 grid gap-px overflow-hidden rounded-lg border border-white/8 bg-white/8 sm:grid-cols-3">
          {[
            ['Read', 'Pattern separates series before colour is parsed.'],
            ['Feel', 'Low bloom adds energy without entering game-UI territory.'],
            ['Gate', 'Ship only if bundle and interaction tests remain neutral.'],
          ].map(([label, copy]) => (
            <div key={label} className="bg-[#0d121c] px-4 py-3">
              <span className="font-mono text-[9px] text-rose-400 uppercase tracking-wider">
                {label}
              </span>
              <p className="mt-1 text-[11px] text-slate-500 leading-relaxed">{copy}</p>
            </div>
          ))}
        </footer>
      </div>
    </main>
  )
}