Computer use

Agent cursor with a badge opens and drives a real desktop app

Prompt for your agentpaste into Claude Code or Codex

Add the "Computer use" video component (Codex driving Blender, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/computer-use.zip?v=446c3af66f16 and unzip it into components/computer-use/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/computer-use && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o computer-use.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='[{"id":"variant","type":"enum","label":"Variant","default":"0","options":[{"value":"0","label":"Codex driving Blender"},{"value":"1","label":"Muse on Mac"},{"value":"2","label":"Claude"}]},{"id":"theme","type":"enum","label":"Theme","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}]'>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=1920, height=1080">
6<link rel="stylesheet" href="assets/fonts/fonts.css">
7<link rel="stylesheet" href="assets/skins/device/skin.css">
8<link rel="stylesheet" href="assets/skins/codex/skin.css">
9<link rel="stylesheet" href="assets/skins/claude/skin.css">
10<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
11<script src="assets/skins/device/icons.js"></script>
12<script src="assets/skins/codex/icons.js"></script>
13<script src="assets/skins/claude/icons.js"></script>
14<script src="assets/kit/motion/motion.js"></script>
15<style>
16/* ===================== stage (DESIGN.md tokens) ===================== */
17:root{--stage:#F5F5F4;--surface:#FFFFFF;--ink:#0A0A0A;--ink2:#6B6B6B;--ink3:#A3A3A3;--hair:rgba(0,0,0,.08);
18  --mac-accent:#007AFF;--mac-sel-text:#B3D7FF}
19body.is-dark{--stage:#0E0E0F;--surface:#18181A;--ink:#FAFAFA;--ink2:#A1A1A1;--ink3:#5E5E60;--hair:rgba(255,255,255,.10);
20  --mac-accent:#0A84FF;--mac-sel-text:#3F638B}
21html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:var(--stage)}
22#root{position:relative;width:100%;height:100%;overflow:hidden;background:var(--stage);font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased;color:var(--ink)}
23#scene,#fader,#cam{position:absolute;inset:0}
24#cam{transform-origin:960px 520px}
25 
26/* ===================== app windows (placed from CONFIG) ===================== */
27#win,#cwin{position:absolute;left:0;top:0;width:0;height:0;opacity:0}
28#win{transform-origin:50% 55%}
29#cwin{transform-origin:50% 60%}
30.win-shadow{position:absolute;inset:0;
31  box-shadow:0 0 0 .5px rgba(0,0,0,.16),0 2px 4px rgba(0,0,0,.07),0 34px 80px -26px rgba(0,0,0,.36)}
32.is-dark .win-shadow{box-shadow:0 0 0 1px rgba(0,0,0,.7),0 2px 4px rgba(0,0,0,.4),0 34px 80px -20px rgba(0,0,0,.85)}
33.win-rim{position:absolute;inset:0;pointer-events:none;display:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
34.is-dark .win-rim{display:block}
35 
36/* v0 · Blender 5.1.1: real window captures, one per UI state */
37.bl-img{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0}
38.bl-img.on{opacity:1}
39 
40/* ===================== Spotlight (macOS 27 glass, official frame) ===================== */
41#sp{position:absolute;left:530px;top:330px;width:860px;border-radius:34px;overflow:hidden;opacity:0;
42  --sp-ink:#1D1D1F;--sp-ink2:rgba(0,0,0,.56);--sp-ink3:rgba(0,0,0,.30);--sp-row:rgba(0,0,0,.05);--sp-sep:rgba(0,0,0,.09);
43  background:linear-gradient(180deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.66) 100%);
44  -webkit-backdrop-filter:blur(36px) saturate(1.8);backdrop-filter:blur(36px) saturate(1.8);
45  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.70),0 0 0 1px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.12),0 30px 70px -22px rgba(0,0,0,.32)}
46.is-dark #sp{--sp-ink:#F5F5F7;--sp-ink2:rgba(255,255,255,.55);--sp-ink3:rgba(255,255,255,.32);--sp-row:rgba(255,255,255,.09);--sp-sep:rgba(255,255,255,.10);
47  background:linear-gradient(180deg,rgba(58,58,62,.80) 0%,rgba(40,40,44,.74) 100%);
48  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.10),0 0 0 1px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.4),0 30px 70px -20px rgba(0,0,0,.85)}

Open full file

Download project19 MB