Streak Field Stats

Component 5

About

A year-long activity heatmap of small day squares with longest/current streak stats beside it, where touching a day sends a ripple through nearby squares and selecting a streak lights up its run in order.

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

Code

How Streak Field Stats is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import StreakFieldStats from "@/components/ui/streak-field-stats";
import { useMemo } from "react";

/** A repeatable year of runs: rest days, a summer slump, and a long run in spring. */
function year() {
  let s = 20260930;
  const rnd = () => (s = (s * 16807) % 2147483647) / 2147483647;
  return Array.from({ length: 364 }, (_, i) => {
    const summer = i > 250 && i < 320; // July–August heat
    const spring = i >= 196 && i < 219; // a 23-day run
    const recent = i >= 355;
    if (spring || recent) return Math.round(4 + rnd() * 9);
    const rest = rnd() < (summer ? 0.62 : 0.34);
    return rest ? 0 : Math.round(3 + rnd() * (summer ? 5 : 11));
  });
}

export default function Demo() {
  const values = useMemo(year, []);
  return (
    <div className="flex min-h-full w-full items-center justify-center px-4 py-12 bg-[var(--background)] text-[var(--foreground)]">
      <div className="w-full max-w-5xl">
        <StreakFieldStats
          theme="paper"
          values={values}
          end={new Date(Date.UTC(2026, 8, 30))}
          unit="km"
          label="Run Club · your year"
        />
      </div>
    </div>
  );
}