"use client"; import { useMemo, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Activity } from "lucide-react"; import { cn } from "@/lib/utils"; const ROWS = 7; const CELL = 14; const GAP = 4; const STEP = CELL + GAP; const LABEL_TOP = 22; const LABEL_LEFT = 30; const WAVE = 3.4; const DAY_MS = 86_400_000; const MONTHS = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ]; const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; // Increasing violet ramp, level 0 = empty. const LEVEL_BG = [ "rgba(255,255,255,0.045)", "rgba(124,108,255,0.22)", "rgba(124,108,255,0.42)", "rgba(124,108,255,0.66)", "rgba(140,124,255,0.95)", ]; function round(n: number, p = 2) { const f = 10 ** p; return Math.round(n * f) / f; } // Deterministic hash noise in [0,1). function seeded(n: number) { const x = Math.sin(n * 12.9898 + 78.233) * 43758.5453123; return x - Math.floor(x); } function withCommas(n: number) { return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ","); } type Cell = { col: number; row: number; count: number; level: number; label: string; inDelay: number; waveDelay: number; waveAlpha: number; }; type HeatmapModel = { cells: Cell[]; months: { col: number; label: string }[]; total: number; streak: number; }; function buildModel(weeks: number, seed: number): HeatmapModel { const cols = weeks; const maxP = cols - 1 + (ROWS - 1); const anchor = Date.UTC(2025, 11, 31); // fixed, deterministic (Dec 31 2025 UTC) const cellAt = (col: number, row: number) => { const offset = (cols - 1 - col) * 7 + (6 - row); return new Date(anchor - offset * DAY_MS); }; const cells: Cell[] = []; const grid: number[][] = []; for (let col = 0; col < cols; col++) { grid[col] = []; for (let row = 0; row < ROWS; row++) { const r = seeded(col * 31 + row * 7 + seed * 101); const zero = seeded(col * 17 + row * 53 + seed * 13 + 7); const count = zero < 0.3 ? 0 : Math.round(r ** 1.9 * 17); const level = count === 0 ? 0 : count < 4 ? 1 : count < 8 ? 2 : count < 12 ? 3 : 4; const d = cellAt(col, row); const label = `${WEEKDAYS[d.getUTCDay()]}, ${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}`; grid[col][row] = count; cells.push({ col, row, count, level, label, inDelay: round((col + row) * 0.02, 2), waveDelay: round(((col + row) / maxP) * WAVE, 2), waveAlpha: round(0.12 + level * 0.14, 2), }); } } // Month labels along the top, min 2-column spacing so they never collide. const months: { col: number; label: string }[] = []; let lastMonth = -1; let lastCol = -99; for (let col = 0; col < cols; col++) { const m = cellAt(col, 0).getUTCMonth(); if (m !== lastMonth && col - lastCol >= 2) { months.push({ col, label: MONTHS[m] }); lastMonth = m; lastCol = col; } } // Total contributions. let total = 0; for (const c of cells) total += c.count; // Longest active-day streak, chronological (col asc, row asc == date asc). let streak = 0; let run = 0; for (let col = 0; col < cols; col++) { for (let row = 0; row < ROWS; row++) { if (grid[col][row] > 0) { run += 1; if (run > streak) streak = run; } else { run = 0; } } } return { cells, months, total, streak }; } export function ActivityHeatmap({ weeks = 20, seed = 7, title = "Contribution activity", className, }: { weeks?: number; seed?: number; title?: string; className?: string; }) { const model = useMemo(() => buildModel(weeks, seed), [weeks, seed]); const [hover, setHover] = useState<{ col: number; row: number } | null>(null); const gridW = weeks * STEP - GAP; const gridH = ROWS * STEP - GAP; const boardW = LABEL_LEFT + gridW; const boardH = LABEL_TOP + gridH; const active = hover ? model.cells.find((c) => c.col === hover.col && c.row === hover.row) ?? null : null; const css = ` .ah-cell{animation:ah-in .5s cubic-bezier(.16,1,.3,1) both;transform-origin:center;} .ah-wave{opacity:0;animation:ah-wave ${WAVE}s linear infinite;} @keyframes ah-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}} @keyframes ah-wave{0%,100%{opacity:0}10%{opacity:1}26%{opacity:0}} @media (prefers-reduced-motion: reduce){ .ah-cell{animation:none!important;opacity:1!important;transform:none!important;} .ah-wave{animation:none!important;opacity:0!important;} }`; return ( {/* soft brand glow, top-left */}

{/* header */}

{title}

{model.streak}-day best streak

{withCommas(model.total)}

contributions

{/* board */}

setHover(null)} > {/* month labels */} {model.months.map((m) => ( {m.label} ))} {/* weekday labels (Mon / Wed / Fri) */} {[1, 3, 5].map((row) => ( {WEEKDAYS[row]} ))} {/* cells */} {model.cells.map((c) => { const isHover = hover?.col === c.col && hover?.row === c.row; const base = c.level >= 4 ? "0 0 10px rgba(124,108,255,0.4)" : c.level === 0 ? "inset 0 0 0 1px rgba(255,255,255,0.03)" : "none"; const shadow = isHover ? `0 0 0 1.5px rgba(255,255,255,0.85), 0 0 10px rgba(124,108,255,0.4)` : base; return (

setHover({ col: c.col, row: c.row })} >

); })} {/* tooltip */} {active && ( {active.count === 0 ? "No contributions" : `${active.count} contribution${active.count === 1 ? "" : "s"}`} · {active.label} )}

{/* legend */}

Less {LEVEL_BG.map((bg, i) => ( ))} More

); } export default function Demo() { return (

); }

Activity Heatmap

Contribution activity