12
Approval gate
Agent pauses at a permission prompt; approve, it continues
Add the "Approval gate" video component (Claude Code permission, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/approval-gate.zip?v=cb36f4bf39a8 and unzip it into components/approval-gate/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/approval-gate && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o approval-gate.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":"dots approval"},{"value":"1","label":"Claude Code permission"},{"value":"2","label":"Codex sandbox"}]},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 <title>Approval gate</title>10 <link rel="stylesheet" href="assets/fonts/fonts.css" />11 <link rel="stylesheet" href="assets/skins/device/skin.css" />12 <link rel="stylesheet" href="assets/skins/chatgpt/skin.css" />13 <link rel="stylesheet" href="assets/skins/claude-code/skin.css" />14 <link rel="stylesheet" href="assets/skins/codex/skin.css" />15 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>16 <script src="assets/kit/motion/motion.js"></script>17 <script src="assets/skins/device/icons.js"></script>18 <script src="assets/skins/chatgpt/icons.js"></script>19 <script src="assets/skins/claude-code/icons.js"></script>20 <script src="assets/skins/codex/icons.js"></script>21 <style>22 * { margin: 0; padding: 0; box-sizing: border-box; }23 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }24 body.is-dark { background: #0e0e0f; }25 #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Inter", sans-serif; }26 /* the stage is flat (DESIGN.md stage tokens) */27 #stage { position: absolute; inset: 0; background: #f5f5f4; }28 #stage.is-dark { background: #0e0e0f; }29 #place { position: absolute; left: 0; top: 0; opacity: 0; }30 #win { position: relative; }3132 /* DESIGN.md floating-window shadow (contact + diffuse, light from above) */33 .sh-light { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06), 0 24px 60px -20px rgba(0, 0, 0, 0.25) !important; }34 .sh-dark { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 24px 60px -20px rgba(0, 0, 0, 0.8) !important; }3536 /* ------------------------------------------------------------------37 0 · dots (ChatGPT iOS app on iPhone 17 Pro, keyboard up)38 ------------------------------------------------------------------ */39 .sk-chatgpt.dt-app {40 position: absolute; inset: 0; font-family: "Inter", sans-serif; -webkit-font-smoothing: antialiased;41 --dt-bg: #ffffff; --dt-ink: #0d0d0d; --dt-ink-2: #6b6b6b; --dt-card: #ffffff; --dt-card-edge: rgba(0, 0, 0, 0.08);42 --dt-tile: #f2f2f2; --dt-rule: rgba(0, 0, 0, 0.07);43 --dt-act: #e8f0fc; --dt-act-ink: #2d63b3; /* the dot action pill, light mapping (skin .cg-dot-action) */44 --dt-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 14px 30px -16px rgba(0, 0, 0, 0.2);45 --dt-kb: #e3e4e9;46 --dt-touch: rgba(60, 60, 67, 0.3); --dt-touch-ring: rgba(255, 255, 255, 0.85);47 --cg-composer: #fdfdfd; --cg-ios-circ: #f2f2f2; --cg-placeholder: #737373; /* 4.6:1 on the #fdfdfd pill */48 background: var(--dt-bg); color: var(--dt-ink);