Blog highlight

Official post or system card scrolls; one sentence highlights

Prompt for your agentpaste into Claude Code or Codex

Add the "Blog highlight" video component (OpenAI blog, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/blog-highlight.zip?v=201db630bcdb and unzip it into components/blog-highlight/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/blog-highlight && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o blog-highlight.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='[{"id":"variant","type":"enum","label":"Variant","default":"0","options":[{"value":"0","label":"OpenAI blog"},{"value":"1","label":"Anthropic system card"},{"value":"2","label":"Google DeepMind blog"}]},{"id":"theme","type":"enum","label":"Theme","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}]'>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=1920, height=1080">
6<link rel="stylesheet" href="assets/fonts/fonts.css">
7<link rel="stylesheet" href="assets/skins/device/skin.css">
8<link rel="stylesheet" href="assets/skins/gemini/skin.css">
9<link rel="stylesheet" href="assets/skins/chatgpt/skin.css">
10<script src="assets/skins/device/icons.js"></script>
11<script src="assets/skins/gemini/icons.js"></script>
12<script src="assets/skins/chatgpt/icons.js"></script>
13<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
14<style>
15/* Google Sans (OFL) ships with the Gemini skin; declared here too so the renderer's font guard sees it */
16@font-face{font-family:'Google Sans';font-style:normal;font-weight:400 700;font-display:block;src:url('assets/skins/gemini/fonts/GoogleSans-latin.woff2') format('woff2')}
17html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#F5F5F4}
18body.is-dark{background:#0E0E0F}
19#root{position:relative;width:100%;height:100%;overflow:hidden}
20#scene{position:absolute;inset:0}
21#fader,#stage{position:absolute;inset:0}
22.crop{position:absolute}
23#cam,#enter{position:absolute;inset:0}
24 
25/* ---------- shared page mechanics ---------- */
26.vp{position:absolute;left:0;right:0;bottom:0;overflow:hidden}          /* the page viewport (what the window shows) */
27.doc{position:absolute;left:0;top:0;width:100%;isolation:isolate}        /* the scrolled document */
28.dm{opacity:var(--dim,1)}                                                 /* everything but the selected sentence */
29.sel{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}   /* text selection: first child, so it paints under the glyphs */
30.doc > :not(.sel){position:relative}
31.sel i{position:absolute;display:block;left:0;top:0;width:0;height:0;background:var(--sel);opacity:0}
32.sbar{position:absolute;right:2px;width:7px;border-radius:4px;background:var(--sb);opacity:0}   /* macOS overlay scrollbar */
33.ico{display:block}
34.ico svg{display:block;width:100%;height:100%}
35#cur{will-change:transform}
36.dv-chrome__omnibox{min-width:0}                                          /* a long URL is clipped inside the omnibox, never pushes the toolbar */
37 
38/* ---------- variant 0 · openai.com/index/… (OpenAI Sans → Inter) ---------- */
39.oa{--bg:#FFFFFF;--ink:#0D0D0D;--ink2:#5D5D5D;--line:rgba(0,0,0,.1);--sel:#B3D7FF;--sb:rgba(0,0,0,.42);
40  position:absolute;inset:0;background:var(--bg);color:var(--ink);font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased}
41.is-dark .oa{--bg:#000000;--ink:#F3F3F3;--ink2:#A3A3A3;--line:rgba(255,255,255,.14);--sel:#3F638B;--sb:rgba(255,255,255,.45)}
42.oa-head{height:64px;display:flex;align-items:center;gap:18px;padding:0 24px}
43.oa-logo{width:68px;height:19px;display:block}
44.is-dark .oa-logo{filter:invert(1)}
45.oa-sp{flex:1}
46.oa-login{height:34px;padding:0 14px;border-radius:17px;display:flex;align-items:center;box-shadow:inset 0 0 0 1px var(--line);font:500 14px/1 Inter;color:var(--ink)}
47.oa-ibtn{width:22px;height:22px;color:var(--ink)}
48.oa-ibtn .ico{width:20px;height:20px;margin:1px}

Open full file

Download project1 MB