19
Fail marker
Honest failure call-out on the output: strike, ring or red error line
Add the "Fail marker" video component (Wrong answer in chat, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/fail-marker.zip?v=9e10d97a87ba and unzip it into components/fail-marker/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/fail-marker && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o fail-marker.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":"Wrong answer in chat"},{"value":"1","label":"Broken app"},{"value":"2","label":"Terminal error"}]},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/chatgpt/skin.css" />11 <link rel="stylesheet" href="assets/skins/device/skin.css" />12 <link rel="stylesheet" href="assets/skins/claude-code/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/chatgpt/icons.js"></script>16 <script src="assets/skins/device/icons.js"></script>17 <script src="assets/skins/claude-code/icons.js"></script>18 <style>19 /* ---------- stage (DESIGN.md tokens) ---------- */20 :root {21 --stage: #F5F5F4;22 --ink: #0A0A0A;23 --ink-2: #6B6B6B;24 --ink-3: #A3A3A3;25 /* Fail marker red (Radix red: 9 = solid, 3 = soft fill, 11 = text). The terminal variant uses the CLI's own error red instead. */26 --fm-red: #E5484D;27 --fm-pill-bg: #FEEBEC;28 --fm-pill-ink: #CE2C31;29 }30 body.is-dark {31 --stage: #0E0E0F;32 --ink: #FAFAFA;33 --ink-2: #A1A1A1;34 --ink-3: #5E5E60;35 --fm-red: #E5484D;36 --fm-pill-bg: #3B1219;37 --fm-pill-ink: #FF9592;38 }39 * { box-sizing: border-box; }40 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: var(--stage); }41 #root { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--stage); font-family: "Inter", sans-serif; }42 #stage { position: absolute; inset: 0; background: var(--stage); }43 #cam { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }44 #place { position: absolute; left: 0; top: 0; opacity: 0; }45 #zoomer { position: relative; }46 #win { position: relative; }47 #root .hid { display: none; }48 .abs { position: absolute; }