headreel 1.0.0

package/dist/styles/contribution-city/sketch.js

@@ -0,0 +1,289 @@
+import { cityOrigin, LAYOUT, tileAt } from './city.js';
+const PALETTE = {
+    skyTop: '#07090c',
+    skyBottom: '#1c1917',
+    skyFloor: '#0c0a09',
+    front: [20, 28, 34],
+    side: [12, 18, 23],
+    top: [8, 145, 178],
+    window: [165, 243, 252],
+    cyan: '#22d3ee',
+    ink: '#f5f5f4',
+    muted: '#a8a29e',
+};
+const SANS = 'Space Grotesk';
+const MONO = 'JetBrains Mono';
+const TEXT_X = 48;
+const PROMPT = '~/github';
+const { width: W, height: H, depthX, depthY, baseY } = LAYOUT;
+/** 0..1, periodic in `phase`, so every animated value loops seamlessly. */
+function wave(phase, cycles, off) {
+    return 0.5 + 0.5 * Math.sin(Math.PI * 2 * (phase * cycles + off));
+}
+function easeInOut(t) {
+    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+}
+/** "https://www.example.com/" -> "www.example.com" */
+function displayUrl(url) {
+    return url.replace(/^[a-z]+:\/\//i, '').replace(/\/+$/, '');
+}
+export function createCitySketch(city, identity, rng) {
+    const origin = cityOrigin(city.weeks);
+    const noiseSeed = Math.floor(rng() * 2 ** 31);
+    const grainSeed = Math.floor(rng() * 2 ** 31);
+    let sky;
+    let grain;
+    const scanPosition = (phase) => {
+        const start = origin.x - 100;
+        return start + (W + 100 - start) * phase;
+    };
+    function renderSky(p) {
+        const g = p.createGraphics(W, H);
+        g.pixelDensity(1);
+        const ctx = g.drawingContext;
+        const grad = ctx.createLinearGradient(0, 0, 0, H);
+        grad.addColorStop(0, PALETTE.skyTop);
+        grad.addColorStop(0.75, PALETTE.skyBottom);
+        grad.addColorStop(1, PALETTE.skyFloor);
+        ctx.fillStyle = grad;
+        ctx.fillRect(0, 0, W, H);
+        // Horizon glow behind the skyline.
+        const gx = origin.x + 520;
+        const gy = baseY - 40;
+        const glow = ctx.createRadialGradient(gx, gy, 10, gx, gy, 620);
+        glow.addColorStop(0, 'rgba(8,145,178,0.22)');
+        glow.addColorStop(0.5, 'rgba(8,145,178,0.06)');
+        glow.addColorStop(1, 'rgba(8,145,178,0)');
+        ctx.fillStyle = glow;
+        ctx.fillRect(0, 0, W, H);
+        // Faint contour lines from warped noise.
+        p.noiseSeed(noiseSeed);
+        g.noFill();
+        g.strokeWeight(0.6);
+        for (let k = 0; k < 7; k++) {
+            g.stroke(34, 211, 238, 10 + k * 1.5);
+            g.beginShape();
+            for (let x = 0; x <= W; x += 8) {
+                const n = p.noise(x * 0.0025, k * 0.4);
+                g.vertex(x, 80 + k * 26 + (p.noise(x * 0.004 + n * 2, k) - 0.5) * 70);
+            }
+            g.endShape();
+        }
+        return g;
+    }
+    function renderGrain(p) {
+        const g = p.createGraphics(W, H);
+        g.pixelDensity(1);
+        g.noStroke();
+        let s = grainSeed;
+        const next = () => {
+            s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
+            return s / 4294967296;
+        };
+        for (let i = 0; i < LAYOUT.grain; i++) {
+            g.fill(255, 4 + next() * 8);
+            g.rect(next() * W, next() * H, 1, 1);
+        }
+        return g;
+    }
+    function drawStars(p, phase) {
+        p.noStroke();
+        for (const s of city.stars) {
+            p.fill(226, 244, 250, s.a * (0.35 + 0.65 * wave(phase, s.cycles, s.off)));
+            p.rect(s.x, s.y, s.s, s.s);
+        }
+    }
+    function drawGround(p) {
+        const back = tileAt(city.weeks, 0, 0);
+        const frontRight = tileAt(city.weeks, city.weeks, 6);
+        p.noStroke();
+        p.fill(14, 18, 22);
+        p.quad(origin.x - 14, origin.y + 6, frontRight.x + 14, origin.y + 6, frontRight.x + 14 + 7 * depthX, back.y - depthY - 4, back.x - 14 + depthX, back.y - depthY - 4);
+        // Street grid, one line per weekday row.
+        p.stroke(34, 211, 238, 18);
+        p.strokeWeight(0.6);
+        for (let d = 0; d <= 7; d++) {
+            const y = origin.y - d * depthY + 2;
+            p.line(origin.x + d * depthX - 8, y, frontRight.x + d * depthX + 8, y);
+        }
+        p.stroke(34, 211, 238, 60);
+        p.strokeWeight(1);
+        p.line(origin.x - 14, origin.y + 6, frontRight.x + 14, origin.y + 6);
+    }
+    function drawBuilding(p, b, phase, scanX) {
+        const { x, y, bw: w, h } = b;
+        const dx = depthX * 0.8;
+        const dy = depthY * 0.8;
+        const hit = Math.max(0, 1 - Math.abs(x + w / 2 - scanX) / 70);
+        if (h === 0) {
+            p.noStroke();
+            p.fill(34, 211, 238, 10 + hit * 40);
+            p.quad(x, y, x + w, y, x + w + dx, y - dy, x + dx, y - dy);
+            return;
+        }
+        const lum = 0.55 + b.t * 0.45;
+        const [fr, fg, fb] = PALETTE.front;
+        const [sr, sg, sb] = PALETTE.side;
+        const [tr, tg, tb] = PALETTE.top;
+        p.noStroke();
+        p.fill(sr + hit * 10, sg + hit * 30, sb + hit * 38);
+        p.quad(x + w, y, x + w + dx, y - dy, x + w + dx, y - dy - h, x + w, y - h);
+        p.fill(fr * lum + hit * 12, fg * lum + hit * 40, fb * lum + hit * 50);
+        p.rect(x, y - h, w, h);
+        p.fill(tr + hit * 60, tg + hit * 80, tb + hit * 60, Math.min(255, 90 + b.t * 165 + hit * 80));
+        p.quad(x, y - h, x + w, y - h, x + w + dx, y - h - dy, x + dx, y - h - dy);
+        p.stroke(165, 243, 252, 40 + b.t * 120 + hit * 90);
+        p.strokeWeight(0.8);
+        p.line(x, y - h, x + w, y - h);
+        p.noStroke();
+        const [wr, wg, wb] = PALETTE.window;
+        for (const win of b.windows) {
+            const on = win.cycles ? wave(phase, win.cycles, win.off) > 0.5 : win.lit;
+            const a = on ? 150 + b.t * 80 : 18;
+            p.fill(wr, wg, wb, Math.min(255, a + hit * 120));
+            p.rect(x + win.x, y - h + win.y, 3, 2);
+        }
+        if (b.beacon) {
+            const pulse = wave(phase, 2, b.beaconOffset);
+            const cx = x + w / 2 + dx / 2;
+            const cy = y - h - dy / 2 - 5;
+            p.stroke(245, 158, 11, 120);
+            p.strokeWeight(1);
+            p.line(cx, cy + 4, cx, cy);
+            p.noStroke();
+            p.fill(245, 158, 11, 30 + pulse * 60);
+            p.circle(cx, cy, 8 + pulse * 8);
+            p.fill(253, 230, 138, 180 + pulse * 75);
+            p.circle(cx, cy, 3);
+        }
+    }
+    function roofPoint(b) {
+        return { x: b.x + b.bw / 2 + depthX * 0.4, y: b.y - b.h - depthY * 0.4 };
+    }
+    function drawArc(p, arc, phase) {
+        const p0 = roofPoint(arc.a);
+        const p3 = roofPoint(arc.b);
+        const top = Math.min(p0.y, p3.y) - arc.lift;
+        const c1x = p0.x + (p3.x - p0.x) * 0.25;
+        const c2x = p0.x + (p3.x - p0.x) * 0.75;
+        p.noFill();
+        p.stroke(34, 211, 238, 34);
+        p.strokeWeight(0.8);
+        p.bezier(p0.x, p0.y, c1x, top, c2x, top, p3.x, p3.y);
+        // A packet travels the arc once per loop, trailed by fading dots.
+        const t = (phase + arc.off) % 1;
+        const eased = easeInOut(t);
+        const fade = Math.sin(Math.PI * t);
+        p.noStroke();
+        for (let k = 6; k >= 0; k--) {
+            const s = Math.max(0, eased - k * 0.012);
+            const px = p.bezierPoint(p0.x, c1x, c2x, p3.x, s);
+            const py = p.bezierPoint(p0.y, top, top, p3.y, s);
+            p.fill(165, 243, 252, (k === 0 ? 255 : 110 - k * 14) * fade);
+            p.circle(px, py, k === 0 ? 4 : 3 - k * 0.3);
+        }
+    }
+    function drawScanBeam(p, scanX, phase) {
+        // Fade at both ends of the sweep so the loop seam is invisible.
+        const k = Math.min(1, phase / 0.06, (1 - phase) / 0.06);
+        const ctx = p.drawingContext;
+        ctx.globalAlpha = k;
+        const g = ctx.createLinearGradient(scanX - 60, 0, scanX + 60, 0);
+        g.addColorStop(0, 'rgba(34,211,238,0)');
+        g.addColorStop(0.5, 'rgba(34,211,238,0.07)');
+        g.addColorStop(1, 'rgba(34,211,238,0)');
+        ctx.fillStyle = g;
+        ctx.fillRect(scanX - 60, 150, 120, baseY - 140);
+        p.stroke(165, 243, 252, 70);
+        p.strokeWeight(1);
+        p.line(scanX, baseY + 8, scanX, baseY + 16);
+        ctx.globalAlpha = 1;
+    }
+    function drawMonths(p, scanX) {
+        p.textFont(MONO);
+        p.textStyle(p.NORMAL);
+        p.textSize(10);
+        p.textAlign(p.LEFT, p.TOP);
+        p.noStroke();
+        for (const m of city.months) {
+            const t = tileAt(city.weeks, m.w, 6);
+            const hit = Math.max(0, 1 - Math.abs(t.x - scanX) / 80);
+            p.fill(168, 162, 158, 110 + hit * 145);
+            p.text(m.label, t.x, baseY + 14);
+        }
+    }
+    function drawText(p, phase) {
+        const x = TEXT_X;
+        const ctx = p.drawingContext;
+        p.noStroke();
+        p.textAlign(p.LEFT, p.BASELINE);
+        // Prompt line with a blinking block cursor.
+        p.textFont(MONO);
+        p.textStyle(p.NORMAL);
+        p.textSize(13);
+        p.fill(PALETTE.cyan);
+        p.text(PROMPT, x, 58);
+        if (wave(phase, 3, 0) > 0.5) {
+            p.rect(x + p.textWidth(PROMPT) + 4, 47, 7, 13);
+        }
+        p.textFont(SANS);
+        p.textStyle(p.BOLD);
+        p.textSize(50);
+        ctx.letterSpacing = '3px';
+        p.fill(PALETTE.ink);
+        p.text(identity.name.toUpperCase(), x, 116);
+        ctx.letterSpacing = '0px';
+        if (identity.tagline) {
+            p.textStyle(p.NORMAL);
+            p.textSize(17);
+            p.fill(PALETTE.cyan);
+            p.text(identity.tagline, x, 146);
+        }
+        p.textFont(MONO);
+        p.textStyle(p.NORMAL);
+        p.textSize(11);
+        p.fill(PALETTE.muted);
+        p.text('LAST 12 MONTHS', x, 206);
+        p.textFont(SANS);
+        p.textStyle(p.BOLD);
+        p.textSize(34);
+        p.fill(PALETTE.ink);
+        p.text(city.total.toLocaleString('en-US'), x, 244);
+        p.textFont(MONO);
+        p.textStyle(p.NORMAL);
+        p.textSize(11);
+        p.fill(PALETTE.muted);
+        p.text('contributions', x, 262);
+        if (city.maxCount > 0) {
+            p.fill(245, 158, 11);
+            p.circle(x + 4, 292, 5);
+            p.fill(PALETTE.muted);
+            p.text('busiest days', x + 14, 296);
+        }
+        if (identity.website) {
+            p.textSize(12);
+            p.fill(PALETTE.cyan);
+            p.text(`↗ ${displayUrl(identity.website)}`, x, 350);
+        }
+    }
+    return {
+        setup(p) {
+            sky = renderSky(p);
+            grain = renderGrain(p);
+        },
+        draw(p, _frame, phase) {
+            const scanX = scanPosition(phase);
+            p.image(sky, 0, 0);
+            drawStars(p, phase);
+            drawGround(p);
+            for (const b of city.buildings)
+                drawBuilding(p, b, phase, scanX);
+            for (const arc of city.arcs)
+                drawArc(p, arc, phase);
+            drawScanBeam(p, scanX, phase);
+            drawMonths(p, scanX);
+            drawText(p, phase);
+            p.image(grain, 0, 0);
+        },
+    };
+}

package/dist/styles/index.js

@@ -0,0 +1,5 @@
+import { contributionCity } from './contribution-city/index.js';
+/** Built-in styles, keyed by id. */
+export const styles = {
+    [contributionCity.id]: contributionCity,
+};

package/dist/styles/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "headreel",
+  "version": "1.0.0",
+  "description": "Animated GitHub profile banner, rendered from your GitHub data. GitHub Action and CLI.",
+  "keywords": [
+    "github",
+    "profile",
+    "readme",
+    "banner",
+    "gif",
+    "github-action",
+    "contributions"
+  ],
+  "homepage": "https://github.com/arifszn/headreel#readme",
+  "bugs": {
+    "url": "https://github.com/arifszn/headreel/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arifszn/headreel.git"
+  },
+  "license": "MIT",
+  "author": "Ariful Alam",
+  "type": "module",
+  "bin": {
+    "headreel": "dist/cli/index.js"
+  },
+  "files": [
+    "dist",
+    "assets"
+  ],
+  "engines": {
+    "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+  },
+  "packageManager": "pnpm@11.1.3",
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "vitest run",
+    "dev": "tsx src/cli/index.ts",
+    "prepack": "npm run build"
+  },
+  "dependencies": {
+    "@napi-rs/canvas": "1.0.9",
+    "gifenc": "1.0.3",
+    "jsdom": "30.1.0",
+    "p5": "2.3.2",
+    "zod": "4.6.5"
+  },
+  "devDependencies": {
+    "@types/jsdom": "30.0.0",
+    "@types/node": "22.20.3",
+    "oxlint": "1.83.0",
+    "prettier": "3.9.7",
+    "tsx": "4.23.13",
+    "typescript": "7.0.2",
+    "vitest": "5.0.1"
+  }
+}