Keyword pills

One to three floating keyword pills near the speaker's gesture, e.g. "Agents", "MCP", "Context window"

Prompt for your agentpaste into Claude Code or Codex

Add the "Keyword pills" video component (Pair, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/keyword-pills.zip?v=1fc5f161747f and unzip it into components/keyword-pills/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/keyword-pills && npx hyperframes@0.8.162 render . --variables '{"variant":"1","theme":"light"}' -o keyword-pills.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":"Single"},{"value":"1","label":"Pair"},{"value":"2","label":"Trio stagger"}]},{"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"><link rel="stylesheet" href="assets/fonts/fonts.css"><script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script><script src="assets/kit/motion/motion.js"></script>
4<style>*{box-sizing:border-box;margin:0;padding:0}html,body{width:1920px;height:1080px;overflow:hidden;background:transparent}#root{position:relative;width:1920px;height:1080px;font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased}.aroll,#loopFrame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#loopFrame{opacity:0}#overlay{position:absolute;inset:0;--surface:#fff;--ink:#0a0a0a;--edge:rgba(0,0,0,.09);--shadow:0 1px 2px rgba(0,0,0,.06),0 8px 20px -8px rgba(0,0,0,.22)}#overlay[data-theme=dark]{--surface:#18181a;--ink:#fafafa;--edge:rgba(255,255,255,.10);--shadow:0 1px 2px rgba(0,0,0,.2),0 10px 22px -12px rgba(0,0,0,.6)}.pill{position:absolute;display:flex;align-items:center;justify-content:center;min-height:86px;padding:18px 32px;border-radius:43px;border:1px solid var(--edge);box-shadow:var(--shadow);background:var(--surface);color:var(--ink);font-size:40px;line-height:48px;font-weight:500;letter-spacing:-.02em;white-space:nowrap;opacity:0}.word{display:block}</style></head>
5<body><div id="root" data-composition-id="main" data-start="0" data-duration="8" data-width="1920" data-height="1080">
6<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><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><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><div id="overlay" class="clip" data-start="0" data-duration="8" data-track-index="1"></div></div>
7<script>
8const CONFIG={duration:8,aroll:{'0':'right','1':'left','2':'left'},timing:{enter:.6,stagger:.55,exit:7.2},variants:{
9'0':{words:[{text:'Agents',x:520,y:688}]},
10'1':{words:[{text:'Tools',x:1160,y:620},{text:'Memory',x:1340,y:740}]},
11'2':{words:[{text:'Agents',x:1150,y:534},{text:'MCP',x:1365,y:652},{text:'Context window',x:1150,y:770}]}
12}};
13const v=window.__hyperframes?.getVariables?.()||{},vi=['0','1','2'].includes(String(v.variant))?String(v.variant):'0',theme=v.theme==='dark'?'dark':'light';const $=s=>document.querySelector(s),ov=$('#overlay');ov.dataset.theme=theme;
14const ar=CONFIG.aroll?(typeof CONFIG.aroll==='string'?CONFIG.aroll:CONFIG.aroll[vi]):null;
15for(const side of ['left','center','right']){const e=$('#aroll'+side[0].toUpperCase()+side.slice(1));if(side!==ar)e.remove();}
16const pills=CONFIG.variants[vi].words.map((w,i)=>{const p=document.createElement('div');p.className='pill';p.id='pill'+i;p.style.left=w.x+'px';p.style.top=w.y+'px';const word=document.createElement('span');word.className='word';word.textContent=w.text;p.appendChild(word);ov.appendChild(p);return p;});
17document.fonts.ready.then(()=>{const K=KitMotion,tl=gsap.timeline({paused:true}),T=CONFIG.timing;
18pills.forEach((p,i)=>{K.fadeUp(tl,p,T.enter+i*T.stagger,{distance:12,blur:0,duration:.32});tl.fromTo(p,{scale:.96},{scale:1,duration:.32,ease:'power3.out',immediateRender:false},T.enter+i*T.stagger);K.fadeOut(tl,p,T.exit+(pills.length-1-i)*.08,{duration:.3});gsap.set(p,{opacity:0,y:12,scale:.96});});
19 
20tl.set({}, {},CONFIG.duration);window.__timelines=window.__timelines||{};window.__timelines.main=tl;tl.seek(0);});
21</script></body></html>

Download project36 MB