Screen zoom

A screen recording of an AI tool with a smooth punch-in to one area and a ring on the target (the model picker, a tool call)

Prompt for your agentpaste into Claude Code or Codex

Add the "Screen zoom" video component (Cursor follow, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/screen-zoom.zip?v=25c67d984f01 and unzip it into components/screen-zoom/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/screen-zoom && npx hyperframes@0.8.162 render . --variables '{"variant":"2","theme":"light"}' -o screen-zoom.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":"Punch-in (ChatGPT model chip)"},{"value":"1","label":"Spotlight dim (Claude Code tool call)"},{"value":"2","label":"Cursor follow (Cursor model picker)"}]},
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/chatgpt/skin.css" />
11    <link rel="stylesheet" href="assets/skins/claude-code/skin.css" />
12    <link rel="stylesheet" href="assets/skins/cursor/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/chatgpt/icons.js"></script>
16    <script src="assets/skins/claude-code/icons.js"></script>
17    <script src="assets/skins/cursor/icons.js"></script>
18    <style>
19      * { margin: 0; padding: 0; box-sizing: border-box; }
20      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }
21      #root { width: 100%; height: 100%; position: relative; overflow: hidden; }
22      /* flat library stage (DESIGN.md tokens) */
23      #stage { position: absolute; inset: 0; background: var(--stage, #f5f5f4); overflow: hidden; }
24 
25      /* ---- the one object: a screen recording in a window on the stage ----
26         #cam is the camera: it scales the whole stage content (window, corners and shadow
27         together), the way Screen Studio zooms a recording. #place carries the entrance and
28         the loop fade. #frame is the recording's rounded window. #content is the recording in
29         its own px (1280x720), shown at 1.2x in the wide shot. */
30      #cam { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
31      #place { position: absolute; left: 192px; top: 108px; width: 1536px; height: 864px; }
32      #frame { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; background: var(--rec-bg, #ffffff); box-shadow: var(--frame-shadow); isolation: isolate; }
33      #content { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; }
34      #app { position: absolute; inset: 0; overflow: hidden; }
35 
36      /* ---- the spotlight wash lives inside the window (it never tints the stage);
37             the ring is drawn on the stage in frame px, so its stroke stays 2.5px at any zoom ---- */
38      #dim { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; box-shadow: 0 0 0 4000px var(--wash); z-index: 50; }
39      #ring { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; border: 2.5px solid var(--ring); }
40 
41      /* ---- macOS pointer: an element whose own (0,0) is the hotspot ---- */
42      .ptr { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 100; pointer-events: none; }
43      .ptr > span { position: absolute; display: block; }
44      .ptr > span svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 1px 1.4px rgba(0, 0, 0, 0.32)); }
45      .ptr.is-cg > span { left: -3px; top: -2px; width: 22px; height: 30px; }
46      .ptr.is-cu > span { left: -4.2px; top: -1.8px; width: 20px; height: 20px; }
47      .km-caret { --km-caret-w: 1.5px; }
48

Open full file

Download project8 MB