Code Diff Card
Overview
A review-style change card: file name, added and removed counts, a diff that fades in line by line, hover highlighting, and one-click copy of the new code.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Code Diff Card to your project in your colors.
Where to use it
Dashboards, data tables, chart cards, comparison tables and status panels.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add code-diff-card
mcp › Use 8pt MCP to call get_component("code-diff-card")
Code
Source for Code Diff Card. Motion uses only transform and opacity and respects the Reduce motion setting.
<figure class="x-diff">
<figcaption><span class="x-diff__file">button.css</span><span class="x-diff__stat"><b>+4</b> <s>−2</s></span><button type="button" aria-label="Copy new code">Copy</button></figcaption>
<pre><code><span class="ctx"><i>12</i> .btn {</span><span class="del"><i>13</i>- padding: 10px 15px;</span><span class="del"><i>14</i>- border-radius: 5px;</span><span class="add"><i>13</i>+ padding: 12px 16px;</span><span class="add"><i>14</i>+ border-radius: 8px;</span><span class="add"><i>15</i>+ transition: transform .2s;</span><span class="add"><i>16</i>+ will-change: transform;</span><span class="ctx"><i>17</i> }</span></code></pre>
</figure>.x-diff{width:min(330px,100%);margin:0;border-radius:14px;overflow:hidden;background:var(--d-card,#14141c);border:1px solid var(--d-line,rgba(255,255,255,.12));color:var(--d-fg,#fff);box-shadow:0 20px 40px -28px rgba(0,0,0,.7)}
.x-diff figcaption{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px 0 12px;border-bottom:1px solid var(--d-line,rgba(255,255,255,.1));font:600 12px/1 ui-monospace,monospace}
.x-diff__stat{margin-right:auto}
.x-diff__stat b{color:#3dd68c}.x-diff__stat s{color:#ff6b6b;text-decoration:none}
.x-diff figcaption button{height:24px;padding:0 9px;border-radius:6px;border:1px solid var(--d-line,rgba(255,255,255,.14));background:transparent;color:var(--d-muted,#9b9ba8);font:600 11px/1 var(--d-font,system-ui,sans-serif);cursor:pointer}
.x-diff pre{margin:0;padding:6px 0;font:11.5px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden}
.x-diff code{display:grid}
.x-diff code span{display:block;padding:0 12px;white-space:pre;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
.x-diff.in code span{opacity:1;transform:none}
.x-diff code span:hover{background:color-mix(in srgb,var(--d-fg,#fff) 6%,transparent)}
.x-diff code i{display:inline-block;width:22px;margin-right:6px;font-style:normal;color:var(--d-muted,#9b9ba8);opacity:.6;text-align:right}
.x-diff .add{background:rgba(61,214,140,.1);color:#86efb4}
…const init = (root) => {
const fig = root.querySelector('.x-diff'), lines = [...fig.querySelectorAll('code span')], btn = fig.querySelector('button');
lines.forEach((l, i) => l.style.transitionDelay = (i * 70) + 'ms');
const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { fig.classList.add('in'); io.disconnect(); } });
io.observe(fig);
let t;
btn.addEventListener('click', async () => {
const code = lines.filter(l => !l.classList.contains('del')).map(l => l.textContent.replace(/^\s*\d+[+ ]?/, '')).join('\n');
try { await navigator.clipboard.writeText(code); } catch (e) {}
btn.textContent = 'Copied'; clearTimeout(t); t = setTimeout(() => btn.textContent = 'Copy', 1400);
});
return () => { io.disconnect(); clearTimeout(t); };
…Subscribe to Builder to see the full source.See pricing