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.
"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-[#141217] text-[#efe8dc]">
<div className="w-full max-w-5xl">
<StreakFieldStats
theme="night"
values={values}
end={new Date(Date.UTC(2026, 8, 30))}
unit="km"
label="Run Club · your year"
/>
</div>
</div>
);
}
