Agent notification

Lock-screen / Mac notification from a personal agent, then push-in

Prompt for your agentpaste into Claude Code or Codex

Add the "Agent notification" video component (dots, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/agent-notification.zip?v=94fe31f75e91 and unzip it into components/agent-notification/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/agent-notification && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o agent-notification.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":"dots"},{"value":"1","label":"Grok Bot"},{"value":"2","label":"Muse"}]},{"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/device/skin.css">
8<link rel="stylesheet" href="assets/skins/grok/skin.css">
9<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
10<script src="assets/kit/motion/motion.js"></script>
11<script src="assets/skins/device/icons.js"></script>
12<script src="assets/skins/grok/icons.js"></script>
13<style>
14html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#F5F5F4}
15body.is-dark{background:#0E0E0F}
16#root{position:relative;width:100%;height:100%;overflow:hidden}
17#scene,#fader,#cam,#stage{position:absolute;inset:0}
18.crop{position:absolute}
19 
20/* ---- iOS 26 notification material (component-level fix over the device skin) ----
21   Light: near-white glass; the skin's saturate(180%) pulled the blue wallpaper through and tinted the cards.
22   Dark: neutral graphite glass lifted off the navy wallpaper, not a navy plate. */
23#stage{--dv-ios-plate:rgba(250,250,252,.84);--dv-ios-plate-rim:rgba(255,255,255,.82)}
24#stage[data-theme="dark"]{--dv-ios-plate:rgba(62,62,68,.74);--dv-ios-plate-rim:rgba(255,255,255,.09);--dv-ios-plate-edge:rgba(0,0,0,.38)}
25#stage .dv-notif{-webkit-backdrop-filter:blur(30px) saturate(120%);backdrop-filter:blur(30px) saturate(120%)}
26#stage[data-theme="dark"] .dv-notif{-webkit-backdrop-filter:blur(30px) saturate(105%);backdrop-filter:blur(30px) saturate(105%)}
27 
28/* ---- iOS 26 lock-screen clock: heavier, taller, narrower numerals with a soft glass highlight ---- */
29#stage .dv-lock__time{
30  top:106px;font-weight:700;font-size:116px;letter-spacing:-.02em;font-variant-numeric:proportional-nums;
31  transform:scaleY(1.1);transform-origin:50% 0;color:rgba(255,255,255,.93);
32  text-shadow:0 1px 0 rgba(255,255,255,.38), 0 -1px 0 rgba(0,0,0,.05), 0 2px 18px rgba(0,0,0,.10);
33}
34/* lock screen: the carrier sits where the time is in apps */
35#stage .dv-statusbar__time.is-carrier{font:600 16px/1 var(--dv-sans);letter-spacing:-.01em}
36/* Always-On dim layer between the wallpaper and the lock content */
37.aod{position:absolute;inset:0;z-index:1;background:#000;pointer-events:none}
38 
39/* ---- notification groups (iOS list slot / macOS banner area) ---- */
40.nslot{position:relative}
41.ngroup{position:relative}
42/* the older notification of a group sits behind the newest one and becomes its sliver */
43.ngroup > .is-back{position:absolute;left:0;right:0;top:0}
44 
45/* ---- agent avatars (communication-notification lead) ---- */
46.av{display:block;width:38px;height:38px;border-radius:50%;overflow:hidden;
47  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}
48.av > svg,.av > img{display:block;width:100%;height:100%}

Open full file

Download project1 MB