Sourced answer

Answer builds line by line while numbered source chips pop in

Prompt for your agentpaste into Claude Code or Codex

Add the "Sourced answer" video component (Perplexity, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/sourced-answer.zip?v=88a538211ed1 and unzip it into components/sourced-answer/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/sourced-answer && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o sourced-answer.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":"Perplexity"},{"value":"1","label":"ChatGPT search"},{"value":"2","label":"Gemini Deep Research"}]},
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/perplexity/skin.css" />
11    <link rel="stylesheet" href="assets/skins/chatgpt/skin.css" />
12    <link rel="stylesheet" href="assets/skins/gemini/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/perplexity/icons.js"></script>
16    <script src="assets/skins/chatgpt/icons.js"></script>
17    <script src="assets/skins/gemini/icons.js"></script>
18    <style>
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: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: block; src: url("assets/fonts/SourceSerif4-normal.woff2") format("woff2"); }
21      @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"); }
22      @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"); }
23 
24      * { margin: 0; padding: 0; box-sizing: border-box; }
25      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #F5F5F4; }
26      html[data-theme="dark"], html[data-theme="dark"] body { background: #0E0E0F; }
27      #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Inter", sans-serif; }
28 
29      /* ---------- stage: the library's flat stage (ChatGPT window) or, for the page crops, the product's own page colour ---------- */
30      #stage { position: absolute; inset: 0; overflow: hidden; background: #F5F5F4; }
31      html[data-theme="dark"] #stage { background: #0E0E0F; }
32      html.v-pplx #stage { background: #faf7f4; }
33      html.v-pplx[data-theme="dark"] #stage { background: #161412; }
34      html.v-gemini #stage { background: #fdfdfd; }
35      html.v-gemini[data-theme="dark"] #stage { background: #000000; }
36      #place { position: absolute; left: 0; top: 0; }
37      #zoom { position: relative; }
38      .sa-root { position: relative; overflow: hidden; }
39 
40      /* shared favicon disc: the cited site's real mark, with a ring in the surface colour */
41      .sa-fav { position: relative; display: grid; place-items: center; border-radius: 50%; overflow: hidden; flex: none; }
42      .sa-fav svg, .sa-fav img { display: block; }
43      /* the source card a hovered chip opens (extrapolated per product, see DECISIONS.md) */
44      .sa-card { position: absolute; left: 0; top: 0; z-index: 30; opacity: 0; }
45      .sa-card-top { display: flex; align-items: center; }
46      .sa-card-site { white-space: nowrap; }
47      .sa-card-pager { margin-left: auto; display: flex; align-items: center; gap: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
48      .sa-card-pager svg { display: block; }

Open full file

Download project1 MB