headreel 1.6.0 → 1.7.1

package/README.md

@@ -120,6 +120,24 @@ Set the style with `style: <name>` in the Action, or `--style <name>` in the com
 <tr>
 <td>
 
+### Spec Sheet
+
+`spec-sheet`: your GitHub profile as a printed spec card on grid paper. Your avatar renders as a monochrome halftone portrait that dissolves and rebuilds dot by dot, next to a stats table (followers, stars, repos, contributions) and your name as the headline.
+
+![Spec Sheet banner](https://raw.githubusercontent.com/arifszn/headreel/main/docs/samples/spec-sheet.gif)
+
+| Option   | Default | Description                                                                         |
+| -------- | ------- | ----------------------------------------------------------------------------------- |
+| `accent` | `gray`  | Eyebrow, tagline, website and cursor: `gray`, `teal`, `cobalt`, `violet`, `sienna`. |
+
+</td>
+</tr>
+</table>
+
+<table>
+<tr>
+<td>
+
 ### Highlights Reel
 
 `highlights-reel`: a few profile facts, each on its own card, filmed by one camera. The camera travels between the cards, pushes into your busiest week, and ends on a wide shot of the whole reel.

package/dist/core/data/spec-sheet.js

@@ -0,0 +1,171 @@
+import { createCanvas, loadImage } from '@napi-rs/canvas';
+import { z } from 'zod';
+import { contributionWindow } from './contributions.js';
+// The card's own query: the profile (avatar, followers, account age), the
+// owned public non-fork repositories paged by 100 (the connection's
+// totalCount is the repo count, the nodes' stars are summed), and the
+// 365-day calendar total, so it matches the other styles. Field names
+// checked against the live GraphQL schema (2026-09-19).
+const QUERY = /* GraphQL */ `
+  query SpecSheet($login: String!, $from: DateTime!, $to: DateTime!, $after: String) {
+    user(login: $login) {
+      avatarUrl(size: 256)
+      createdAt
+      followers {
+        totalCount
+      }
+      repositories(
+        first: 100
+        ownerAffiliations: OWNER
+        isFork: false
+        privacy: PUBLIC
+        after: $after
+      ) {
+        totalCount
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+        nodes {
+          stargazerCount
+        }
+      }
+      contributionsCollection(from: $from, to: $to) {
+        contributionCalendar {
+          totalContributions
+        }
+      }
+    }
+  }
+`;
+/** Repositories per page; GitHub caps `first` at 100. */
+export const REPO_PAGE_SIZE = 100;
+/** Pages fetched before the star sum stops: 1,000 repositories. */
+export const REPO_PAGES_MAX = 10;
+/** Avatar download limit: a stalled image host must not hang the run. */
+const AVATAR_TIMEOUT_MS = 15_000;
+/** The avatar is reduced to this square luma grid before it is stored. */
+export const AVATAR_GRID = 64;
+const lumaBytes = AVATAR_GRID * AVATAR_GRID;
+const avatarSchema = z.object({
+    size: z.literal(AVATAR_GRID),
+    /** The grid's bytes, base64: luma 0 (black) to 255 (white), row-major. */
+    luma: z
+        .string()
+        .base64()
+        .refine((s) => Buffer.from(s, 'base64').length === lumaBytes, {
+        message: `luma must decode to ${lumaBytes} bytes`,
+    }),
+});
+export const specSheetSchema = z.object({
+    /** Fetch date (= window end), YYYY-MM-DD (UTC). */
+    asOf: z.iso.date(),
+    /** Account creation date, YYYY-MM-DD. */
+    createdAt: z.iso.date(),
+    followers: z.number().int().min(0),
+    /** Stars summed over the fetched owned public non-fork repositories. */
+    stars: z.number().int().min(0),
+    /** The repositories connection's totalCount under the same filters. */
+    repos: z.number().int().min(0),
+    /** The calendar's total over the 365-day window, as the other styles show. */
+    contributions: z.number().int().min(0),
+    /** Null when the avatar could not be fetched; the render draws a sphere. */
+    avatar: avatarSchema.nullable(),
+});
+/** Rec. 709 luma of a flattened pixel, 0 to 255. */
+function lumaOf(r, g, b) {
+    return Math.round(0.2126 * r + 0.7152 * g + 0.0722 * b);
+}
+/**
+ * Flattens the avatar on white (they can be transparent) and area-averages it
+ * into the luma grid: each cell holds the mean luma of its rectangle of
+ * source pixels, drawn at natural size so no scaling filter is involved. The
+ * render reads only the grid, so decoding differences never reach the output.
+ */
+export function normalizeAvatar(img) {
+    const w = Math.max(1, img.width);
+    const h = Math.max(1, img.height);
+    const canvas = createCanvas(w, h);
+    const ctx = canvas.getContext('2d');
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(0, 0, w, h);
+    ctx.drawImage(img, 0, 0);
+    const px = ctx.getImageData(0, 0, w, h).data;
+    const luma = Array.from({ length: lumaBytes });
+    for (let gy = 0; gy < AVATAR_GRID; gy++) {
+        const y0 = Math.floor((gy * h) / AVATAR_GRID);
+        const y1 = Math.min(h, Math.max(y0 + 1, Math.floor(((gy + 1) * h) / AVATAR_GRID)));
+        for (let gx = 0; gx < AVATAR_GRID; gx++) {
+            const x0 = Math.floor((gx * w) / AVATAR_GRID);
+            const x1 = Math.min(w, Math.max(x0 + 1, Math.floor(((gx + 1) * w) / AVATAR_GRID)));
+            let r = 0;
+            let g = 0;
+            let b = 0;
+            for (let y = y0; y < y1; y++) {
+                for (let x = x0; x < x1; x++) {
+                    const i = (y * w + x) * 4;
+                    r += px[i];
+                    g += px[i + 1];
+                    b += px[i + 2];
+                }
+            }
+            const n = (y1 - y0) * (x1 - x0);
+            luma[gy * AVATAR_GRID + gx] = lumaOf(r / n, g / n, b / n);
+        }
+    }
+    return luma;
+}
+export async function fetchSpecSheet(client, login, now) {
+    const { from, to } = contributionWindow(now);
+    let after = null;
+    let user;
+    let stars = 0;
+    let repos = 0;
+    for (let page = 0;; page++) {
+        const data = await client(QUERY, {
+            login,
+            from: `${from}T00:00:00Z`,
+            to: `${to}T23:59:59Z`,
+            after,
+        });
+        user = data.user;
+        const conn = user.repositories;
+        repos = conn.totalCount;
+        stars += conn.nodes.reduce((sum, n) => sum + n.stargazerCount, 0);
+        if (!conn.pageInfo.hasNextPage || page + 1 >= REPO_PAGES_MAX)
+            break;
+        after = conn.pageInfo.endCursor;
+    }
+    // The loop runs at least once, so the user block is set.
+    const profile = user;
+    const avatar = await fetchAvatarLuma(profile.avatarUrl);
+    return {
+        asOf: to,
+        createdAt: profile.createdAt.slice(0, 10),
+        followers: profile.followers.totalCount,
+        stars,
+        repos,
+        contributions: profile.contributionsCollection.contributionCalendar.totalContributions,
+        avatar,
+    };
+}
+/**
+ * Fetches the avatar and reduces it to the luma grid. GitHub serves avatars
+ * publicly (no token); any failure (network, non-image, decode) returns null
+ * with a warning, and the render falls back to the sphere instead of failing
+ * the run.
+ */
+async function fetchAvatarLuma(url) {
+    try {
+        const res = await fetch(url, { signal: AbortSignal.timeout(AVATAR_TIMEOUT_MS) });
+        if (!res.ok)
+            throw new Error(`HTTP ${res.status} ${res.statusText}`);
+        const bytes = Buffer.from(await res.arrayBuffer());
+        const img = await loadImage(bytes);
+        return { size: AVATAR_GRID, luma: Buffer.from(normalizeAvatar(img)).toString('base64') };
+    }
+    catch (err) {
+        console.warn(`headreel: avatar unavailable, drawing the fallback sphere (${err.message})`);
+        return null;
+    }
+}

package/dist/styles/index.js

@@ -3,6 +3,7 @@ import { highlightsReel } from './highlights-reel/index.js';
 import { nowPlaying } from './now-playing/index.js';
 import { receipt } from './receipt/index.js';
 import { repoGalaxy } from './repo-galaxy/index.js';
+import { specSheet } from './spec-sheet/index.js';
 import { trailProfile } from './trail-profile/index.js';
 /** Built-in styles, keyed by id. */
 export const styles = {
@@ -11,5 +12,6 @@ export const styles = {
     [nowPlaying.id]: nowPlaying,
     [receipt.id]: receipt,
     [repoGalaxy.id]: repoGalaxy,
+    [specSheet.id]: specSheet,
     [trailProfile.id]: trailProfile,
 };

package/dist/styles/spec-sheet/halftone.js

@@ -0,0 +1,143 @@
+import { AVATAR_GRID } from '../../core/data/spec-sheet.js';
+/**
+ * The portrait: a monochrome halftone of the avatar's luma grid, on a screen
+ * angled 45 degrees like print. Dots, radii and animation delays are computed
+ * once (pure functions of the grid and the seeded jitter); every frame only
+ * scales each dot's radius.
+ */
+/** Screen pitch, px: the distance between neighbouring dot centres. */
+export const PITCH = 7;
+/** Dot radius at full ink, as a fraction of the pitch. */
+export const DOT_MAX = 0.55;
+/** Radii below this, px, are left out entirely. */
+export const DOT_MIN = 0.6;
+/** The outer share of the disc where dots fade toward the paper. */
+export const RIM = 0.12;
+/**
+ * Loop phases where the portrait dissolves and rebuilds. The two are the same
+ * length and mirror each other, and the hold between them wraps across the
+ * seam, so the loop reads as one even rhythm: hold, dissolve, rebuild.
+ */
+export const DISSOLVE = [24 / 169, 84 / 169];
+export const BUILD = [84 / 169, 144 / 169];
+/** Share of a sub-phase a single dot takes to shrink or grow. */
+const WINDOW = 0.2;
+/** Share of a sub-phase given to the seeded jitter, which feathers the front. */
+const JITTER = 0.06;
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+function smoothstep(e0, e1, x) {
+    const t = clamp01((x - e0) / (e1 - e0));
+    return t * t * (3 - 2 * t);
+}
+/** Bilinear sample of the luma grid at a point of the unit square (0..1). */
+export function sampleLuma(luma, u, v) {
+    const g = AVATAR_GRID - 1;
+    const x = clamp01(u) * g;
+    const y = clamp01(v) * g;
+    const x0 = Math.floor(x);
+    const y0 = Math.floor(y);
+    const x1 = Math.min(g, x0 + 1);
+    const y1 = Math.min(g, y0 + 1);
+    const fx = x - x0;
+    const fy = y - y0;
+    const a = luma[y0 * AVATAR_GRID + x0];
+    const b = luma[y0 * AVATAR_GRID + x1];
+    const c = luma[y1 * AVATAR_GRID + x0];
+    const d = luma[y1 * AVATAR_GRID + x1];
+    return a * (1 - fx) * (1 - fy) + b * fx * (1 - fy) + c * (1 - fx) * fy + d * fx * fy;
+}
+/** One dot's at-rest radius: dark luma grows it, the rim fades it out. */
+export function dotRadius(luma, rim) {
+    const ink = 1 - luma / 255;
+    const fade = clamp01((1 - rim) / RIM);
+    return PITCH * DOT_MAX * Math.sqrt(ink) * fade;
+}
+/**
+ * The screen: a square lattice rotated 45 degrees, one dot per intersection
+ * inside the disc, each sampling the grid bilinearly at its centre. Dots
+ * whose faded radius falls below `DOT_MIN` (the pale and the outermost rim)
+ * are left out.
+ */
+export function halftoneDots(luma, cx, cy, radius, next) {
+    const dots = [];
+    const step = PITCH / Math.SQRT2;
+    const k = Math.ceil(radius / step) + 1;
+    for (let u = -k; u <= k; u++) {
+        for (let v = -k; v <= k; v++) {
+            const x = cx + (u - v) * step;
+            const y = cy + (u + v) * step;
+            const dist = Math.hypot(x - cx, y - cy);
+            if (dist > radius)
+                continue;
+            const rim = dist / radius;
+            const sample = sampleLuma(luma, (x - cx) / radius / 2 + 0.5, (y - cy) / radius / 2 + 0.5);
+            const r = dotRadius(sample, rim);
+            if (r < DOT_MIN)
+                continue;
+            dots.push({ x, y, r, rim, jitter: next(), front: 0 });
+        }
+    }
+    const order = dots.map((_, i) => i).sort((a, b) => dots[b].rim - dots[a].rim || a - b);
+    const total = dots.reduce((sum, d) => sum + d.r * d.r, 0);
+    let before = 0;
+    for (const i of order) {
+        const ink = dots[i].r * dots[i].r;
+        dots[i].front = total > 0 ? (before + ink / 2) / total : 0;
+        before += ink;
+    }
+    return dots;
+}
+/**
+ * The fallback portrait when no avatar could be fetched: a sphere shaded from
+ * a seeded light direction, as the reference card's halftone sphere. Points
+ * outside the unit disc are paper (no dot).
+ */
+export function sphereLuma(next) {
+    const g = AVATAR_GRID;
+    const lx = -0.52 - 0.2 * next();
+    const ly = -0.58 - 0.2 * next();
+    const lz = 0.62;
+    const norm = Math.hypot(lx, ly, lz);
+    const l = [lx / norm, ly / norm, lz / norm];
+    const luma = Array.from({ length: g * g }, () => 255);
+    for (let y = 0; y < g; y++) {
+        for (let x = 0; x < g; x++) {
+            const nx = ((x + 0.5) / g) * 2 - 1;
+            const ny = ((y + 0.5) / g) * 2 - 1;
+            const d2 = nx * nx + ny * ny;
+            if (d2 > 1) {
+                luma[y * g + x] = 255;
+                continue;
+            }
+            const nz = Math.sqrt(1 - d2);
+            const lit = Math.max(0, nx * l[0] + ny * l[1] + nz * l[2]);
+            luma[y * g + x] = Math.round(255 * (0.16 + 0.78 * lit));
+        }
+    }
+    return luma;
+}
+/**
+ * One dot's radius scale over one sub-phase `s` (0..1): the dissolve, rim
+ * first, the front paced by ink (`Dot.front`), so about the same amount of
+ * ink leaves on every frame. Every dot reaches exactly 0 at `s` 1: trigger
+ * plus WINDOW never passes 1.
+ */
+function dissolveScale(dot, s) {
+    const trigger = dot.front * (1 - WINDOW - JITTER) + dot.jitter * JITTER;
+    return 1 - smoothstep(trigger, trigger + WINDOW, s);
+}
+/**
+ * One dot's radius scale at loop phase `t`. The portrait holds finished
+ * (scale exactly 1), dissolves rim to centre, then rebuilds centre to rim as
+ * the dissolve played backwards, so both halves have the same pace. Periodic:
+ * `t` 0 and every `t` outside the two phases read exactly 1.
+ */
+export function dotScale(dot, t) {
+    if (t >= DISSOLVE[0] && t < DISSOLVE[1]) {
+        return dissolveScale(dot, (t - DISSOLVE[0]) / (DISSOLVE[1] - DISSOLVE[0]));
+    }
+    if (t >= BUILD[0] && t < BUILD[1]) {
+        return dissolveScale(dot, 1 - (t - BUILD[0]) / (BUILD[1] - BUILD[0]));
+    }
+    return 1;
+}

package/dist/styles/spec-sheet/index.js

@@ -0,0 +1,16 @@
+import { fetchSpecSheet, specSheetSchema } from '../../core/data/spec-sheet.js';
+import { buildSheet, FRAMES } from './sheet.js';
+import { options } from './options.js';
+import { paletteOf, pinnedOf } from './palette.js';
+import { createSpecSheetSketch } from './sketch.js';
+export const specSheet = {
+    id: 'spec-sheet',
+    fps: 25,
+    frames: FRAMES,
+    pinned: (o) => pinnedOf(paletteOf(o)),
+    data: { name: 'specsheet', schema: specSheetSchema, fetch: fetchSpecSheet },
+    options,
+    createSketch({ data, identity, options, rng }) {
+        return createSpecSheetSketch(buildSheet(data, identity, paletteOf(options), rng));
+    },
+};

package/dist/styles/spec-sheet/options.js

@@ -0,0 +1,8 @@
+import { z } from 'zod';
+export const ACCENTS = ['gray', 'teal', 'cobalt', 'violet', 'sienna'];
+export const options = z
+    .object({
+    /** Color of the eyebrow, tagline, website and cursor. */
+    accent: z.enum(ACCENTS).default('gray'),
+})
+    .strict();

package/dist/styles/spec-sheet/palette.js

@@ -0,0 +1,40 @@
+/** `over` at `alpha` over `base`, both opaque. */
+export function blend(over, base, alpha) {
+    return [
+        Math.round(over[0] * alpha + base[0] * (1 - alpha)),
+        Math.round(over[1] * alpha + base[1] * (1 - alpha)),
+        Math.round(over[2] * alpha + base[2] * (1 - alpha)),
+    ];
+}
+/**
+ * Gray is the muted label color itself: the card prints in ink and one
+ * grey, like the portrait. Teal is new to this style; the other three share Trail Profile's
+ * values.
+ */
+const ACCENT_VALUES = {
+    gray: [106, 106, 112], // #6A6A70, the muted labels
+    teal: [30, 122, 94], // #1E7A5E
+    cobalt: [47, 85, 212], // #2F55D4
+    violet: [106, 63, 200], // #6A3FC8
+    sienna: [138, 75, 34], // #8A4B22
+};
+const BASE = {
+    paper: [245, 245, 242], // #F5F5F2
+    ink: [22, 22, 26], // #16161A
+    muted: [106, 106, 112], // #6A6A70
+};
+export function paletteOf(options) {
+    return {
+        ...BASE,
+        accent: ACCENT_VALUES[options.accent],
+        // Pre-blended solid, drawn opaque so the encoder can pin it: alpha
+        // hairlines anti-alias into a ramp of near-identical colors that dithers.
+        grid: blend(BASE.ink, BASE.paper, 0.06),
+    };
+}
+/** Flat colors the encoder keeps exact and undithered. */
+export function pinnedOf(palette) {
+    const colors = [palette.paper, palette.ink, palette.muted, palette.accent, palette.grid];
+    // Gray accent is the muted color: pin it once.
+    return colors.filter((c, i) => colors.findIndex((d) => d.join() === c.join()) === i);
+}

package/dist/styles/spec-sheet/sheet.js

@@ -0,0 +1,106 @@
+import { canvasMeasure, fitLine } from '../../core/text.js';
+import { BUILD, DISSOLVE, halftoneDots, sphereLuma } from './halftone.js';
+/**
+ * The card as printed: where every block of type sits, the stats rows, and
+ * the halftone screen. Everything here is a pure function of the data; the
+ * sketch only draws.
+ */
+export const FRAMES = 169;
+export const LAYOUT = {
+    width: 1280,
+    height: 400,
+    /** Card border inset, and the text margin inside it. */
+    inset: 24,
+    pad: 48,
+    /** Grid paper pitch. */
+    grid: 16,
+    /** Headline and tagline column: x 48 to 560, the stats panel's left edge minus 32. */
+    nameColumn: 560 - 48,
+    topBarY: 48,
+    eyebrowY: 84,
+    /** Baselines. */
+    nameY: 152,
+    taglineY: 192,
+    /** The bordered stats table. */
+    panel: { left: 592, right: 900, top: 110, bottom: 300, rowH: 38, pad: 20 },
+    /** The halftone portrait disc. */
+    portrait: { cx: 1086, cy: 200, radius: 140 },
+    footerY: 352,
+};
+/** Frames a stats row's value takes to retype during the build. */
+export const TYPE_FRAMES = 12;
+const MONTHS = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
+/** "2026-09-19" -> "19 SEP 2026". */
+export function asOfText(asOf) {
+    const [, m, d] = asOf.split('-');
+    return `${Number(d)} ${MONTHS[Number(m) - 1]} ${asOf.slice(0, 4)}`;
+}
+/**
+ * A value's visible characters at loop phase `t`. Complete at rest; during
+ * the dissolve the values are deleted one row at a time, bottom row first,
+ * and during the build they are typed back top row first, the deletion
+ * played backwards. Between the two they are empty, like the portrait.
+ */
+export function typedChars(value, row, rows, t) {
+    const len = TYPE_FRAMES / FRAMES;
+    let k;
+    if (t >= DISSOLVE[0] && t < BUILD[0]) {
+        const start = DISSOLVE[0] + (rows - 1 - row) * len;
+        k = t < start ? 1 : 1 - (t - start) / len;
+    }
+    else if (t >= BUILD[0] && t < BUILD[1]) {
+        const start = BUILD[0] + row * len;
+        k = (t - start) / len;
+    }
+    else {
+        return { text: value, cursor: false };
+    }
+    if (k >= 1 - 1e-9)
+        return { text: value, cursor: false };
+    if (k <= 1e-9)
+        return { text: '', cursor: false };
+    const chars = Math.min(value.length, Math.floor(k * (value.length + 1)));
+    return { text: value.slice(0, chars), cursor: true };
+}
+/** "https://www.example.com/" -> "www.example.com" */
+function displayUrl(url) {
+    return url.replace(/^[a-z]+:\/\//i, '').replace(/\/+$/, '');
+}
+export function buildSheet(data, identity, palette, next) {
+    const { portrait } = LAYOUT;
+    const luma = data.avatar ? Buffer.from(data.avatar.luma, 'base64') : sphereLuma(next);
+    const dots = halftoneDots(luma, portrait.cx, portrait.cy, portrait.radius, next);
+    // The footer: the handle, then the website link, on one line. The link is
+    // the arrow plus the domain with a hair of space between them, and the
+    // domain fits what remains of the column.
+    const mono = canvasMeasure('JetBrains Mono', 400, 2);
+    const handle = identity.handle?.trim() ?? '';
+    const arrowX = LAYOUT.pad + mono(handle, 12) + (handle ? 24 : 0);
+    const arrowW = mono('↗', 12);
+    const websiteX = arrowX + arrowW + 7;
+    const website = identity.website
+        ? fitLine(displayUrl(identity.website), LAYOUT.nameColumn - (websiteX - LAYOUT.pad), 12, 12, mono)
+        : null;
+    const stat = (glyph, label, n) => ({
+        glyph,
+        label,
+        value: n.toLocaleString('en-US'),
+    });
+    return {
+        sinceText: `SINCE ${data.createdAt.slice(0, 4)}`,
+        eyebrow: `// GITHUB PROFILE · ${asOfText(data.asOf)}`,
+        name: fitLine(identity.name.toUpperCase(), LAYOUT.nameColumn, 56, 30, canvasMeasure('Space Grotesk', 700, 2)),
+        tagline: identity.tagline
+            ? fitLine(identity.tagline, LAYOUT.nameColumn, 28, 28, canvasMeasure('Space Grotesk', 700))
+            : null,
+        stats: [
+            stat('▲', 'FOLLOWERS', data.followers),
+            stat('■', 'STARS', data.stars),
+            stat('●', 'REPOS', data.repos),
+            stat('◆', 'CONTRIBUTIONS', data.contributions),
+        ],
+        footer: { handle, arrowX, website, websiteX },
+        dots,
+        palette,
+    };
+}

package/dist/styles/spec-sheet/sketch.js

@@ -0,0 +1,185 @@
+import { dotScale } from './halftone.js';
+import { LAYOUT, typedChars } from './sheet.js';
+/**
+ * The spec card. Everything is drawn in screen space through the raw context,
+ * the style set right before each draw (see Highlights Reel's note on p5's
+ * cached fill state), so a still frame reproduces byte for byte: the loop
+ * holds the finished card at both ends and only the portrait's dots and the
+ * table's typing move in between.
+ */
+const MONO = '"JetBrains Mono"';
+const SANS = '"Space Grotesk"';
+const TAU = Math.PI * 2;
+const { width: W, height: H, inset: INSET, pad: PAD, grid: GRID, panel: PANEL } = LAYOUT;
+/** Rule weights, px: the card and table borders, the header rule, row rules. */
+const LINE = { border: 2, header: 2, row: 1 };
+/** Table type: header and labels tracked, values plain mono. */
+const TYPE = { header: 11, label: 12, value: 16, glyph: 12 };
+function rgba(color, alpha = 1) {
+    return `rgba(${color[0]},${color[1]},${color[2]},${alpha})`;
+}
+function setFill(ctx, color, alpha = 1) {
+    ctx.fillStyle = rgba(color, alpha);
+}
+function setFont(ctx, o) {
+    ctx.font = `${o.bold ? 700 : 400} ${o.size}px ${o.mono ? MONO : SANS}`;
+    ctx.textAlign = o.align ?? 'left';
+    ctx.textBaseline = 'alphabetic';
+    ctx.letterSpacing = `${o.tracking ?? 0}px`;
+}
+function drawText(ctx, str, x, y, o) {
+    setFont(ctx, o);
+    setFill(ctx, o.color);
+    ctx.fillText(str, x, y);
+    if (o.tracking)
+        ctx.letterSpacing = '0px';
+}
+/** The value column's mono advance at 16 px, for the typing cursor's width. */
+function monoAdvance(ctx) {
+    setFont(ctx, { size: TYPE.value, mono: true });
+    return ctx.measureText('0').width;
+}
+export function createSpecSheetSketch(model) {
+    const P = model.palette;
+    function setup(p) {
+        void p;
+    }
+    /** Grid paper: whole-pixel hairlines at the exact blended color. */
+    function drawGrid(ctx) {
+        setFill(ctx, P.grid);
+        for (let x = GRID; x < W; x += GRID)
+            ctx.fillRect(x, 0, 1, H);
+        for (let y = GRID; y < H; y += GRID)
+            ctx.fillRect(0, y, W, 1);
+    }
+    /** The card border and the bordered stats table, printed black. */
+    function drawRules(ctx) {
+        ctx.strokeStyle = rgba(P.ink);
+        ctx.lineWidth = LINE.border;
+        ctx.strokeRect(INSET + 1, INSET + 1, W - 2 * INSET - 2, H - 2 * INSET - 2);
+        ctx.strokeRect(PANEL.left + 1, PANEL.top + 1, PANEL.right - PANEL.left - 2, PANEL.bottom - PANEL.top - 2);
+        setFill(ctx, P.ink);
+        const headerY = PANEL.top + PANEL.rowH;
+        ctx.fillRect(PANEL.left, headerY - 1, PANEL.right - PANEL.left, LINE.header);
+        for (let i = 1; i < model.stats.length; i++) {
+            ctx.fillRect(PANEL.left, headerY + i * PANEL.rowH, PANEL.right - PANEL.left, LINE.row);
+        }
+    }
+    function drawHeadline(ctx) {
+        drawText(ctx, model.sinceText, W - PAD, LAYOUT.topBarY, {
+            size: 12,
+            mono: true,
+            tracking: 2,
+            align: 'right',
+            color: P.muted,
+        });
+        drawText(ctx, model.eyebrow, PAD, LAYOUT.eyebrowY, {
+            size: 12,
+            mono: true,
+            tracking: 2,
+            color: P.accent,
+        });
+        drawText(ctx, model.name.text, PAD, LAYOUT.nameY, {
+            size: model.name.size,
+            bold: true,
+            tracking: 2,
+            color: P.ink,
+        });
+        if (model.tagline) {
+            drawText(ctx, model.tagline.text, PAD, LAYOUT.taglineY, {
+                size: model.tagline.size,
+                bold: true,
+                color: P.accent,
+            });
+        }
+    }
+    /**
+     * The stats table. The form is printed (glyphs, labels, rules); the values
+     * are deleted during the dissolve and retyped during the build from their
+     * final left anchor, so the completed row is right-aligned and the typing
+     * grows rightward in place.
+     */
+    function drawStats(ctx, t, advance) {
+        const headerY = PANEL.top + PANEL.rowH;
+        drawText(ctx, 'STATS', PANEL.left + PANEL.pad, headerY - 13, {
+            size: TYPE.header,
+            mono: true,
+            tracking: 2,
+            color: P.muted,
+        });
+        model.stats.forEach((row, i) => {
+            const baseline = headerY + i * PANEL.rowH + 25;
+            drawText(ctx, row.glyph, PANEL.left + PANEL.pad, baseline, {
+                size: TYPE.glyph,
+                mono: true,
+                color: P.ink,
+            });
+            drawText(ctx, row.label, PANEL.left + PANEL.pad + 22, baseline, {
+                size: TYPE.label,
+                mono: true,
+                tracking: 1,
+                color: P.muted,
+            });
+            const { text, cursor } = typedChars(row.value, i, model.stats.length, t);
+            setFont(ctx, { size: TYPE.value, mono: true });
+            const anchor = PANEL.right - PANEL.pad - ctx.measureText(row.value).width;
+            const width = ctx.measureText(text).width;
+            drawText(ctx, text, anchor, baseline, { size: TYPE.value, mono: true, color: P.ink });
+            if (cursor) {
+                setFill(ctx, P.accent);
+                ctx.fillRect(anchor + width + 1, baseline - 13, advance, TYPE.value);
+            }
+        });
+    }
+    /** The portrait: the halftone screen, each dot at its phase scale. */
+    function drawPortrait(ctx, t) {
+        setFill(ctx, P.ink);
+        for (const dot of model.dots) {
+            const scale = dotScale(dot, t);
+            if (scale <= 0)
+                continue;
+            const r = dot.r * scale;
+            if (r < 0.1)
+                continue;
+            ctx.beginPath();
+            ctx.arc(dot.x, dot.y, r, 0, TAU);
+            ctx.fill();
+        }
+    }
+    function drawFooter(ctx) {
+        if (model.footer.handle) {
+            drawText(ctx, model.footer.handle, PAD, LAYOUT.footerY, {
+                size: 12,
+                mono: true,
+                tracking: 2,
+                color: P.muted,
+            });
+        }
+        if (model.footer.website) {
+            drawText(ctx, '↗', model.footer.arrowX, LAYOUT.footerY, {
+                size: 12,
+                mono: true,
+                tracking: 2,
+                color: P.accent,
+            });
+            drawText(ctx, model.footer.website.text, model.footer.websiteX, LAYOUT.footerY, {
+                size: 12,
+                mono: true,
+                tracking: 2,
+                color: P.accent,
+            });
+        }
+    }
+    function draw(p, _frame, t) {
+        const ctx = p.drawingContext;
+        setFill(ctx, P.paper);
+        ctx.fillRect(0, 0, W, H);
+        drawGrid(ctx);
+        drawRules(ctx);
+        drawHeadline(ctx);
+        drawStats(ctx, t, monoAdvance(ctx));
+        drawPortrait(ctx, t);
+        drawFooter(ctx);
+    }
+    return { setup, draw };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "headreel",
-  "version": "1.6.0",
-  "description": "Animated GitHub profile banner made from your GitHub activity, with a GitHub Action or CLI.",
+  "version": "1.7.1",
+  "description": "Animated GitHub profile banners made from your GitHub activity, with a GitHub Action or CLI.",
   "keywords": [
     "github",
     "github-profile",