Email card

An email (From / Subject / body) with the key line highlighted: a launch announcement, an agent's drafted reply

Prompt for your agentpaste into Claude Code or Codex

Add the "Email card" video component (Apple Mail, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/email-card.zip?v=a7fead96a35f and unzip it into components/email-card/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/email-card && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o email-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.

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":"Gmail"},{"value":"1","label":"Apple Mail"},{"value":"2","label":"Plain"}]},
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<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
12<script src="assets/kit/motion/motion.js"></script>
13<script src="assets/skins/device/icons.js"></script>
14<script src="assets/skins/gemini/icons.js"></script>
15<style>
16/* Google Sans ships with the Gemini skin (OFL); Gmail's UI and Google's own emails are set in it */
17@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 400 700; font-display: block;
18  src: url('assets/skins/gemini/fonts/GoogleSans-latin.woff2') format('woff2');
19  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
20@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 400 700; font-display: block;
21  src: url('assets/skins/gemini/fonts/GoogleSans-latin-ext.woff2') format('woff2');
22  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
23 
24* { margin: 0; padding: 0; box-sizing: border-box; }
25html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #F5F5F4; }
26body[data-theme="dark"] { background: #0E0E0F; }
27#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: 'Inter', sans-serif; }
28 
29/* ---------- stage: flat, DESIGN.md tokens ---------- */
30#stage { position: absolute; inset: 0; background: #F5F5F4; }
31body[data-theme="dark"] #stage { background: #0E0E0F; }
32#fader { position: absolute; inset: 0; }
33#center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
34#cam { position: relative; }
35#enter { position: relative; opacity: 0; }
36#zoom { position: relative; }
37#cur { will-change: transform; }
38 
39/* ---------- shared email-body mechanics ---------- */
40.bd { position: relative; }                       /* the selection's reference box */
41.bd > :not(.sel) { position: relative; }          /* text paints above the selection layer */
42.sel { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
43.sel i { position: absolute; display: block; left: 0; top: 0; width: 0; height: 0; background: var(--sel); opacity: 0; }
44.dm { opacity: var(--dim, 1); }                   /* everything in the body except the selected sentence */
45.nw { white-space: nowrap; }
46.ic { display: block; }
47.ic svg { display: block; width: 100%; height: 100%; }
48

Open full file

Download project8 MB