Scheduled run

Week strip with recurring task pills firing on time

Prompt for your agentpaste into Claude Code or Codex

Add the "Scheduled run" video component (ChatGPT tasks, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/scheduled-run.zip?v=98f4d0f906e0 and unzip it into components/scheduled-run/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/scheduled-run && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o scheduled-run.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":"dots heartbeat"},{"value":"1","label":"ChatGPT tasks"},{"value":"2","label":"Codex automations"}]},
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/codex/skin.css" />
12<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
13<script src="assets/kit/motion/motion.js"></script>
14<script src="assets/skins/chatgpt/icons.js"></script>
15<script src="assets/skins/codex/icons.js"></script>
16<style>
17  * { margin: 0; padding: 0; box-sizing: border-box; }
18  html, body { width: 1920px; height: 1080px; overflow: hidden; background: #F5F5F4; }
19  html[data-theme="dark"], html[data-theme="dark"] body { background: #0E0E0F; }
20  #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: Inter, sans-serif; }
21 
22  /* ---------- stage (DESIGN.md tokens) ---------- */
23  #stage { position: absolute; inset: 0; background: #F5F5F4; }
24  #stage[data-theme="dark"] { background: #0E0E0F; }
25 
26  /* The object is drawn at native UI px and presented with one zoom per variant (CONFIG.variants[n].zoom). */
27  #pos { position: absolute; left: 0; right: 0; top: 160px; display: flex; justify-content: center; }
28  #cardIn { position: relative; }
29 
30  /* =====================================================================
31     THE CARD: one schedule surface, skinned per product
32     ===================================================================== */
33  .card {
34    position: relative; width: 682px; border-radius: 18px; overflow: hidden;
35    background: var(--c-bg); color: var(--c-ink);
36    box-shadow: var(--c-shadow);
37    -webkit-font-smoothing: antialiased;
38    /* light defaults */
39    --c-ghost: rgba(0, 0, 0, 0.24);
40    --c-col: rgba(0, 0, 0, 0.055);
41    --c-todaycol: rgba(0, 0, 0, 0.032);
42    --c-shadow: 0 0 0 0.6px rgba(0, 0, 0, 0.07), 0 0.6px 1.2px rgba(0, 0, 0, 0.06), 0 14px 34px -11px rgba(0, 0, 0, 0.24);
43    /* routine runs: quiet neutral pills (the run we follow is the only accent) */
44    --pf-bg: #f3f3f3; --pf-edge: rgba(0, 0, 0, 0.06); --pf-ink: #6b6b6b;
45  }
46  .card[data-theme="dark"] {
47    --c-ghost: rgba(255, 255, 255, 0.26);
48    --c-col: rgba(255, 255, 255, 0.06);

Open full file

Download project1 MB