diff --git a/README.md b/README.md
index 5fce6d2..feff688 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,7 @@ directory under `skills/` is independent and can be installed on its own.
 
 | Skill | What it does |
 | --- | --- |
+| [`duo`](skills/duo/) | Composites two HTML screens into a locked photo plate of hands holding an open foldable phone for side-by-side comparison and meme videos. |
 | [`p5-paint-animation`](skills/p5-paint-animation/) | Turns text, photos, and short clips into deterministic p5.js handwriting, paint-on, and living-painting animations. |
 | [`vox-explainer`](skills/vox-explainer/) | Builds 60–90 second, collage-style HyperFrames explainers from a topic, document, or link. |
 | [`x-posting-license`](skills/x-posting-license/) | Renders a 10s animated "posting license" ID-card video for any X profile from a locked composition template. |
diff --git a/skills/duo/SKILL.md b/skills/duo/SKILL.md
new file mode 100644
index 0000000..a57cf03
--- /dev/null
+++ b/skills/duo/SKILL.md
@@ -0,0 +1,163 @@
+---
+name: duo
+description: >
+  Composite any two HTML screens into a locked photo plate of hands holding an
+  open foldable phone — a 1448×1086 still with two blank 495×849 / 498×849
+  screen slots (left and right) — to make side-by-side meme and comparison
+  videos: TikTok vs Reels, ChatGPT vs Claude, "me vs my friend", before/after,
+  two apps racing. Trigger on: "foldable phone meme", "put X on the left screen
+  and Y on the right", "two-screen comparison video", "the dual-screen phone
+  meme", or any request that names two apps/feeds/chats to show at once. The
+  plate, geometry, and camera are finished — the agent only authors what plays
+  INSIDE the two screens and renders.
+---
+
+# Duo
+
+One fixed 1448×1086 @ 30fps composition: a photo of two hands holding an open
+foldable, with both screens blanked. You fill the two screen slots with HTML
+(live video, a mock chat, a scrolling feed, anything HyperFrames renders) and
+the rig masks it to the phone's true rounded-corner geometry.
+
+![plate](assets/plate-preview.jpg)
+
+**The phone and hands are a photograph, not something you build.**
+`assets/plate.png` IS the device. Never recreate, redraw, or CSS-model the
+foldable, its bezel, the hinge, or the hands, and never substitute a different
+image. `build.mjs` copies the plate into every project; if it is missing, stop
+and reinstall the skill rather than improvising a phone.
+
+**Do not edit the rig.** The two `.screen` rects, their corner radii and the
+hinge divider were measured from that photo pixel by pixel. Every visual change
+you make happens inside `#screen-left .content` and `#screen-right .content`,
+plus the one shared GSAP timeline.
+
+## When to use / when not to
+
+- Use for any "two things side by side on a phone" beat: app vs app, feed vs
+  feed, two chats answering the same prompt, two versions of a product.
+- Do not use when the user wants a single phone, a laptop, or a real device
+  bezel they supply — this skill is one specific photo. For a different device
+  plate you would re-measure geometry the same way (see
+  `references/screen-geometry.md`) rather than stretch this one.
+
+## Requirements
+
+- Node 18+ and the HyperFrames CLI via `npx hyperframes@latest` (`@latest` is
+  mutable; pin a version for byte-identical re-renders).
+- Load your motion doctrine first if your workspace has one. The rig's only
+  built-in motion is one slow camera push; everything inside the screens must
+  perform (scrolls, swipes, typing, taps), never idle-wobble.
+
+## Network and side effects (complete list)
+
+- `registry.npmjs.org` — the HyperFrames CLI itself, via `npx`.
+- `cdn.jsdelivr.net` — the composition loads GSAP (pinned `3.14.2`) at
+  preview/render time. Rendering is not fully offline.
+- Anything YOU add to the screens (video clips, avatars, fonts) is your side
+  effect: fetching a site, downloading media, or scraping UI happens only if the
+  user's request calls for real content, and only from sources they are entitled
+  to use. `references/sourcing-real-ui.md` documents how, and the rights caveat.
+
+No credentials, no paid operations, no telemetry. `build.mjs` writes only
+inside `--out` and refuses to write through symlinks.
+
+## Flow
+
+`<SKILL_DIR>` is this skill's installed directory (e.g.
+`~/.claude/skills/duo`).
+
+1. **Scaffold** a project:
+
+```bash
+node <SKILL_DIR>/scripts/build.mjs --out ./foldable-meme --duration 10 --icons tiktok,instagram
+```
+
+   `--icons` is optional; it copies the real TikTok / Instagram glyph sheets
+   (`assets/icons-*.svg`, extracted from the live mobile sites) into the project.
+
+2. **Decide what each screen does** for the length of the clip, in writing,
+   before touching HTML. The pause test: at any second, something inside at
+   least one screen must be mid-motion (a swipe landing, a video playing, text
+   arriving). Two static screenshots is not a video.
+
+3. **Author the screens.** Inside each `.content` you have a normal DOM
+   viewport: left `495×849`, right `498×849`. Position against those, never the
+   root. Patterns (full-screen snap feed, drag→fling swipe, like-tap, chat
+   typing) are in `references/feed-recipes.md`. Rules:
+   - `<video class="clip" data-start data-duration muted playsinline>` for
+     every clip; HyperFrames owns playback. Overlap the windows of an outgoing
+     and incoming clip across a swipe so both are decoded mid-transition.
+   - One timeline. Add your tweens to `tl` inside the marked hook; do not create
+     a second `gsap.timeline` or register another `window.__timelines` key.
+   - No `repeat: -1`, no `Math.random`, no clocks — the render seeks.
+   - Status bar: the photo's original screens showed `9:41` top-left of the left
+     screen and wifi/battery top-right of the right screen. Reproduce that split
+     if your apps show a status bar; it sells the "one device" read.
+
+4. **Check and snapshot**:
+
+```bash
+npx hyperframes@latest check ./foldable-meme
+npx hyperframes@latest snapshot ./foldable-meme --at 1,4,7 --no-end
+```
+
+   Lint must be 0 errors. Layout/contrast warnings about text passing under a
+   fixed header, or white UI text over video, are expected for app UIs; read the
+   frames instead and confirm (a) content reaches every rounded corner with no
+   gap, (b) the gray hinge divider is visible between the screens, (c) nothing
+   from one screen leaks over the hinge.
+
+5. **Render** only when the user asks (ask first if your harness gates renders):
+
+```bash
+npx hyperframes@latest render ./foldable-meme -o ./foldable-meme/renders/v1.mp4
+```
+
+## Verify success
+
+`check` passes lint with 0 errors; `snapshot` frames show both screens filled
+edge to edge inside the phone with the divider intact; the MP4 is the requested
+duration at 1448×1086 and, on a pause at any second, something on screen is
+moving. Pull frames from the rendered MP4 (not the preview) for the final QC.
+
+## Rules
+
+- Never resize, move, or re-radius the screens to "fit" content. Fit content to
+  the slots. If a mock app looks too big, scale the app's internal type, not the
+  screen.
+- Real content must be real: if the user asks for TikTok or Instagram, pull the
+  actual UI glyphs and layout metrics from the live site and use real posts
+  (with their real usernames and counts), not invented ones. Invented handles
+  are only for fictional / parody screens the user explicitly wants.
+- Keep the camera push as the only rig motion. Do not add drift, breathe, or
+  glow loops anywhere; fill time with story inside the screens instead.
+- Output stays 1448×1086 (the plate's native 4:3). Offer a 16:9 or 1:1 crop as a
+  follow-up render rather than resizing the rig.
+
+## Files
+
+- `assets/plate.png` — the clean plate, screens blanked to neutral (1448×1086).
+- `assets/screen-spec.json` — measured rects, radii, hinge, status-bar split.
+- `assets/icons-tiktok.svg`, `assets/icons-instagram.svg` — `<symbol>` sheets of
+  the real mobile-web glyphs (like, comment, share, nav bars…).
+- `template/index.template.html` — the locked rig with two empty slots.
+- `scripts/build.mjs` — scaffolder.
+- `references/screen-geometry.md` — how the geometry was measured and how to
+  re-measure for a new plate.
+- `references/feed-recipes.md` — snap feed, swipe physics, like tap, chat typing.
+- `references/sourcing-real-ui.md` — pulling real app UI and clips, and the
+  rights caveat.
+
+## Provenance and licensing
+
+- The plate is derived from a photo posted publicly on X by @A_Kapustin
+  (status `2097769962936868872`, a foldable showing ChatGPT and Claude side by
+  side); the two screens were blanked so it can carry any content. It is
+  redistributed here as a meme template; users of this skill publish results at
+  their own judgment and should credit the source where appropriate.
+- The icon sheets reproduce TikTok's and Instagram's own UI glyphs (extracted
+  from their public mobile web DOM) so mock screens look like the real apps.
+  They are trademarks of their owners and are included for parody / commentary
+  use only.
+- GSAP is loaded from jsDelivr under its standard license; it is not vendored.
diff --git a/skills/duo/assets/icons-instagram.svg b/skills/duo/assets/icons-instagram.svg
new file mode 100644
index 0000000..91aedac
--- /dev/null
+++ b/skills/duo/assets/icons-instagram.svg
@@ -0,0 +1,15 @@
+<!-- Inline this <svg> once at the top of a screen slot, then reference glyphs with <svg><use href="#tt-like"/></svg>. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="position:absolute">
+<defs>
+  <symbol id="ig-like" viewBox="0 0 24 24"><path d="M16.792 3.904A4.989 4.989 0 0 1 21.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.167 2.5 9.122a4.989 4.989 0 0 1 4.708-5.218 4.21 4.21 0 0 1 3.675 1.941c.84 1.175.98 1.763 1.12 1.763s.278-.588 1.11-1.766a4.17 4.17 0 0 1 3.679-1.938m0-2a6.04 6.04 0 0 0-4.797 2.127 6.052 6.052 0 0 0-4.787-2.127A6.985 6.985 0 0 0 .5 9.122c0 3.61 2.55 5.827 5.015 7.97.283.246.569.494.853.747l1.027.918a44.998 44.998 0 0 0 3.518 3.018 2 2 0 0 0 2.174 0 45.263 45.263 0 0 0 3.626-3.115l.922-.824c.293-.26.59-.519.885-.774 2.334-2.025 4.98-4.32 4.98-7.94a6.985 6.985 0 0 0-6.708-7.218Z"/></symbol>
+  <symbol id="ig-like-filled" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></symbol>
+  <symbol id="ig-comment" viewBox="0 0 24 24"><path d="M20.656 17.008a9.993 9.993 0 1 0-3.59 3.615L22 22Z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2"/></symbol>
+  <symbol id="ig-share" viewBox="0 0 24 24"><path d="M13.973 20.046 21.77 6.928C22.8 5.195 21.55 3 19.535 3H4.466C2.138 3 .984 5.825 2.646 7.456l4.842 4.752 1.723 7.121c.548 2.266 3.571 2.721 4.762.717Z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="2"/><line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="7.488" x2="15.515" y1="12.208" y2="7.641"/></symbol>
+  <symbol id="ig-more" viewBox="0 0 24 24"><circle cx="12" cy="12" r="1.5"/><circle cx="6" cy="12" r="1.5"/><circle cx="18" cy="12" r="1.5"/></symbol>
+  <symbol id="ig-home" viewBox="0 0 24 24"><path d="M20 23h-5.001a1 1 0 0 1-1-1v-7.003l.001-.035A2.003 2.003 0 0 0 12 13a2.002 2.002 0 0 0-1.998 1.919c.002.026.003.054.003.081v7a1 1 0 0 1-1 1H4c-1.654 0-3-1.346-3-3v-8.32c0-1.087.451-2.142 1.238-2.893l7-6.68c1.496-1.428 4.028-1.428 5.524 0l7 6.68A4.021 4.021 0 0 1 23 11.68V20c0 1.654-1.346 3-3 3Zm-4.001-2H20a1 1 0 0 0 1-1v-8.32c0-.543-.226-1.07-.62-1.448l-7-6.678c-.747-.715-2.013-.715-2.76 0l-7 6.68A2.01 2.01 0 0 0 3 11.68V20a1 1 0 0 0 1 1h4.005v-5.901A1.093 1.093 0 0 1 8 15c0-2.206 1.794-4 4-4s4 1.794 4 4l-.001.045V21Z"/></symbol>
+  <symbol id="ig-reels" viewBox="0 0 24 24"><path d="M22.942 7.464c-.062-1.36-.306-2.143-.511-2.671a5.366 5.366 0 0 0-1.272-1.952 5.364 5.364 0 0 0-1.951-1.27c-.53-.207-1.312-.45-2.673-.513-1.2-.054-1.557-.066-4.535-.066s-3.336.012-4.536.066c-1.36.062-2.143.306-2.672.511-.769.3-1.371.692-1.951 1.272s-.973 1.182-1.27 1.951c-.207.53-.45 1.312-.513 2.673C1.004 8.665.992 9.022.992 12s.012 3.336.066 4.536c.062 1.36.306 2.143.511 2.671.298.77.69 1.373 1.272 1.952.58.581 1.182.974 1.951 1.27.53.207 1.311.45 2.673.513 1.199.054 1.557.066 4.535.066s3.336-.012 4.536-.066c1.36-.062 2.143-.306 2.671-.511a5.368 5.368 0 0 0 1.953-1.273c.58-.58.972-1.181 1.27-1.95.206-.53.45-1.312.512-2.673.054-1.2.066-1.557.066-4.535s-.012-3.336-.066-4.536Zm-7.085 6.055-5.25 3c-1.167.667-2.619-.175-2.619-1.519V9c0-1.344 1.452-2.186 2.619-1.52l5.25 3c1.175.672 1.175 2.368 0 3.04Z"/></symbol>
+  <symbol id="ig-search" viewBox="0 0 24 24"><path d="M19 10.5A8.5 8.5 0 1 1 10.5 2a8.5 8.5 0 0 1 8.5 8.5Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="16.511" x2="22" y1="16.511" y2="22"/></symbol>
+  <symbol id="ig-camera" viewBox="0 0 24 24"><path d="M6.5 5h2.2l1.3-2h4l1.3 2h2.2A3.5 3.5 0 0 1 21 8.5v9A3.5 3.5 0 0 1 17.5 21h-11A3.5 3.5 0 0 1 3 17.5v-9A3.5 3.5 0 0 1 6.5 5Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><circle cx="12" cy="13" r="4" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
+  <symbol id="ig-verified" viewBox="0 0 24 24"><path fill="#0095F6" d="M12 1.5l2.6 2.2 3.4-.5 1 3.3 3 1.6-1.1 3.2L22 14.6l-2.6 2.1-.4 3.4-3.4.3L13.5 23 12 20.9 10.5 23l-2.1-2.6-3.4-.3-.4-3.4L2 14.6l1.1-3.3L2 8.1l3-1.6 1-3.3 3.4.5z"/><path d="M7.5 12.3l3 3L16.8 9" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+</defs>
+</svg>
diff --git a/skills/duo/assets/icons-tiktok.svg b/skills/duo/assets/icons-tiktok.svg
new file mode 100644
index 0000000..3e82b0b
--- /dev/null
+++ b/skills/duo/assets/icons-tiktok.svg
@@ -0,0 +1,19 @@
+<!-- Inline this <svg> once at the top of a screen slot, then reference glyphs with <svg><use href="#tt-like"/></svg>. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="position:absolute">
+<defs>
+  <symbol id="tt-like" viewBox="0 0 48 48"><path d="M24 9.44c3.2-4.03 7.61-5.56 12-4.67 2.31.47 5.59 2.28 7.75 5.48 2.26 3.32 3.21 7.99.98 13.85-1.75 4.57-5.5 8.83-9.28 12.2a56.6 56.6 0 0 1-10.52 7.47l-.93.49-.93-.49a56.6 56.6 0 0 1-10.52-7.47c-3.78-3.37-7.53-7.63-9.28-12.2-2.24-5.86-1.28-10.53.98-13.85C6.4 7.05 9.69 5.24 12 4.77c4.39-.9 8.8.64 12 4.67Z"/></symbol>
+  <symbol id="tt-comment" viewBox="0 0 48 48"><path fill-rule="evenodd" clip-rule="evenodd" d="M38.5 35.31c4.1-4.11 6.5-8.4 6.5-13.38C45 11.8 35.73 3.6 24.3 3.6S3.6 11.8 3.6 21.93C3.6 32.05 13.17 39 24.6 39v3.36c0 1.06 1.1 1.75 2.04 1.24 2.92-1.58 8.33-4.76 11.85-8.29ZM14.23 19.46a2.95 2.95 0 0 1 2.96 2.93 2.95 2.95 0 0 1-2.96 2.94 2.95 2.95 0 0 1-2.95-2.94 2.95 2.95 0 0 1 2.95-2.93Zm13.02 2.93a2.95 2.95 0 0 0-2.96-2.93 2.95 2.95 0 0 0-2.96 2.93 2.95 2.95 0 0 0 2.96 2.94 2.95 2.95 0 0 0 2.96-2.94Zm7.1-2.93a2.95 2.95 0 0 1 2.95 2.93 2.95 2.95 0 0 1-2.96 2.94 2.95 2.95 0 0 1-2.95-2.94 2.95 2.95 0 0 1 2.95-2.93Z"/></symbol>
+  <symbol id="tt-bookmark" viewBox="0 0 48 48"><path d="M10 4h28a2 2 0 0 1 2 2v37.2a1 1 0 0 1-1.55.83L24 34.6 9.55 44.03A1 1 0 0 1 8 43.2V6a2 2 0 0 1 2-2Z"/></symbol>
+  <symbol id="tt-share" viewBox="0 0 48 48"><path d="M27.5 6.9a1 1 0 0 1 1.66-.75l16.5 14.6a1.5 1.5 0 0 1 0 2.24l-16.5 14.6a1 1 0 0 1-1.66-.75V29.5C15.6 29.5 9.2 33.2 4.2 40.9c-.6.9-1.9.5-1.85-.6C3 26.5 12 17.4 27.5 16.7V6.9Z"/></symbol>
+  <symbol id="tt-plus" viewBox="0 0 28 28"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 25C20.6274 25 26 19.6274 26 13C26 6.37258 20.6274 1 14 1C7.37258 1 2 6.37258 2 13C2 19.6274 7.37258 25 14 25Z" fill="#FE2C55"/><path d="M9.5 14C9.22386 14 9 13.7761 9 13.5V12.5C9 12.2239 9.22386 12 9.5 12H18.5C18.7761 12 19 12.2239 19 12.5V13.5C19 13.7761 18.7761 14 18.5 14H9.5Z" fill="#fff"/><path d="M13 8.5C13 8.22386 13.2239 8 13.5 8H14.5C14.7761 8 15 8.22386 15 8.5V17.5C15 17.7761 14.7761 18 14.5 18H13.5C13.2239 18 13 17.7761 13 17.5V8.5Z" fill="#fff"/></symbol>
+  <symbol id="tt-home" viewBox="0 0 48 48"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.9505 7.84001C24.3975 7.38666 23.6014 7.38666 23.0485 7.84003L6.94846 21.04C6.45839 21.4418 6.2737 22.1083 6.48706 22.705C6.70041 23.3017 7.26576 23.7 7.89949 23.7H10.2311L11.4232 36.7278C11.5409 38.0149 12.6203 39 13.9128 39H21.5C22.0523 39 22.5 38.5523 22.5 38V28.3153C22.5 27.763 22.9477 27.3153 23.5 27.3153H24.5C25.0523 27.3153 25.5 27.763 25.5 28.3153V38C25.5 38.5523 25.9477 39 26.5 39H34.0874C35.3798 39 36.4592 38.0149 36.577 36.7278L37.7691 23.7H40.1001C40.7338 23.7 41.2992 23.3017 41.5125 22.705C41.7259 22.1082 41.5412 21.4418 41.0511 21.04L24.9505 7.84001Z"/></symbol>
+  <symbol id="tt-discover" viewBox="0 0 36 36"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 28.0547C23.553 28.0547 28.0547 23.5531 28.0547 18C28.0547 12.4469 23.553 7.94531 18 7.94531C12.4469 7.94531 7.94531 12.4469 7.94531 18C7.94531 23.5531 12.4469 28.0547 18 28.0547ZM30.375 18C30.375 24.8345 24.8345 30.375 18 30.375C11.1655 30.375 5.625 24.8345 5.625 18C5.625 11.1655 11.1655 5.625 18 5.625C24.8345 5.625 30.375 11.1655 30.375 18Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20.3508 20.3864C20.712 20.1679 20.9645 19.8074 21.0462 19.3932L22.427 12.3948C22.5027 12.0113 22.0871 11.7204 21.7527 11.9226L15.6486 15.6137C15.2874 15.8322 15.0349 16.1928 14.9532 16.6069L13.5724 23.6053C13.4967 23.9888 13.9123 24.2797 14.2467 24.0775L20.3508 20.3864ZM16.5684 20.0442L18.9029 18.6325L19.431 15.9559L17.0965 17.3676L16.5684 20.0442Z"/></symbol>
+  <symbol id="tt-inbox" viewBox="0 0 32 32"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.0362 21.3333H18.5243L15.9983 24.4208L13.4721 21.3333H7.96047L7.99557 8H24.0009L24.0362 21.3333ZM24.3705 23.3333H19.4721L17.2883 26.0026C16.6215 26.8176 15.3753 26.8176 14.7084 26.0026L12.5243 23.3333H7.62626C6.70407 23.3333 5.95717 22.5845 5.9596 21.6623L5.99646 7.66228C5.99887 6.74352 6.74435 6 7.66312 6H24.3333C25.2521 6 25.9975 6.7435 26 7.66224L26.0371 21.6622C26.0396 22.5844 25.2927 23.3333 24.3705 23.3333ZM12.6647 14C12.2965 14 11.998 14.2985 11.998 14.6667V15.3333C11.998 15.7015 12.2965 16 12.6647 16H19.3313C19.6995 16 19.998 15.7015 19.998 15.3333V14.6667C19.998 14.2985 19.6995 14 19.3313 14H12.6647Z"/></symbol>
+  <symbol id="tt-profile" viewBox="0 0 48 48"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.0001 11.5C20.9625 11.5 18.5001 13.9624 18.5001 17C18.5001 20.0376 20.9625 22.5 24.0001 22.5C27.0377 22.5 29.5001 20.0376 29.5001 17C29.5001 13.9624 27.0377 11.5 24.0001 11.5ZM15.5001 17C15.5001 12.3056 19.3057 8.5 24.0001 8.5C28.6945 8.5 32.5001 12.3056 32.5001 17C32.5001 21.6944 28.6945 25.5 24.0001 25.5C19.3057 25.5 15.5001 21.6944 15.5001 17ZM24.0001 30.5C19.1458 30.5 15.0586 33.7954 13.8578 38.2712C13.7147 38.8046 13.2038 39.1741 12.6591 39.0827L11.6729 38.9173C11.1282 38.8259 10.7571 38.3085 10.8888 37.7722C12.3362 31.8748 17.6559 27.5 24.0001 27.5C30.3443 27.5 35.664 31.8748 37.1114 37.7722C37.2431 38.3085 36.872 38.8259 36.3273 38.9173L35.3411 39.0827C34.7964 39.1741 34.2855 38.8046 34.1424 38.2712C32.9416 33.7954 28.8544 30.5 24.0001 30.5Z"/></symbol>
+  <symbol id="tt-search" viewBox="0 0 48 48"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.83 7.5a14.34 14.34 0 1 1 0 28.68 14.34 14.34 0 0 1 0-28.68Zm0-4a18.33 18.33 0 1 0 11.48 32.64l8.9 8.9a1 1 0 0 0 1.42 0l1.4-1.41a1 1 0 0 0 0-1.42l-8.89-8.9A18.34 18.34 0 0 0 21.83 3.5Z"/></symbol>
+  <symbol id="tt-add" viewBox="16 10 43 30"><path fill="#FA2D6C" fill-rule="evenodd" d="M23.5 23.3c0-4.48 0-6.72.872-8.432a8 8 0 0 1 3.496-3.496C29.58 10.5 31.82 10.5 36.3 10.5h9.9c4.48 0 6.72 0 8.432.872a8 8 0 0 1 3.496 3.496C59 16.58 59 18.82 59 23.3v2.4c0 4.48 0 6.72-.872 8.432a8 8 0 0 1-3.496 3.496c-1.711.872-3.952.872-8.432.872h-9.9c-4.48 0-6.72 0-8.432-.872a8 8 0 0 1-3.496-3.496C23.5 32.42 23.5 30.18 23.5 25.7z" clip-rule="evenodd"/><path fill="#20D5EC" fill-rule="evenodd" d="M16 23.3c0-4.48 0-6.72.872-8.432a8 8 0 0 1 3.496-3.496C22.08 10.5 24.32 10.5 28.8 10.5h9.9c4.48 0 6.72 0 8.432.872a8 8 0 0 1 3.496 3.496c.872 1.711.872 3.952.872 8.432v2.4c0 4.48 0 6.72-.872 8.432a8 8 0 0 1-3.496 3.496c-1.711.872-3.952.872-8.432.872h-9.9c-4.48 0-6.72 0-8.432-.872a8 8 0 0 1-3.496-3.496C16 32.42 16 30.18 16 25.7z" clip-rule="evenodd"/><rect width="36" height="28" x="19.5" y="10.5" fill="#fff" rx="8"/><path fill="#161823" fill-rule="evenodd" d="M36.5 18.25a.5.5 0 0 0-.5.5v4.75h-4.75a.5.5 0 0 0-.5.5v1.5a.5.5 0 0 0 .5.5H36v4.75a.5.5 0 0 0 .5.5H38a.5.5 0 0 0 .5-.5V26h4.75a.5.5 0 0 0 .5-.5V24a.5.5 0 0 0-.5-.5H38.5v-4.75a.5.5 0 0 0-.5-.5z" clip-rule="evenodd"/></symbol>
+  <symbol id="tt-live" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="3" fill="none" stroke="#fff" stroke-width="1.8"/><text x="12" y="15.3" font-size="6.5" font-weight="700" fill="#fff" text-anchor="middle" font-family="-apple-system,Helvetica,Arial">LIVE</text></symbol>
+  <symbol id="tt-verified" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#20D5EC"/><path d="M7 12.5l3.2 3.2L17 9" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></symbol>
+  <symbol id="tt-note" viewBox="0 0 48 48"><path d="M18 6v24.5a7 7 0 1 0 4 6.3V15h14V6H18Z"/></symbol>
+</defs>
+</svg>
diff --git a/skills/duo/assets/plate-preview.jpg b/skills/duo/assets/plate-preview.jpg
new file mode 100644
index 0000000..f565b4b
Binary files /dev/null and b/skills/duo/assets/plate-preview.jpg differ
diff --git a/skills/duo/assets/plate.png b/skills/duo/assets/plate.png
new file mode 100644
index 0000000..d706d1b
Binary files /dev/null and b/skills/duo/assets/plate.png differ
diff --git a/skills/duo/assets/screen-spec.json b/skills/duo/assets/screen-spec.json
new file mode 100644
index 0000000..a4c72b3
--- /dev/null
+++ b/skills/duo/assets/screen-spec.json
@@ -0,0 +1,61 @@
+{
+ "source": {
+  "tweet": "https://x.com/A_Kapustin/status/2097769962936868872",
+  "author": "@A_Kapustin",
+  "text": "finally",
+  "image": "https://pbs.twimg.com/media/HRzGqR9aQAAGPNP.jpg?name=orig",
+  "size": [
+   1448,
+   1086
+  ],
+  "type": "still photo \u2014 the tweet has no video",
+  "note": "Photo posted publicly on X by @A_Kapustin; screens blanked for template use."
+ },
+ "screens": {
+  "left": {
+   "rect": {
+    "x": 223,
+    "y": 105,
+    "w": 495,
+    "h": 849
+   },
+   "outer_corner_radius_px": 56,
+   "hinge_corner_radius_px": 12,
+   "original_content": "ChatGPT chat",
+   "bg": "#f6f6f7"
+  },
+  "right": {
+   "rect": {
+    "x": 724,
+    "y": 105,
+    "w": 498,
+    "h": 849
+   },
+   "outer_corner_radius_px": 56,
+   "hinge_corner_radius_px": 12,
+   "original_content": "Claude chat",
+   "bg": "#fbf6f0"
+  }
+ },
+ "hinge": {
+  "x": 719,
+  "w": 5,
+  "color": "rgb(130,133,142)"
+ },
+ "files": {
+  "plate": "assets/plate.png (screens blanked; hinge divider and bezel are original pixels)",
+  "preview": "assets/plate-preview.jpg"
+ },
+ "notes": "Geometry measured 9/10 (v3): screens are rounded rects, outer r=56, hinge-side r=12; hinge divider is the plate's own pixels x719-723. Masks are exact rounded rects (no morphology).",
+ "status_bar": {
+  "left": {
+   "text": "9:41",
+   "x": 44,
+   "y": 18
+  },
+  "right": {
+   "wifi_battery_right_inset": 40,
+   "y": 18
+  }
+ }
+}
\ No newline at end of file
diff --git a/skills/duo/references/feed-recipes.md b/skills/duo/references/feed-recipes.md
new file mode 100644
index 0000000..1554dc1
--- /dev/null
+++ b/skills/duo/references/feed-recipes.md
@@ -0,0 +1,102 @@
+# Screen recipes
+
+Patterns that have shipped inside the slots. Each assumes the slot's own
+coordinate system (left 495×849, right 498×849) and the single shared `tl`.
+
+## Full-screen snap feed (TikTok / Reels)
+
+Stack posts vertically at the slot height and translate the stack.
+
+```html
+<div class="feed" id="tt-feed">                 <!-- position:absolute; top:0 -->
+  <div class="post">                           <!-- width:495px; height:849px; position:relative; overflow:hidden -->
+    <video class="clip" src="assets/clip1.mp4" data-start="0"   data-duration="3.0" muted playsinline></video>
+    <!-- overlays: right rail, caption, music line -->
+  </div>
+  <div class="post">
+    <video class="clip" src="assets/clip2.mp4" data-start="2.3" data-duration="3.3" muted playsinline></video>
+  </div>
+</div>
+<!-- fixed chrome (status text, tabs, bottom bar) sits OUTSIDE .feed so it does not scroll -->
+```
+
+Clip windows overlap the swipe: post 1 ends at 3.0, post 2 starts at 2.3, the
+swipe runs 2.35–2.95. Both are decoded while both are visible. Give each
+`.post` a black background so a clip outside its window reads as a dark card,
+not a hole.
+
+## Swipe physics (drag → fling)
+
+A real flick has two phases: the finger drags the content a short way, then
+releases and the content flings to the snap point. Two chained tweens, an
+accelerating ease then a decelerating one — the release is the visible cause of
+the direction/speed change.
+
+```js
+const H = 849;
+const flick = (sel, t, n, drag = 120, d1 = 0.18, d2 = 0.42) => {
+  tl.to(sel, { y: -H * (n - 1) - drag, duration: d1, ease: 'power1.in' }, t);       // finger drag
+  tl.to(sel, { y: -H * n,            duration: d2, ease: 'power3.out' }, t + d1);  // release fling
+};
+gsap.set('#tt-feed', { y: 0 });
+flick('#tt-feed', 2.35, 1);
+flick('#tt-feed', 4.95, 2);
+flick('#tt-feed', 7.55, 3);
+```
+
+Offset the two screens' flick times so one side is always mid-swipe or landing
+while the other side's clip plays (e.g. right screen at 1.15 / 3.75 / 6.25).
+Never mirror: both feeds swipe up.
+
+## Like tap (TikTok heart)
+
+```js
+gsap.set('#tt-heart2', { scale: 1, transformOrigin: '50% 50%' });
+tl.to('#tt-heart2', { fill: '#fe2c55', duration: 0.06 }, 3.9);
+tl.to('#tt-heart2', { keyframes: [
+  { scale: 0.7, duration: 0.08, ease: 'power2.in'  },   // squash
+  { scale: 1.3, duration: 0.14, ease: 'power2.out' },   // pop
+  { scale: 1.0, duration: 0.18, ease: 'power2.inOut' }
+] }, 3.9);
+```
+
+Fire it while that post is at rest, not mid-swipe. TikTok red is `#FE2C55`;
+Instagram red is `#FF3040`.
+
+## Double-tap like (Instagram big heart)
+
+```js
+gsap.set('#ig-bigheart', { autoAlpha: 0, scale: 0.4, transformOrigin: '50% 50%' });
+tl.to('#ig-bigheart', { keyframes: [
+  { autoAlpha: 1, scale: 1.15, duration: 0.20, ease: 'back.out(1.6)' },
+  { scale: 1.0,  duration: 0.16, ease: 'power2.inOut' },
+  { autoAlpha: 0, scale: 0.9, duration: 0.28, ease: 'power2.in', delay: 0.22 }
+] }, 2.55);
+tl.set('#ig-heart-use', { attr: { href: '#ig-like-filled' } }, 2.7);   // swap outline → filled glyph
+tl.to('#ig-heart-svg', { fill: '#ff3040', duration: 0.08 }, 2.7);
+```
+
+Put the big heart inside the post it belongs to so it scrolls away with it.
+
+## Chat typing (ChatGPT / Claude style)
+
+Reveal a reply word by word with `tl.set` on `textContent`, or by toggling
+pre-rendered `<span>`s with `autoAlpha` on a stagger. Use a scarce typing
+indicator (three dots, finite `repeat`, never `-1`) before the reply lands, and
+stop it the frame the first word appears. Both chats answering the same prompt
+should start typing at different times so the two screens never sync.
+
+## Metrics that read as "real" (from the live mobile DOMs, 375 px viewport)
+
+Scale by ~1.2 for these 495/498 px slots.
+
+| App | Element | Measured |
+| --- | --- | --- |
+| TikTok | rail icons | 32 px, 65 px vertical pitch, counts 13 px / 600 |
+| TikTok | username / caption / music | 17 px 600 / 15 px / 15 px |
+| TikTok | bottom tab bar | 49 px, icons 32 px, labels 10 px, `+` button 75×49 |
+| Instagram Reels | rail icons | 24 px, 64 px pitch, counts 12 px / 400 |
+| Instagram Reels | avatar / username / follow pill | 32 px / 14 px 600 / 58×32 bordered |
+| Instagram Reels | bottom nav | 45 px, icons 24 px at x 26 / 101 / 176 / 251 / 326 |
+
+Both apps use the system font (`-apple-system` stack).
diff --git a/skills/duo/references/screen-geometry.md b/skills/duo/references/screen-geometry.md
new file mode 100644
index 0000000..433c1b1
--- /dev/null
+++ b/skills/duo/references/screen-geometry.md
@@ -0,0 +1,53 @@
+# Screen geometry
+
+All numbers are source pixels on the 1448×1086 plate. They are baked into
+`template/index.template.html`; this file explains them so you can trust them,
+and shows how to re-measure if you ever swap in a different device photo.
+
+## Measured
+
+| Element | Value |
+| --- | --- |
+| Plate | 1448 × 1086 |
+| Left screen | x 223–718, y 105–954 (495 × 849) |
+| Right screen | x 724–1222, y 105–954 (498 × 849) |
+| Outer corner radius (away from hinge) | 56 px |
+| Hinge-side corner radius | 12 px |
+| Hinge divider | x 719–723 (5 px), rgb(130,133,142), part of the plate |
+| Status bar in the photo | `9:41` at left-screen x≈44, wifi + battery at right-screen right≈40, both y≈18 |
+| Hands | Never overlap the screens — no foreground matte needed |
+| Perspective | Edges fit straight lines to ≤1 px; no homography needed |
+
+The rig implements this as two `position:absolute` boxes with CSS
+`border-radius: 56px 12px 12px 56px` (left) and `12px 56px 56px 12px` (right).
+`overflow:hidden` on each box is the mask. The divider and the dark bezel that
+shows through the corners are the photo's own pixels, untouched.
+
+## Why not segmentation masks
+
+The first version of this rig segmented the bright screen pixels and used the
+result as `mask-image`. It looked right at a glance and was wrong in two ways:
+
+1. A morphological close (used to bridge text gaps) filled the 12 px hinge-side
+   corners, so the screens ran square into the fold.
+2. The brightness threshold swallowed the anti-aliased edge pixels of the hinge
+   divider, so the fill painted over them and the divider read thin and pale.
+
+Lesson: for device-screen replacement, measure edges and corners numerically
+and build the mask from geometry. Never ship a morphology-cleaned segmentation
+as a mask.
+
+## Re-measuring for a new plate
+
+1. Load the photo, convert to grayscale, and scan single rows and columns
+   across a screen edge. The screen is bright (>200), the bezel dark (<70),
+   the hinge mid-gray. Record the first/last bright pixel per row; a straight
+   edge gives a constant value, a perspective edge gives a slope (fit a line).
+2. For corner radius, walk rows down from the top edge and record the inset of
+   the first bright pixel: inset(k) = r − √(2rk − k²). Solve for r from two rows
+   (k=1 and k≈10); the two estimates should agree within a couple of pixels.
+3. Blank the screens by drawing exact rounded rects (supersample 4×, then
+   downsample) and alpha-blending a flat color only inside them. Leave every
+   other pixel alone.
+4. Write the rects and radii into `screen-spec.json` and the CSS; snapshot and
+   compare 3× crops of each corner against the source before trusting it.
diff --git a/skills/duo/references/sourcing-real-ui.md b/skills/duo/references/sourcing-real-ui.md
new file mode 100644
index 0000000..640bdd9
--- /dev/null
+++ b/skills/duo/references/sourcing-real-ui.md
@@ -0,0 +1,62 @@
+# Sourcing real app UI and clips
+
+When the user asks for a real app (TikTok, Instagram, X, YouTube…) the screen
+must look like that app and, if it plays video, play real posts. Do not draw
+icons from memory and do not invent usernames or counts.
+
+## Rights first
+
+Every clip, avatar, and glyph you fetch belongs to someone. This recipe is for
+parody / commentary / internal-review content the user is entitled to make. Tell
+the user what you pulled and from whom (handles, post ids) so they can decide
+what to publish. Prefer the user's own posts, or accounts they name.
+
+## Pull the UI from the live mobile site (browser tool)
+
+1. Open the site in the agent browser at a phone viewport (375×812). If the
+   browser pane is hidden, clicks and screenshots time out — drive everything
+   with JavaScript evaluation instead (`document.querySelector(...).click()`).
+2. Mute immediately: `setInterval(() => document.querySelectorAll('video,audio').forEach(v => { v.muted = true; v.volume = 0; }), 300)`.
+3. Extract every glyph and its metrics in one pass:
+
+```js
+[...document.querySelectorAll('svg')].map(s => {
+  const r = s.getBoundingClientRect();
+  return { label: s.getAttribute('aria-label') || s.closest('[data-e2e]')?.dataset.e2e || '',
+           x: r.x, y: r.y, w: r.width, html: s.outerHTML };
+}).filter(s => s.w > 8 && s.w < 80);
+```
+
+   TikTok labels glyphs with `data-e2e` (`like-icon`, `comment-icon`, …);
+   Instagram uses `aria-label` (`Like`, `Comment`, `Share`, `Reels`, …). Save
+   them as `<symbol>` defs — `assets/icons-tiktok.svg` and
+   `assets/icons-instagram.svg` in this skill are exactly that output.
+4. Read text metrics the same way (`getComputedStyle` → `fontSize`,
+   `fontWeight`, `color`) for username, caption, counts, tab labels.
+
+## Pull real posts
+
+- **TikTok**: `yt-dlp "https://www.tiktok.com/@<user>" --playlist-items 1-2 --write-info-json`
+  works logged out and returns caption, like/comment/share counts, and duration
+  in the `.info.json`. Avatars: the profile page HTML contains
+  `"avatarLarger":"…"` (send an iPhone user agent).
+- **Instagram Reels**: `yt-dlp` cannot list a profile's reels, but the
+  logged-out `instagram.com/reels/` page serves real reels with direct
+  `scontent-*.cdninstagram.com/….mp4` URLs on each `<video>`; read them from the
+  DOM along with the username, caption, counts and
+  `img[alt*="profile picture"]`, then `curl` with a Safari user agent and an
+  `instagram.com` Referer. URLs expire within hours — download immediately.
+- Trim every clip to the slot: `ffmpeg -ss <start> -t 4.2 -i in.mp4 -vf "scale=540:960:force_original_aspect_ratio=increase,crop=540:960" -an …`.
+  Check the trimmed range for hard black cuts (sample mean luma every 0.5 s);
+  re-cut from a steady section if any frame drops near black.
+
+## Fidelity checklist
+
+- Real glyphs, real brand reds (`#FE2C55` TikTok, `#FF3040` Instagram).
+- Real handles, real counts, real captions (truncate with the app's own
+  `… more` treatment, never mid-word).
+- App-specific chrome: TikTok `Following | For You` header, black tab bar with
+  the two-tone `+`; Reels `Reels ⌄` header with camera, black nav with the
+  Reels glyph active.
+- Status bar split across the two screens as in the plate (`9:41` left,
+  wifi/battery right).
diff --git a/skills/duo/scripts/build.mjs b/skills/duo/scripts/build.mjs
new file mode 100644
index 0000000..8362938
--- /dev/null
+++ b/skills/duo/scripts/build.mjs
@@ -0,0 +1,85 @@
+#!/usr/bin/env node
+// Scaffold a HyperFrames project from the duo template.
+//
+//   node build.mjs --out ./my-meme [--id my-meme] [--duration 10] [--icons tiktok,instagram]
+//
+// Writes ONLY inside --out: index.html, hyperframes.json, assets/plate.png,
+// assets/screen-spec.json, and (optionally) the requested icon symbol sheets.
+// No network access. No dependencies beyond Node 18+.
+
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const skillDir = path.resolve(here, '..');
+
+function arg(name, fallback) {
+  const i = process.argv.indexOf(`--${name}`);
+  return i !== -1 && process.argv[i + 1] ? process.argv[i + 1] : fallback;
+}
+
+const out = arg('out');
+if (!out) {
+  console.error('usage: node build.mjs --out <dir> [--id <composition-id>] [--duration <seconds>] [--icons tiktok,instagram]');
+  process.exit(1);
+}
+const outDir = path.resolve(process.cwd(), out);
+const id = arg('id', path.basename(outDir)).replace(/[^a-z0-9-]/gi, '-').toLowerCase();
+const duration = Number(arg('duration', '10'));
+if (!Number.isFinite(duration) || duration <= 0 || duration > 120) {
+  console.error('--duration must be a number of seconds between 0 and 120');
+  process.exit(1);
+}
+const icons = arg('icons', '').split(',').map((s) => s.trim()).filter(Boolean);
+for (const ic of icons) {
+  if (!['tiktok', 'instagram'].includes(ic)) {
+    console.error(`unknown icon sheet "${ic}" (allowed: tiktok, instagram)`);
+    process.exit(1);
+  }
+}
+
+async function refuseSymlink(p) {
+  try {
+    const st = await fs.lstat(p);
+    if (st.isSymbolicLink()) throw new Error(`refusing to write through symlink: ${p}`);
+  } catch (e) {
+    if (e.code !== 'ENOENT') throw e;
+  }
+}
+
+await refuseSymlink(outDir);
+await fs.mkdir(path.join(outDir, 'assets'), { recursive: true });
+await fs.mkdir(path.join(outDir, 'renders'), { recursive: true });
+
+const template = await fs.readFile(path.join(skillDir, 'template', 'index.template.html'), 'utf8');
+const html = template
+  .replaceAll('__COMPOSITION_ID__', id)
+  .replaceAll('__DURATION__', String(duration));
+
+const targets = [
+  ['index.html', html],
+  ['hyperframes.json', JSON.stringify({ name: id, entry: 'index.html', width: 1448, height: 1086, fps: 30 }, null, 2) + '\n'],
+];
+for (const [rel, content] of targets) {
+  const p = path.join(outDir, rel);
+  await refuseSymlink(p);
+  await fs.writeFile(p, content, 'utf8');
+}
+
+const copies = [
+  ['assets/plate.png', 'assets/plate.png'],
+  ['assets/screen-spec.json', 'assets/screen-spec.json'],
+  ...icons.map((ic) => [`assets/icons-${ic}.svg`, `assets/icons-${ic}.svg`]),
+];
+for (const [src, rel] of copies) {
+  const p = path.join(outDir, rel);
+  await refuseSymlink(p);
+  await fs.copyFile(path.join(skillDir, src), p);
+}
+
+console.log(`scaffolded ${outDir}`);
+console.log(`  composition id: ${id}   duration: ${duration}s   root: 1448x1086 @ 30fps`);
+console.log('  left screen : #screen-left  .content  495x849');
+console.log('  right screen: #screen-right .content  498x849');
+console.log('next: fill the two .content slots and the timeline hook in index.html, then `npx hyperframes@latest check`.');
diff --git a/skills/duo/template/index.template.html b/skills/duo/template/index.template.html
new file mode 100644
index 0000000..ba7645d
--- /dev/null
+++ b/skills/duo/template/index.template.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html><head><meta charset="utf-8">
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<style>
+  /* ===== LOCKED RIG — do not edit this block. Geometry is measured from the plate. ===== */
+  html,body{margin:0;background:#000;font-family:-apple-system,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
+  #root{position:relative;width:1448px;height:1086px;overflow:hidden;background:#000}
+  #cam{position:absolute;inset:0;width:1448px;height:1086px;transform-origin:50% 50%}
+  #plate{position:absolute;inset:0;width:1448px;height:1086px;background:url(assets/plate.png) 0 0/1448px 1086px no-repeat}
+  .screen{position:absolute;top:105px;height:849px;overflow:hidden;background:#000}
+  #screen-left{left:223px;width:495px;border-radius:56px 12px 12px 56px}
+  #screen-right{left:724px;width:498px;border-radius:12px 56px 56px 12px}
+  .content{position:absolute;inset:0;overflow:hidden}
+  /* ===== END LOCKED RIG ===== */
+
+  /* Your screen styles go below. Everything inside .content is a normal DOM viewport:
+     left = 495×849, right = 498×849. Position against those sizes, not the 1448×1086 root. */
+  /*__SCREEN_STYLES__*/
+</style></head>
+<body>
+<div id="root" data-composition-id="__COMPOSITION_ID__" data-duration="__DURATION__" data-fps="30" data-width="1448" data-height="1086">
+<div id="cam">
+  <div id="plate"></div>
+
+  <div id="screen-left" class="screen"><div class="content">
+    <!--__SCREEN_LEFT__-->
+  </div></div>
+
+  <div id="screen-right" class="screen"><div class="content">
+    <!--__SCREEN_RIGHT__-->
+  </div></div>
+</div>
+</div>
+
+<script>
+(() => {
+  const tl = gsap.timeline({ paused: true });
+  const DUR = __DURATION__;
+
+  // Camera: one slow push with intent across the whole clip (motion-doctrine: no idle wobble; a
+  // monotonic push is allowed, a sine "breathe" is not). Keep or remove; do not loop it.
+  tl.fromTo('#cam', { scale: 1.0 }, { scale: 1.045, duration: DUR, ease: 'power1.inOut' }, 0);
+
+  // Your screen animation goes below. Both screens share this ONE timeline (HyperFrames
+  // requires exactly one registered timeline per composition).
+  /*__SCREEN_TIMELINE__*/
+
+  window.__timelines['__COMPOSITION_ID__'] = tl;
+})();
+</script>
+</body></html>