27
Inbox triage
Inbox sorts itself; Reply/Skip/Urgent chips land; drafted reply slides out
Add the "Inbox triage" video component (Grok Bot, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/inbox-triage.zip?v=1dd595807198 and unzip it into components/inbox-triage/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/inbox-triage && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o inbox-triage.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"},{"value":"1","label":"Grok Bot"},{"value":"2","label":"Jev confidence scores"}]},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/grok/skin.css" />12 <link rel="stylesheet" href="assets/skins/device/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/grok/icons.js"></script>17 <script src="assets/skins/device/icons.js"></script>18 <style>19 * { margin: 0; padding: 0; box-sizing: border-box; }20 html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }21 body[data-theme="dark"] { background: #0e0e0f; }22 #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: 'Inter', sans-serif; }2324 /* ---------- stage: flat, DESIGN.md tokens ---------- */25 #stage { position: absolute; inset: 0; background: #f5f5f4; }26 body[data-theme="dark"] #stage { background: #0e0e0f; }27 #center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }28 #cam { position: relative; }29 #win-wrap { position: relative; opacity: 0; }30 #zoom { position: relative; }31 #ptr { opacity: 0; }3233 /* ---------- bottom-anchored thread items: each grows from height 0 as it arrives ---------- */34 .tr-item { position: relative; display: flow-root; flex: none; clip-path: inset(-10px -10px -3px -10px); }3536 /* ---------- the triage list (shared by all three variants) ---------- */37 .tr-list { position: relative; }38 .tr-row { position: absolute; left: 0; right: 0; top: 0; }39 .tr-row > .tr-lift, .tr-row > .tr-bg, .tr-row > .tr-hl { position: absolute; inset: 0; border-radius: var(--tr-r, 12px); }40 .tr-lift { opacity: 0; }41 .tr-hl { opacity: 0; }42 .tr-sep { position: absolute; top: 0; height: 1px; }43 .tr-in { position: relative; }44 .tr-main { position: relative; display: flex; align-items: center; }45 .tr-txt { flex: 1; min-width: 0; }46 .tr-l1 { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }47 .tr-from { font-weight: 600; letter-spacing: -0.01em; }48 .tr-time { font-variant-numeric: tabular-nums; }