Document excerpt

A system card, research paper or PDF page: the rest dims, one line highlights, slow push-in

Prompt for your agentpaste into Claude Code or Codex

Add the "Document excerpt" video component (PDF, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/document-excerpt.zip?v=9e3ec0d886f6 and unzip it into components/document-excerpt/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/document-excerpt && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o document-excerpt.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":"Paper"},{"value":"1","label":"PDF"},{"value":"2","label":"Slide"}]},{"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/claude/skin.css">
8<link rel="stylesheet" href="assets/skins/chatgpt/skin.css">
9<link rel="stylesheet" href="assets/skins/device/skin.css">
10<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
11<script src="assets/kit/motion/motion.js"></script>
12<script src="assets/skins/claude/icons.js"></script>
13<script src="assets/skins/chatgpt/icons.js"></script>
14<script src="assets/skins/device/icons.js"></script>
15<style>
16/* local font files, declared in-file so the renderer's font guard sees them (same files as assets/fonts/fonts.css) */
17@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:block;src:url('assets/fonts/SourceSerif4-normal.woff2') format('woff2')}
18@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:block;src:url('assets/fonts/SourceSerif4-italic.woff2') format('woff2')}
19@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:block;src:url('assets/fonts/Inter-normal.woff2') format('woff2')}
20@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:block;src:url('assets/fonts/JetBrainsMono-normal.woff2') format('woff2')}
21/* ---------- stage (DESIGN.md tokens) ---------- */
22:root{--stage:#F5F5F4}
23html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:var(--stage)}
24body.is-dark{--stage:#0E0E0F}
25#root{position:relative;width:100%;height:100%;overflow:hidden;background:var(--stage)}
26#scene{position:absolute;inset:0}
27#fader,#cam,#enter{position:absolute;inset:0}
28.obj{position:absolute}
29 
30/* ---------- shared highlight mechanics ---------- */
31.hl-layer{position:absolute;left:0;top:0;width:0;height:0;z-index:0;pointer-events:none}
32.hl-layer i{position:absolute;display:block;left:0;top:0;width:0;height:0;background:var(--mark);border-radius:var(--mark-r,3px)}
33.lift{position:relative;z-index:1}
34.hl{hyphens:manual;-webkit-hyphens:manual}
35 
36/* ==========================================================================
37   v0 · Paper: page 1 of "Attention Is All You Need" (arXiv v7), as a sheet.
38   Drawn at native page px, presented at zoom 2. The sheet's top edge is in
39   frame; below the abstract it dissolves into the stage (mask on #obj).
40   ========================================================================== */
41.pp{--sheet:#FFFFFF;--sheet-2:#FAFAF9;--ink:#111111;--stamp:#737373;--mark:rgba(0,0,0,.11);--mark-r:2px;
42  --sheet-shadow:0 .5px .75px rgba(0,0,0,.10),0 2px 6px -1px rgba(0,0,0,.06),0 30px 56px -26px rgba(0,0,0,.30)}
43.is-dark .pp{--sheet:#1D1D1F;--sheet-2:#1A1A1C;--ink:#EDEDED;--stamp:#8E8E90;--mark:rgba(255,255,255,.16);
44  --sheet-shadow:0 0 0 .5px rgba(255,255,255,.08),inset 0 .5px 0 rgba(255,255,255,.08),0 30px 60px -22px rgba(0,0,0,.9)}
45.pp-pos{position:absolute}
46.pp-zoom{zoom:2;position:relative;width:600px;height:820px}
47.pp-sheet{position:absolute;inset:0;background:linear-gradient(180deg,var(--sheet) 0%,var(--sheet-2) 60%);box-shadow:var(--sheet-shadow);color:var(--ink);
48  font-family:'Source Serif 4',serif;font-variation-settings:"opsz" 12;-webkit-font-smoothing:antialiased}

Open full file

Download project8 MB