Self-check loop

Agent screenshots its work, rings the bug, fixes it, ticks it

Prompt for your agentpaste into Claude Code or Codex

Add the "Self-check loop" video component (Game playtest, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/self-check-loop.zip?v=859fa5cf80d7 and unzip it into components/self-check-loop/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/self-check-loop && npx hyperframes@0.8.162 render . --variables '{"variant":"2","theme":"light"}' -o self-check-loop.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":"Browser check"},{"value":"1","label":"Test suite"},{"value":"2","label":"Game playtest"}]},
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/chatgpt/skin.css" />
13    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
14    <script src="assets/kit/motion/motion.js"></script>
15    <script src="assets/skins/codex/icons.js"></script>
16    <script src="assets/skins/claude-code/icons.js"></script>
17    <script src="assets/skins/chatgpt/icons.js"></script>
18    <style>
19      * { margin: 0; padding: 0; box-sizing: border-box; }
20      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }
21      html[data-theme="dark"], html[data-theme="dark"] body { background: #0e0e0f; }
22      #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Inter", sans-serif; }
23      #stage { position: absolute; inset: 0; background: #f5f5f4; }
24      html[data-theme="dark"] #stage { background: #0e0e0f; }
25      #pos { position: absolute; left: 0; top: 0; }
26      #scaler { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
27 
28      /* ---------- the self-check marks (shared) ---------- */
29      .sc-ring { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 8; }
30      /* a screenshot: a copy of the surface that lifts off and lands in the thread as a thumbnail */
31      .sc-shot { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; pointer-events: none; z-index: 30; opacity: 0; }
32      .sc-shot > .sc-shot-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
33      .sc-shot svg.sc-shot-mark { position: absolute; left: 0; top: 0; overflow: visible; }
34      .sc-shots { display: flex; gap: 10px; }
35      .sc-slot { flex: none; }
36 
37      /* floating-window shadows (DESIGN.md) */
38      .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; }
39      .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; }
40 
41      /* ====================== v0 · Codex in-app browser (the codex skin has no Browser pane) ====================== */
42      .sk-codex .sc-btab { flex: none; width: 150px; }
43      .sk-codex .sc-bbar { position: relative; height: 42px; flex: none; display: flex; align-items: center; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--cx-line); background: var(--cx-panel); }
44      .sk-codex .sc-bbar .cx-ib { width: 28px; height: 28px; }
45      .sk-codex .sc-bbar .cx-ib .cx-i, .sk-codex .sc-bbar .cx-ib > svg { width: 16px; height: 16px; }
46      .sk-codex .cx-ib.is-off { color: var(--cx-icon-off); }
47      .sk-codex .sc-url { position: absolute; left: 112px; right: 112px; top: 0; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--cx-ink-2); letter-spacing: 0; white-space: nowrap; }
48      .sk-codex .sc-right { margin-left: auto; }

Open full file

Download project1 MB