Live deploy

Local preview, URL types in, live site opens, link copies

Prompt for your agentpaste into Claude Code or Codex

Add the "Live deploy" video component (Claude publish, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/live-deploy.zip?v=864f98901d78 and unzip it into components/live-deploy/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/live-deploy && npx hyperframes@0.8.162 render . --variables '{"variant":"2","theme":"light"}' -o live-deploy.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":"Vercel"},{"value":"1","label":"ChatGPT Sites"},{"value":"2","label":"Claude publish"}]},
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/device/skin.css">
11<link rel="stylesheet" href="assets/skins/chatgpt/skin.css">
12<link rel="stylesheet" href="assets/skins/claude/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/device/icons.js"></script>
16<script src="assets/skins/chatgpt/icons.js"></script>
17<script src="assets/skins/claude/icons.js"></script>
18<style>
19/* Geist + Geist Mono (Vercel's own typefaces, SIL OFL), local files: used only inside the Vercel card */
20@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: block; src: url('assets/geist/Geist-latin-wght.woff2') format('woff2'); }
21@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: block; src: url('assets/geist/GeistMono-latin-wght.woff2') format('woff2'); }
22 
23html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#F5F5F4}
24body.is-dark{background:#0E0E0F}
25#root{position:relative;width:100%;height:100%;overflow:hidden;font-family:'Inter',sans-serif}
26#scene{position:absolute;inset:0;background:#F5F5F4}
27body.is-dark #scene{background:#0E0E0F}
28#fader{position:absolute;inset:0}
29#group{position:absolute}
30#gz{position:relative}
31.surf{position:absolute;top:0}
32.ic-stack{position:relative;display:inline-grid;place-items:center;flex:none}
33.ic-stack > span{grid-area:1/1;display:grid;place-items:center}
34.ic-stack svg{display:block}
35.pg{position:absolute;inset:0}
36 
37/* =====================================================================
38   THE SITE the AI built. Its own small type scale: 34 (headline) · 15 (body) · 13 (labels).
39   Laid out for a 400–520 px pane. Light + dark.
40   ===================================================================== */
41.st{--st-bg:#FFFFFF;--st-ink:#0B0B0C;--st-ink-2:#5E5E62;--st-line:rgba(0,0,0,.075);--st-line-2:rgba(0,0,0,.14);--st-chip:#F2F2F0;--st-card:#FFFFFF;
42  --st-btn:#0B0B0C;--st-btn-ink:#FFFFFF;--st-meter:#E9E7E2;
43  position:absolute;inset:0;overflow:hidden;background:var(--st-bg);color:var(--st-ink);
44  font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"kern" 1,"cv11" 1}
45.st *{box-sizing:border-box}
46.st[data-tint="warm"]{--st-bg:#FBF8F3;--st-chip:#F1ECE3;--st-meter:#ECE6DB}
47.st[data-tint="cool"]{--st-bg:#FFFFFF;--st-chip:#F0F2F1}
48.st[data-tint="grey"]{--st-bg:#FAFAFA;--st-chip:#EFEFEF}

Open full file

Download project1 MB