Artifact panel

Chat on the left; the built thing slides out on the right and comes alive

Prompt for your agentpaste into Claude Code or Codex

Add the "Artifact panel" video component (ChatGPT canvas, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/artifact-panel.zip?v=d9018229e935 and unzip it into components/artifact-panel/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/artifact-panel && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o artifact-panel.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":"Claude artifact"},{"value":"1","label":"ChatGPT canvas"},{"value":"2","label":"Gemini canvas"}]},
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/claude/skin.css" />
11    <link rel="stylesheet" href="assets/skins/chatgpt/skin.css" />
12    <link rel="stylesheet" href="assets/skins/gemini/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/claude/icons.js"></script>
16    <script src="assets/skins/chatgpt/icons.js"></script>
17    <script src="assets/skins/gemini/icons.js"></script>
18    <style>
19      /* Barlow + Barlow Condensed (Jeremy Tribby, SIL OFL 1.1), vendored latin subset. Used only inside the
20         Claude Dashboard artifact, which the official Dashboards frame sets in this grotesque family. */
21      @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: block; src: url("assets/vendor/fonts/Barlow-400.woff2") format("woff2"); }
22      @font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: block; src: url("assets/vendor/fonts/Barlow-500.woff2") format("woff2"); }
23      @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: block; src: url("assets/vendor/fonts/Barlow-600.woff2") format("woff2"); }
24      @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: block; src: url("assets/vendor/fonts/BarlowCondensed-600.woff2") format("woff2"); }
25      * { margin: 0; padding: 0; box-sizing: border-box; }
26      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #F5F5F4; }
27      #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Inter", sans-serif; }
28 
29      /* ---------- stage (DESIGN.md tokens) ---------- */
30      #stage { position: absolute; inset: 0; background: var(--stage); }
31      #stage[data-theme="light"] { --stage: #F5F5F4; }
32      #stage[data-theme="dark"] { --stage: #0E0E0F; }
33 
34      /* the window is drawn at real app CSS px (CONFIG.frame) and presented at CONFIG.frame.zoom */
35      #win-pos { position: absolute; }
36      #win-zoom { position: relative; }
37      .ap-win { position: relative; }
38      #ptr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; z-index: 90; pointer-events: none; }
39      #ptr > div { position: absolute; left: 0; top: 0; }
40 
41      /* ======================================================================
42         Shared split layout. The chat column keeps its final width the whole
43         time (no reflow); it sits centred before the split and glides left
44         while the panel slides out of the window's right edge.
45         ====================================================================== */
46      .ap-chat { position: absolute; display: flex; flex-direction: column; z-index: 2; }
47      .ap-thread { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
48      .ap-dock { flex: none; position: relative; }

Open full file

Download project1 MB