Source tag

Small corner credit for third-party AI footage, e.g. "SOURCE: @OpenAI" with the real favicon/mark

Prompt for your agentpaste into Claude Code or Codex

Add the "Source tag" video component (Bottom bar, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/source-tag.zip?v=fd50a6f7529b and unzip it into components/source-tag/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/source-tag && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o source-tag.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","label":"Variant","type":"enum","default":"0","options":[{"value":"0","label":"Corner chip"},{"value":"1","label":"Bottom bar"},{"value":"2","label":"With favicon"}]},{"id":"theme","label":"Theme","type":"enum","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}]'>
3<head><meta charset="UTF-8"><meta name="viewport" content="width=1920, height=1080">
4<link rel="stylesheet" href="assets/fonts/fonts.css">
5<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
6<script src="assets/kit/motion/motion.js"></script>
7<style>
8*{box-sizing:border-box;margin:0;padding:0}html,body{width:1920px;height:1080px;overflow:hidden;background:transparent}
9#root{position:relative;width:1920px;height:1080px;font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased}
10.aroll{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
11#overlay{position:absolute;inset:0;--surface:#fff;--ink:#0a0a0a;--muted:#606060;--line:rgba(0,0,0,.1);--shadow:0 1px 2px rgba(0,0,0,.1),0 10px 24px -12px rgba(0,0,0,.32)}
12#overlay[data-theme=dark]{--surface:#18181a;--ink:#fafafa;--muted:#bababa;--line:rgba(255,255,255,.14);--shadow:0 1px 2px rgba(0,0,0,.28),0 10px 24px -12px rgba(0,0,0,.55)}
13#tag{position:absolute;left:80px;bottom:80px;width:max-content;color:var(--ink);opacity:0}
14#plate{position:absolute;inset:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
15#row{position:relative;display:flex;align-items:center;gap:18px;padding:20px 26px;white-space:nowrap}
16#mark{width:32px;height:32px;flex:none;background:currentColor;mask:var(--mark) center/contain no-repeat;-webkit-mask:var(--mark) center/contain no-repeat}
17#source{font-size:24px;font-weight:500;letter-spacing:.025em;line-height:28px;color:var(--muted)}
18#divider{height:24px;width:1px;background:var(--line)}
19#credit{font-size:30px;font-weight:500;letter-spacing:-.015em;line-height:36px}
20#detail{display:none;font-size:24px;line-height:30px;color:var(--muted);font-weight:400;letter-spacing:0}
21#label{display:flex;gap:18px;align-items:center}
22#tag.bar #plate{border-radius:8px}#tag.bar #row{padding:18px 16px;gap:12px}
23#tag.bar #divider{display:none}#tag.bar #credit{font-size:28px}#tag.bar #mark{width:24px;height:24px}
24#tag.bar #mark{color:#d97757}#tag.bar #accent{position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:#d97757}
25#tag.favicon{left:auto;right:80px}#tag.favicon #plate{border-radius:16px}#tag.favicon #row{padding:18px 24px;gap:18px}
26#tag.favicon #mark{display:none}#favicon{display:none;width:44px;height:44px;flex:none}
27#tag.favicon #favicon{display:block}#tag.favicon #label{flex-direction:column;align-items:flex-start;gap:1px}#tag.favicon #source{font-size:24px;line-height:28px}
28#tag.favicon #divider{display:none}#tag.favicon #credit{font-size:28px;line-height:34px}
29</style></head>
30<body><div id="root" data-composition-id="main" data-start="0" data-duration="8" data-width="1920" data-height="1080">
31<video class="clip aroll" id="arollLeft" src="assets/still/aroll-left.mp4" muted playsinline data-start="0" data-duration="8" data-track-index="0"></video>
32<video class="clip aroll" id="arollCenter" src="assets/still/aroll-center.mp4" muted playsinline data-start="0" data-duration="8" data-track-index="0"></video>
33<video class="clip aroll" id="arollRight" src="assets/still/aroll-right.mp4" muted playsinline data-start="0" data-duration="8" data-track-index="0"></video>
34<div id="overlay" class="clip" data-start="0" data-duration="8" data-track-index="1"><div id="tag"><div id="plate"></div><div id="accent"></div><div id="row"><span id="mark"></span><img id="favicon" src="assets/marks/deepmind-color.svg" alt=""><div id="label"><span id="source"></span><span id="divider"></span><span id="credit"></span><span id="detail"></span></div></div></div></div></div>
35<script>
36const CONFIG={duration:8,aroll:{'0':'right','1':'center','2':'left'},timing:{enter:.4,duration:.3,out:7.25},variants:{
37'0':{kind:'chip',source:'SOURCE',credit:'@OpenAI',mark:'assets/logos/openai.svg'},
38'1':{kind:'bar',source:'SOURCE',credit:'Anthropic',mark:'assets/logos/claude.svg'},
39'2':{kind:'favicon',source:'SOURCE',credit:'Google DeepMind',favicon:'assets/marks/deepmind-color.svg'}
40}};
41const vars=window.__hyperframes?.getVariables?.()||{};const vi=['0','1','2'].includes(String(vars.variant))?String(vars.variant):'0';const theme=vars.theme==='dark'?'dark':'light';const V=CONFIG.variants[vi];const $=s=>document.querySelector(s);
42$('#overlay').dataset.theme=theme;$('#tag').className=V.kind;$('#source').textContent=V.source;$('#credit').textContent=V.credit;
43if(V.mark)$('#mark').style.setProperty('--mark',`url("${V.mark}")`);if(V.favicon)$('#favicon').src=V.favicon;
44const ar=CONFIG.aroll?(typeof CONFIG.aroll==='string'?CONFIG.aroll:CONFIG.aroll[vi]):null;
45for(const side of ['left','center','right']){const el=$('#aroll'+side[0].toUpperCase()+side.slice(1));if(side!==ar)el.remove();}
46document.fonts.ready.then(()=>{const K=KitMotion,tl=gsap.timeline({paused:true}),T=CONFIG.timing;
47tl.fromTo('#tag',{opacity:0,y:6},{opacity:1,y:0,duration:T.duration,ease:'power3.out',immediateRender:false},T.enter);
48K.fadeOut(tl,'#tag',T.out,{duration:.35});

Open full file

Download project29 MB