09
Diff card
Files changed, green/red lines, +312 -48 count up, merged badge
Add the "Diff card" video component (GitHub PR, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/diff-card.zip?v=6d5e7aadf963 and unzip it into components/diff-card/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/diff-card && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o diff-card.mp4
3. Give me the path of the MP4. The text, names and timings live in the CONFIG block at the top of the script in index.html; change nothing there unless I ask.Code
One file. The project download adds the fonts, skins and motion kit it runs on.
Open full file1<!doctype html>2<html lang="en" data-composition-variables='[3 {"id":"variant","type":"enum","label":"Variant","default":"0","options":[{"value":"0","label":"GitHub PR"},{"value":"1","label":"Cursor review"},{"value":"2","label":"Codex code review"}]},4 {"id":"theme","type":"enum","label":"Theme","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}5]'>6<head>7<meta charset="UTF-8" />8<meta name="viewport" content="width=1920, height=1080" />9<link rel="stylesheet" href="assets/fonts/fonts.css" />10<link rel="stylesheet" href="assets/skins/device/skin.css" />11<link rel="stylesheet" href="assets/skins/cursor/skin.css" />12<link rel="stylesheet" href="assets/skins/codex/skin.css" />13<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>14<script src="assets/kit/motion/motion.js"></script>15<script src="assets/skins/device/icons.js"></script>16<script src="assets/skins/cursor/icons.js"></script>17<script src="assets/skins/codex/icons.js"></script>18<style>19 /* GitHub's UI face (Mona Sans, SIL OFL), shipped locally with this component */20 @font-face { font-family: "Mona Sans GH"; font-style: normal; font-weight: 200 900; font-display: block; src: url("assets/brand/MonaSans-latin.woff2") format("woff2"); }21 /* Menlo's open-source parent (Bitstream Vera licence): what ui-monospace/Menlo stacks resolve to on a Mac,22 shipped locally because the renderer has no system fonts */23 @font-face { font-family: "DejaVu Sans Mono GH"; font-style: normal; font-weight: 400; font-display: block; src: url("assets/brand/DejaVuSansMono-latin.woff2") format("woff2"); }2425 * { margin: 0; padding: 0; box-sizing: border-box; }26 html, body { width: 1920px; height: 1080px; overflow: hidden; background: #F5F5F4; }27 html[data-theme="dark"], html[data-theme="dark"] body { background: #0E0E0F; }28 #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: Inter, sans-serif; }2930 /* ---------- stage (DESIGN.md): flat, no texture ---------- */31 #stage { position: absolute; inset: 0; background: #F5F5F4; }32 #stage[data-theme="dark"] { background: #0E0E0F; }33 #cam { position: absolute; inset: 0; }34 #heroPos { position: absolute; }35 #heroZoom { position: relative; }36 #hero { position: absolute; inset: 0; }37 #ptrLayer { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; z-index: 20; }38 #ptr { opacity: 0; }3940 /* ---------- odometer: one glyph-tall window per digit, soft top/bottom edges ---------- */41 .odo { --oh: 1.25em; display: inline-flex; align-items: flex-start; white-space: nowrap; vertical-align: baseline; font-variant-numeric: tabular-nums; }42 .odo .pre, .odo .sl { display: inline-block; height: var(--oh); line-height: var(--oh); }43 .odo .sl { overflow: hidden;44 -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%);45 mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%); }46 .odo .rl { display: block; will-change: transform; }47 .odo .rl > i { display: block; height: var(--oh); line-height: var(--oh); font-style: normal; text-align: center; }48