67
Post card
A real-style launch or reaction post with the key phrase highlighted and optional media
Add the "Post card" video component (X, light) from everestchris.com to this project.
1. Download https://ai-component-library-dun.vercel.app/projects/post-card.zip?v=382a58287e52 and unzip it into components/post-card/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/post-card && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o post-card.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":"X"},{"value":"1","label":"Threads"},{"value":"2","label":"LinkedIn"}]},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 <title>Post card</title>10 <link rel="stylesheet" href="assets/fonts/fonts.css" />11 <link rel="stylesheet" href="assets/skins/chatgpt/skin.css" />12 <link rel="stylesheet" href="assets/skins/claude/skin.css" />13 <link rel="stylesheet" href="assets/skins/gemini/skin.css" />14 <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>15 <script src="assets/kit/motion/motion.js"></script>16 <script src="assets/skins/chatgpt/icons.js"></script>17 <script src="assets/skins/claude/icons.js"></script>18 <script src="assets/skins/gemini/icons.js"></script>19 <style>20 * { margin: 0; padding: 0; box-sizing: border-box; }2122 /* ---- Stage (DESIGN.md): flat, no texture ---- */23 html { --stage: #F5F5F4; }24 html.dark { --stage: #0E0E0F; }25 html, body { width: 1920px; height: 1080px; overflow: hidden; background: var(--stage); }26 #root { position: relative; width: 100%; height: 100%; overflow: hidden; }27 #stage { position: absolute; inset: 0; background: var(--stage); }28 #cam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }29 #place { position: relative; }3031 /* floating-window shadow from DESIGN.md: sharp contact shadow + one large diffuse one */32 html { --float-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 60px -20px rgba(0,0,0,.25); }33 html.dark { --float-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 60px -20px rgba(0,0,0,.8); }3435 /* ---- the key-phrase highlight (our editorial layer, not platform UI) ----36 A marker band in the product accent behind the words; the words stay ink. */37 .pc-text { position: relative; }38 .pc-text .w { position: relative; z-index: 1; }39 .pc-text .k-start { margin-left:3px; }40 .pc-text .k-end { margin-right:3px; }41 .hl { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; background: var(--hl); }4243 /* ======================= X (x.com web, timeline post) =======================44 Copied from library/46-launch-post (same X chrome across the library).45 Light = X "Default", dark = X "Lights out". Real CSS px, presented at CONFIG zoom. */46 html {47 --x-bg: #FFFFFF; --x-ink: #0F1419; --x-ink2: #536471;48 --x-line: #EFF3F4; --x-media-line: #CFD9DE;