Timestamp chip

Date / relative-time context for a clip or launch, e.g. "Sep 29, 2026 · DevDay", "3 days ago"

Prompt for your agentpaste into Claude Code or Codex

Add the "Timestamp chip" video component (Date, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/timestamp-chip.zip?v=9709df140c50 and unzip it into components/timestamp-chip/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/timestamp-chip && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o timestamp-chip.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":"Date"},{"value":"1","label":"Relative time"},{"value":"2","label":"Live clock"}]},{"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:100%;height:100%;font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased}.aroll{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#overlay{position:absolute;inset:0;--surface:#fff;--ink:#0a0a0a;--muted:#626262;--line:rgba(0,0,0,.1);--shadow:0 1px 2px rgba(0,0,0,.1),0 8px 20px -8px rgba(0,0,0,.22)}#overlay[data-theme=dark]{--surface:#18181a;--ink:#fafafa;--muted:#b9b9bb;--line:rgba(255,255,255,.1);--shadow:0 1px 2px rgba(0,0,0,.2),0 8px 20px -8px rgba(0,0,0,.45)}#chip{position:absolute;right:96px;bottom:96px;display:flex;align-items:center;gap:18px;padding:22px 28px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);opacity:0;white-space:nowrap}#icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--muted)}#icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}#main{font-size:36px;line-height:44px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}#detail{font-size:30px;line-height:40px;color:var(--muted);font-weight:400;letter-spacing:-.01em}.separator{width:5px;height:5px;border-radius:50%;background:var(--muted);margin:0 1px}#chip.relative{border-radius:44px}#chip.relative #icon svg{stroke-width:2.25}#chip.date #detail{font-size:34px}#chip.clock #icon{width:10px;height:10px;border-radius:50%;background:var(--ink)}#chip.clock #main{font-family:'JetBrains Mono',monospace;font-size:34px;line-height:44px;font-weight:500;letter-spacing:-.03em}#chip.clock #detail{font-size:27px;font-weight:500;letter-spacing:.04em}#chip.clock{gap:16px}#chip.clock .separator{display:none}
5</style></head>
6<body><div id="root" data-composition-id="main" data-start="0" data-duration="8" data-width="1920" data-height="1080"><video id="aroll" class="clip aroll" src="assets/still/aroll-left.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 id="chip"><span id="icon"></span><span id="main"></span><span class="separator"></span><span id="detail"></span></div></div></div>
7<script>
8const CONFIG={duration:8,aroll:true,timing:{enter:.5,clockStart:1.5,exit:7.25},variants:{'0':{kind:'date',text:'Sep 29, 2026',detail:'DevDay'},'1':{kind:'relative',text:'3 days ago',detail:''},'2':{kind:'clock',startSeconds:52378,detail:'LIVE'}}};
9const vars=window.__hyperframes?.getVariables?.()||{},vi=['0','1','2'].includes(String(vars.variant))?String(vars.variant):'0',theme=vars.theme==='dark'?'dark':'light',V=CONFIG.variants[vi],$=s=>document.querySelector(s);$('#overlay').dataset.theme=theme;$('#chip').className=V.kind;
10const format=s=>{s=Math.round(s)%86400;return [Math.floor(s/3600),Math.floor(s%3600/60),s%60].map(n=>String(n).padStart(2,'0')).join(':')};$('#main').textContent=vi==='2'?format(V.startSeconds):V.text;$('#detail').textContent=V.detail;if(!V.detail){$('#detail').remove();$('.separator').remove();}if(!CONFIG.aroll)$('#aroll').remove();
11const icons={date:'<svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="3"/><path d="M7 3v4M17 3v4M3 10h18M7 15h3M14 15h3"/></svg>',relative:'<svg viewBox="0 0 24 24"><path d="M3 10a9 9 0 1 1 1.3 7M3 4v6h6M12 7v5l3 2"/></svg>',clock:''};$('#icon').innerHTML=icons[V.kind];
12document.fonts.ready.then(()=>{const K=KitMotion,tl=gsap.timeline({paused:true}),T=CONFIG.timing;K.fadeUp(tl,'#chip',T.enter,{distance:10,blur:0,duration:.3});if(vi==='2')K.drive(tl,0,CONFIG.duration,p=>{const t=p*CONFIG.duration,ticks=Math.min(6,Math.max(0,Math.floor(t-T.clockStart+1+1e-7)));$('#main').textContent=format(V.startSeconds+ticks);});K.fadeOut(tl,'#chip',T.exit,{duration:.3});gsap.set('#chip',{opacity:0,y:10});tl.set({}, {},CONFIG.duration);window.__timelines.main=tl;tl.seek(0);});
13</script></body></html>

Download project17 MB