Background agent

The laptop lid closes, the cloud task card keeps progressing, and a done notification arrives

Prompt for your agentpaste into Claude Code or Codex

Add the "Background agent" video component (Codex cloud, 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":"0","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.

index.htmlhtmlDownload

1<!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; }
25 
26  /* ---------- 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); }
30 
31  /* ================= 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 has
47     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; }

Open full file

Download project1 MB