08
Browser agent
Agent cursor clicks through a website; step chips stack
Add the "Browser agent" video component (Claude in Chrome, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/browser-agent.zip?v=0ea8db709312 and unzip it into components/browser-agent/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/browser-agent && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o browser-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":"ChatGPT agent"},{"value":"1","label":"Claude in Chrome"},{"value":"2","label":"Perplexity Comet"}]},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 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>10 <link rel="stylesheet" href="assets/fonts/fonts.css" />11 <link rel="stylesheet" href="assets/skins/chatgpt/skin.css" />12 <link rel="stylesheet" href="assets/skins/claude/skin.css" />13 <link rel="stylesheet" href="assets/skins/device/skin.css" />14 <link rel="stylesheet" href="assets/skins/perplexity/skin.css" />15 <script src="assets/skins/chatgpt/icons.js"></script>16 <script src="assets/skins/claude/icons.js"></script>17 <script src="assets/skins/device/icons.js"></script>18 <script src="assets/skins/perplexity/icons.js"></script>19 <script src="assets/kit/motion/motion.js"></script>20 <style>21 @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: block; src: url("assets/fonts/Inter-normal.woff2") format("woff2"); }22 @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: block; src: url("assets/fonts/SourceSerif4-normal.woff2") format("woff2"); }23 @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: block; src: url("assets/fonts/JetBrainsMono-normal.woff2") format("woff2"); }2425 * { margin: 0; padding: 0; box-sizing: border-box; }26 /* DESIGN.md stage tokens: flat, no texture */27 :root { --stage: #F5F5F4; }28 html[data-theme="dark"] { --stage: #0E0E0F; }29 html, body { width: 1920px; height: 1080px; overflow: hidden; background: var(--stage); }30 #root { width: 100%; height: 100%; position: relative; font-family: "Inter", sans-serif; }31 #stage { position: absolute; inset: 0; overflow: hidden; background: var(--stage); }32 /* camera: one slow push-in (≤ 1.02) on this wrapper only */33 #cam { position: absolute; inset: 0; transform-origin: 50% 50%; }34 /* the window's frame position; the entrance and the loop fade live here */35 #place { position: absolute; transform-origin: 50% 50%; }36 #zoomer { position: relative; }3738 /* ---------- agent pointer: a box whose (0,0) is the pointer tip ---------- */39 .ag-cursor { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 80; pointer-events: none; opacity: 0; }40 .ag-cursor > * { position: absolute; }41 /* the request is typed into each product's own composer, then posted */42 .ag-ph { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; }43 .ag-typed { position: relative; display: block; flex: 1 1 auto; min-width: 0; white-space: pre-wrap; }4445 /* ---------- shared site blocks (fictional, monochrome sites: the product accent stays the only accent).46 Each site uses exactly three type sizes: --s-s (small), --s-m (body/controls), --s-l (title). ---------- */47 .site { position: absolute; inset: 0; overflow: hidden; background: var(--s-bg); color: var(--s-ink); font-family: "Inter", sans-serif;48 font-feature-settings: "cv11" 1, "tnum" 1; -webkit-font-smoothing: antialiased; letter-spacing: -0.006em; }