LED Matrix

Component

About

A dot matrix sign in a 5 by 7 font for live numbers and messages. Only the dots that change fade, long text scrolls, and sizes run from badge to hero.

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

Code

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

Usage.tsx

"use client"

import * as React from "react"
import { LedMatrix } from "@/components/ui/led-matrix"

/** Steps through `count` states every `ms`, for demo timelines. Stops while the tab is hidden. */
function useTicker(count: number, ms: number) {
  const [i, setI] = React.useState(0)
  React.useEffect(() => {
    const id = window.setInterval(() => {
      if (!document.hidden) setI((v) => (v + 1) % count)
    }, ms)
    return () => window.clearInterval(id)
  }, [count, ms])
  return i
}

// Measured throughput of a streaming response, sampled every 0.8 s.
const rates = [182, 176, 191, 188, 204, 197, 186, 179, 193, 201, 195, 184]

function clock(s: number) {
  return `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(s % 60).padStart(2, "0")}`
}

/** The line under each 21st demo that points back to the kit. */
function MoreOn({ slug, children }: { slug: string; children: React.ReactNode }) {
  return (
    <p className="text-[0.75rem]/[1rem] text-(color:--chatcn-fg-faint) text-center text-balance">
      {children}{" "}
      <a
        href={`https://chatcn.dev/docs/components/${slug}`}
        target="_blank"
        rel="noopener"
        className="text-(color:--chatcn-fg-subtle) hover:text-(color:--chatcn-fg) underline underline-offset-2"
      >
        chatcn.dev
      </a>
    </p>
  )
}

/** A live stats sign: throughput where only changed dots fade, elapsed time and a scrolling run. */
export default function LedMatrixPreview() {
  const tick = useTicker(rates.length, 800)
  const seconds = useTicker(3600, 1000)

  return (
    <div className="flex min-h-[520px] w-full flex-col items-center justify-center gap-10 p-6">
      <div className="bg-(color:--chatcn-inset) rounded-(--chatcn-radius-xl) shadow-(--chatcn-shadow-border) text-(color:--chatcn-fg) @container flex w-full max-w-xl flex-col gap-6 p-6">
        <div className="flex flex-wrap items-end justify-between gap-6">
          <div className="flex flex-col gap-2">
            <span className="text-[0.75rem]/[1rem] text-(color:--chatcn-fg-subtle) font-medium">
              Tokens per second
            </span>
            <LedMatrix value={rates[tick] ?? 0} length={3} size="hero" />
          </div>
          <div className="flex flex-col items-start gap-2 @md:items-end">
            <span className="text-[0.75rem]/[1rem] text-(color:--chatcn-fg-subtle) font-medium">Elapsed</span>
            <LedMatrix value={clock(42 + seconds)} size="lg" className="text-(color:--chatcn-fg-muted)" />
          </div>
        </div>
        <LedMatrix
          value="deploy main to production, 3 of 8 checks passed, 412 tokens streamed"
          length={28}
          scroll
          size="sm"
          className="text-(color:--chatcn-fg-muted)"
        />
      </div>
      <MoreOn slug="led-matrix">Only the dots that change fade. More signs and loaders on</MoreOn>
    </div>
  )
}