25
Background agent
The laptop lid closes, the cloud task card keeps progressing, and a done notification arrives
Add the "Background agent" video component (Projects in Claude Code, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/background-agent.zip?v=c97388362cb5 and unzip it into components/background-agent/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/background-agent && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o background-agent.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":"Codex cloud"},{"value":"1","label":"Projects in Claude Code"},{"value":"2","label":"Cursor background agents"}]},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/codex/skin.css" />11<link rel="stylesheet" href="assets/skins/claude-code/skin.css" />12<link rel="stylesheet" href="assets/skins/cursor/skin.css" />13<link rel="stylesheet" href="assets/skins/device/skin.css" />14<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>15<script src="assets/kit/motion/motion.js"></script>16<script src="assets/skins/codex/icons.js"></script>17<script src="assets/skins/claude-code/icons.js"></script>18<script src="assets/skins/cursor/icons.js"></script>19<script src="assets/skins/device/icons.js"></script>20<style>21 * { margin: 0; padding: 0; box-sizing: border-box; }22 html, body { width: 1920px; height: 1080px; overflow: hidden; background: #F5F5F4; }23 html[data-theme="dark"], html[data-theme="dark"] body { background: #0E0E0F; }24 #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: Inter, sans-serif; }2526 /* ---------- stage tokens (DESIGN.md) ---------- */27 #stage { position: absolute; inset: 0; background: var(--stage);28 --stage: #F5F5F4; --surface: #FFFFFF; --ink: #0A0A0A; --ink-2: #6B6B6B; --hair: rgba(0,0,0,.08); }29 #stage[data-theme="dark"] { --stage: #0E0E0F; --surface: #18181A; --ink: #FAFAFA; --ink-2: #A1A1A1; --hair: rgba(255,255,255,.10); }3031 /* ================= LAPTOP (CSS 3D, 14-inch MacBook Pro proportions) ================= */32 #lapWrap { position: absolute; inset: 0; }33 /* a real perspective (not near-orthographic), so the lid swings on its hinge and the closed laptop reads as a solid */34 #lapPersp { position: absolute; inset: 0; perspective: 2600px; perspective-origin: 960px 520px; }35 /* #lap3d: size + view tilt about the hinge line; #lapYaw: the laptop turning about the centre of its footprint */36 #lap3d { position: absolute; left: 510px; top: 800px; width: 900px; height: 0; transform-style: preserve-3d; transform-origin: 450px 0; transform: scale(1) rotateX(-17deg); }37 #lapYaw { position: absolute; left: 0; top: 0; width: 900px; height: 0; transform-style: preserve-3d; transform: translateZ(298px) rotateY(0deg) translateZ(-298px); }38 #lapYaw > div { position: absolute; }39 /* two shadows on the floor: a wide soft one, and a tight contact one under the base */40 .lt-floor { left: -150px; top: 0; width: 1200px; height: 780px; transform-origin: 50% 0; transform: translateY(24.5px) translateZ(-70px) rotateX(90deg);41 background: radial-gradient(50% 46% at 50% 50%, var(--lt-shadow-a) 0%, var(--lt-shadow-b) 50%, transparent 100%); }42 .lt-contact { left: 14px; top: 0; width: 872px; height: 604px; transform-origin: 50% 0; transform: translateY(24.4px) rotateX(90deg);43 background: var(--lt-contact); border-radius: 30px; filter: blur(4px); }44 .lt-base { left: 0; top: 0; width: 900px; height: 596px; transform-origin: 50% 0; transform: rotateX(90deg);45 border-radius: 10px 10px 22px 22px; background: var(--lt-deck); box-shadow: inset 0 0 0 1px var(--lt-deck-edge); overflow: hidden; }46 /* the edges of the base and of the lid: real faces around the rounded footprint (built in JS), so the laptop has47 thickness from any angle. Each face is lit by its own normal (--sh = darkening). */48 #baseBand, .lt-lidband { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }