← back to Rentv Promos
auto-save: 2026-07-22T13:44:34 (1 files) — recap-v2/
263c1a0b046a9fe20e16e44af78200b7e99f9e70 · 2026-07-22 13:44:37 -0700 · Steve Abrams
Files touched
A recap-v2/AGENTS.mdA recap-v2/BRIEF.mdA recap-v2/CLAUDE.mdA recap-v2/hyperframes.jsonA recap-v2/index.htmlA recap-v2/media/captures/article.pngA recap-v2/media/captures/home.pngA recap-v2/media/captures/markets.pngA recap-v2/media/captures/review.pngA recap-v2/meta.jsonA recap-v2/package.jsonA recap-v2/scripts/capture.mjs
Diff
commit 263c1a0b046a9fe20e16e44af78200b7e99f9e70
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Wed Jul 22 13:44:37 2026 -0700
auto-save: 2026-07-22T13:44:34 (1 files) — recap-v2/
---
recap-v2/AGENTS.md | 93 ++++++++++++++++++++++++++++++++++++
recap-v2/BRIEF.md | 44 +++++++++++++++++
recap-v2/CLAUDE.md | 93 ++++++++++++++++++++++++++++++++++++
recap-v2/hyperframes.json | 12 +++++
recap-v2/index.html | 59 +++++++++++++++++++++++
recap-v2/media/captures/article.png | Bin 0 -> 786675 bytes
recap-v2/media/captures/home.png | Bin 0 -> 1504177 bytes
recap-v2/media/captures/markets.png | Bin 0 -> 184023 bytes
recap-v2/media/captures/review.png | Bin 0 -> 1340287 bytes
recap-v2/meta.json | 5 ++
recap-v2/package.json | 11 +++++
recap-v2/scripts/capture.mjs | 58 ++++++++++++++++++++++
12 files changed, 375 insertions(+)
diff --git a/recap-v2/AGENTS.md b/recap-v2/AGENTS.md
new file mode 100644
index 0000000..a63562c
--- /dev/null
+++ b/recap-v2/AGENTS.md
@@ -0,0 +1,93 @@
+# HyperFrames Composition Project
+
+## Skills — USE THESE FIRST
+
+**Always invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that are NOT in generic web docs. Skipping them produces broken compositions.
+
+**Doing anything with HyperFrames?** Start at `/hyperframes` — it tells you what HyperFrames can do and which skill or workflow handles your intent (make a video, TTS / BGM, prep footage, author / animate, render, install blocks), confirms your brief up front (the intent layer), and routes every "make me a…" request (a video, a deck, a composition port) to the right workflow. Read it first, especially when there's no project context to orient you. The workflows it routes to:
+
+- `/product-launch-video` — any **website** URL or brief / script → a product launch / SaaS / promo video, or a site tour / showcase featuring the site's own captured visuals.
+- `/faceless-explainer` — arbitrary text (topic / article / notes), **no URL, no website capture** → 60-90s faceless explainer.
+- `/embedded-captions` — an existing talking-head video (MP4) → the same footage with captions / subtitles added (rail + embed, or pure-cinematic embed); the footage itself is untouched.
+- `/talking-head-recut` — an existing talking-head / interview / podcast video (MP4) → the same footage **packaged with designed graphic overlays** (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, pip) synced to the transcript; the clip plays unchanged underneath. (Plain captions/subtitles → `/embedded-captions`.)
+- `/pr-to-video` — a GitHub PR (URL / `owner/repo#N` / "this PR") → 30-90s code-change explainer (changelog / feature reveal / fix / refactor).
+- `/motion-graphics` — a short (typically under 10s) design-led **motion graphic**, motion-is-the-message, no narration: kinetic type, a stat / number count-up, a chart, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight; rendered to MP4 or a transparent overlay. Longer / narrated / custom → `/general-video`.
+- `/music-to-video` — a **music track** (audio file, or video to pull audio from) → beat-synced video (lyric / slideshow / kinetic promo). Music drives pacing; user-supplied images / videos are cut onto the same beat grid.
+- `/slideshow` — a **presentation / pitch deck / interactive deck** — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video.
+- `/general-video` — fallback for any other video (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition) and the home of **companion mode** — co-create with the full HyperFrames toolbox; the original hyperframes authoring flow, any length.
+
+**Porting an existing composition?** `/remotion-to-hyperframes` translates a Remotion (React) composition into HyperFrames HTML — a source migration, separate from the creation workflows above.
+
+The domain skills (`/hyperframes-core`, `/hyperframes-animation`, `/hyperframes-keyframes`, `/hyperframes-creative`, `/hyperframes-cli`, `/media-use`, `/hyperframes-registry`, `/figma`) and the full capability map live inside `/hyperframes` — it is the single source of truth for which skill handles which intent.
+
+> **Tailwind v4 projects** (`hyperframes init --tailwind`): see `/hyperframes-core` → `references/tailwind.md`.
+
+> **Skill missing or stale?** Run `npx hyperframes skills update <name>` to install/refresh
+> the specific skill you need (the `/hyperframes` router does this automatically before
+> entering a workflow), or bare `npx hyperframes skills update` to refresh the core set plus
+> everything already installed — neither pulls the full set. Restart the agent session so
+> newly installed skills load.
+
+## Commands
+
+```bash
+npm run dev # start the preview server (long-running — keep it alive in background)
+npm run check # lint + runtime + layout + motion + contrast (one command)
+npm run render # render to MP4
+npm run publish # publish and get a shareable link
+npx hyperframes lint --verbose # include info-level findings
+npx hyperframes lint --json # machine-readable output for CI
+npx hyperframes docs <topic> # reference docs in terminal
+```
+
+> **`npm run dev` is a long-running server, not a one-shot command.** It blocks until stopped.
+> In Claude Code, always run it with `run_in_background: true`. Never run it as a foreground
+> command — it will time out and the server will die, breaking the browser preview.
+
+> **Pinned CLI version.** These scripts pin an exact `hyperframes@X.Y.Z` so this project re-renders identically over time. Weeks later that pin lags fixes shipped since. To move up: `npx hyperframes@latest upgrade --project . --check` (shows the delta), then `npx hyperframes@latest upgrade --project .` to rewrite the pins. Always unpinned — the pinned script re-runs the old version against itself.
+
+## Documentation
+
+**For quick reference**, use the local CLI docs command (no network required):
+
+```bash
+npx hyperframes docs <topic>
+```
+
+Topics: `data-attributes`, `gsap`, `compositions`, `rendering`, `examples`, `troubleshooting`
+
+**For full documentation**, discover pages via the machine-readable index — do NOT guess URLs:
+
+```
+https://hyperframes.heygen.com/llms.txt
+```
+
+## Project Structure
+
+- `index.html` — main composition (root timeline)
+- `compositions/` — sub-compositions referenced via `data-composition-src`
+- `meta.json` — project metadata (id, name)
+- `transcript.json` — whisper word-level transcript (if generated)
+
+## Linting — ALWAYS RUN AFTER CHANGES
+
+After creating or editing any `.html` composition, **always** run the full check before considering the task complete:
+
+```bash
+npm run check
+```
+
+Fix all errors before presenting the result. Warnings should be reviewed before rendering.
+
+## Key Rules
+
+1. Every timed element needs `data-start`, `data-duration`, and `data-track-index`
+2. Elements with timing **MUST** have `class="clip"` — the framework uses this for visibility control
+3. Timelines must be paused and registered on `window.__timelines`:
+ ```js
+ window.__timelines = window.__timelines || {};
+ window.__timelines["composition-id"] = gsap.timeline({ paused: true });
+ ```
+4. Videos use `muted` with a separate `<audio>` element for the audio track
+5. Sub-compositions use `data-composition-src="compositions/file.html"` to reference other HTML files
+6. Only deterministic logic — no `Date.now()`, no `Math.random()`, no network fetches
diff --git a/recap-v2/BRIEF.md b/recap-v2/BRIEF.md
new file mode 100644
index 0000000..a925297
--- /dev/null
+++ b/recap-v2/BRIEF.md
@@ -0,0 +1,44 @@
+# BRIEF
+
+workflow: general-video
+flow: automation
+storyboard: no
+
+## Message
+
+A warm, detailed ~5-minute narrated tour of the rebuilt RENTV.com platform — celebrating what Boomer's team has built at rentv.com and showing how the new build (live at rentv-v1.agentabrams.com) extends it, with every improvement framed as a friendly suggestion, never a criticism.
+
+## Audience
+
+Boomer (RENTV.com owner) and the RENTV team. Non-technical, industry-savvy commercial real estate media people. Warm, respectful, collegial tone — Steve speaking to a peer whose work he admires.
+
+## Deliverable
+
+- Single MP4, 1920x1080, ~5 minutes (target 4:45–5:15).
+- Voiceover: Steve's cloned ElevenLabs voice (voice_id Xa9qV4wNbvSkdUWsYLzq, "Steve Abrams").
+- Visuals: live captured screenshots of rentv-v1.agentabrams.com (basic auth admin / DW2024!), presented with slow pans/zooms and clean titling. All data shown is live rentv.com data.
+
+## Content sequence (from Steve's email)
+
+1. Opening — compliment RENTV.com and Boomer's decades of CRE journalism; this build is a tribute + set of suggestions, built in a day on their live data.
+2. Rebuilt front page — RENTV Originals leading the live wire.
+3. In-shell article reader.
+4. The REview.
+5. Live Markets page.
+6. CRE Talk.
+7. Ten complete site versions (Wire, Broadsheet, Terminal, Magazine, Dashboard, ...).
+8. Ten professional themes.
+9. Ten admin dashboards.
+10. Blog backend / publishing desk.
+11. Close — recap, gratitude, "these are just suggestions — your call entirely," where to see it live + logins.
+
+## Tone rules (hard)
+
+- Kind and complimentary about Boomer's existing work throughout.
+- Every new feature is "a suggestion" / "one idea" / "if it's useful" — never "we fixed" or "the old site lacked."
+- No jargon; plain spoken English suitable for a voice read.
+
+## Constraints
+
+- Narration drives timing; scenes cut on narration beats.
+- RENTV brand feel: newsroom-serious, dark-slate + red accent, editorial typography.
diff --git a/recap-v2/CLAUDE.md b/recap-v2/CLAUDE.md
new file mode 100644
index 0000000..a63562c
--- /dev/null
+++ b/recap-v2/CLAUDE.md
@@ -0,0 +1,93 @@
+# HyperFrames Composition Project
+
+## Skills — USE THESE FIRST
+
+**Always invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that are NOT in generic web docs. Skipping them produces broken compositions.
+
+**Doing anything with HyperFrames?** Start at `/hyperframes` — it tells you what HyperFrames can do and which skill or workflow handles your intent (make a video, TTS / BGM, prep footage, author / animate, render, install blocks), confirms your brief up front (the intent layer), and routes every "make me a…" request (a video, a deck, a composition port) to the right workflow. Read it first, especially when there's no project context to orient you. The workflows it routes to:
+
+- `/product-launch-video` — any **website** URL or brief / script → a product launch / SaaS / promo video, or a site tour / showcase featuring the site's own captured visuals.
+- `/faceless-explainer` — arbitrary text (topic / article / notes), **no URL, no website capture** → 60-90s faceless explainer.
+- `/embedded-captions` — an existing talking-head video (MP4) → the same footage with captions / subtitles added (rail + embed, or pure-cinematic embed); the footage itself is untouched.
+- `/talking-head-recut` — an existing talking-head / interview / podcast video (MP4) → the same footage **packaged with designed graphic overlays** (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, pip) synced to the transcript; the clip plays unchanged underneath. (Plain captions/subtitles → `/embedded-captions`.)
+- `/pr-to-video` — a GitHub PR (URL / `owner/repo#N` / "this PR") → 30-90s code-change explainer (changelog / feature reveal / fix / refactor).
+- `/motion-graphics` — a short (typically under 10s) design-led **motion graphic**, motion-is-the-message, no narration: kinetic type, a stat / number count-up, a chart, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight; rendered to MP4 or a transparent overlay. Longer / narrated / custom → `/general-video`.
+- `/music-to-video` — a **music track** (audio file, or video to pull audio from) → beat-synced video (lyric / slideshow / kinetic promo). Music drives pacing; user-supplied images / videos are cut onto the same beat grid.
+- `/slideshow` — a **presentation / pitch deck / interactive deck** — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video.
+- `/general-video` — fallback for any other video (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition) and the home of **companion mode** — co-create with the full HyperFrames toolbox; the original hyperframes authoring flow, any length.
+
+**Porting an existing composition?** `/remotion-to-hyperframes` translates a Remotion (React) composition into HyperFrames HTML — a source migration, separate from the creation workflows above.
+
+The domain skills (`/hyperframes-core`, `/hyperframes-animation`, `/hyperframes-keyframes`, `/hyperframes-creative`, `/hyperframes-cli`, `/media-use`, `/hyperframes-registry`, `/figma`) and the full capability map live inside `/hyperframes` — it is the single source of truth for which skill handles which intent.
+
+> **Tailwind v4 projects** (`hyperframes init --tailwind`): see `/hyperframes-core` → `references/tailwind.md`.
+
+> **Skill missing or stale?** Run `npx hyperframes skills update <name>` to install/refresh
+> the specific skill you need (the `/hyperframes` router does this automatically before
+> entering a workflow), or bare `npx hyperframes skills update` to refresh the core set plus
+> everything already installed — neither pulls the full set. Restart the agent session so
+> newly installed skills load.
+
+## Commands
+
+```bash
+npm run dev # start the preview server (long-running — keep it alive in background)
+npm run check # lint + runtime + layout + motion + contrast (one command)
+npm run render # render to MP4
+npm run publish # publish and get a shareable link
+npx hyperframes lint --verbose # include info-level findings
+npx hyperframes lint --json # machine-readable output for CI
+npx hyperframes docs <topic> # reference docs in terminal
+```
+
+> **`npm run dev` is a long-running server, not a one-shot command.** It blocks until stopped.
+> In Claude Code, always run it with `run_in_background: true`. Never run it as a foreground
+> command — it will time out and the server will die, breaking the browser preview.
+
+> **Pinned CLI version.** These scripts pin an exact `hyperframes@X.Y.Z` so this project re-renders identically over time. Weeks later that pin lags fixes shipped since. To move up: `npx hyperframes@latest upgrade --project . --check` (shows the delta), then `npx hyperframes@latest upgrade --project .` to rewrite the pins. Always unpinned — the pinned script re-runs the old version against itself.
+
+## Documentation
+
+**For quick reference**, use the local CLI docs command (no network required):
+
+```bash
+npx hyperframes docs <topic>
+```
+
+Topics: `data-attributes`, `gsap`, `compositions`, `rendering`, `examples`, `troubleshooting`
+
+**For full documentation**, discover pages via the machine-readable index — do NOT guess URLs:
+
+```
+https://hyperframes.heygen.com/llms.txt
+```
+
+## Project Structure
+
+- `index.html` — main composition (root timeline)
+- `compositions/` — sub-compositions referenced via `data-composition-src`
+- `meta.json` — project metadata (id, name)
+- `transcript.json` — whisper word-level transcript (if generated)
+
+## Linting — ALWAYS RUN AFTER CHANGES
+
+After creating or editing any `.html` composition, **always** run the full check before considering the task complete:
+
+```bash
+npm run check
+```
+
+Fix all errors before presenting the result. Warnings should be reviewed before rendering.
+
+## Key Rules
+
+1. Every timed element needs `data-start`, `data-duration`, and `data-track-index`
+2. Elements with timing **MUST** have `class="clip"` — the framework uses this for visibility control
+3. Timelines must be paused and registered on `window.__timelines`:
+ ```js
+ window.__timelines = window.__timelines || {};
+ window.__timelines["composition-id"] = gsap.timeline({ paused: true });
+ ```
+4. Videos use `muted` with a separate `<audio>` element for the audio track
+5. Sub-compositions use `data-composition-src="compositions/file.html"` to reference other HTML files
+6. Only deterministic logic — no `Date.now()`, no `Math.random()`, no network fetches
diff --git a/recap-v2/hyperframes.json b/recap-v2/hyperframes.json
new file mode 100644
index 0000000..dc9ec2e
--- /dev/null
+++ b/recap-v2/hyperframes.json
@@ -0,0 +1,12 @@
+{
+ "$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
+ "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
+ "paths": {
+ "blocks": "compositions",
+ "components": "compositions/components",
+ "assets": "assets"
+ },
+ "media": {
+ "autoProxy": true
+ }
+}
diff --git a/recap-v2/index.html b/recap-v2/index.html
new file mode 100644
index 0000000..cfed975
--- /dev/null
+++ b/recap-v2/index.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=1920, height=1080" />
+ <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+ <style>
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+ html,
+ body {
+ margin: 0;
+ width: 1920px;
+ height: 1080px;
+ overflow: hidden;
+ background: #000;
+ }
+ body {
+ font-family: "Inter", sans-serif;
+ }
+ code,
+ pre,
+ .monospace {
+ font-family: "JetBrains Mono", monospace;
+ }
+ </style>
+ </head>
+ <body>
+ <div
+ id="root"
+ data-composition-id="main"
+ data-start="0"
+ data-duration="10"
+ data-width="1920"
+ data-height="1080"
+ >
+
+
+
+ <!--
+ Add your clips here. Example:
+ <div id="title" class="clip" data-start="0" data-duration="5" data-track-index="1"
+ style="font-size: 64px; color: #fff; padding: 40px">
+ Hello World
+ </div>
+ -->
+ </div>
+
+ <script>
+ window.__timelines = window.__timelines || {};
+ const tl = gsap.timeline({ paused: true });
+ // Example: tl.from("#title", { opacity: 0, y: -50, duration: 1 }, 0);
+ window.__timelines["main"] = tl;
+ </script>
+ </body>
+</html>
diff --git a/recap-v2/media/captures/article.png b/recap-v2/media/captures/article.png
new file mode 100644
index 0000000..0d23d79
Binary files /dev/null and b/recap-v2/media/captures/article.png differ
diff --git a/recap-v2/media/captures/home.png b/recap-v2/media/captures/home.png
new file mode 100644
index 0000000..242dc4d
Binary files /dev/null and b/recap-v2/media/captures/home.png differ
diff --git a/recap-v2/media/captures/markets.png b/recap-v2/media/captures/markets.png
new file mode 100644
index 0000000..700c153
Binary files /dev/null and b/recap-v2/media/captures/markets.png differ
diff --git a/recap-v2/media/captures/review.png b/recap-v2/media/captures/review.png
new file mode 100644
index 0000000..3c252cf
Binary files /dev/null and b/recap-v2/media/captures/review.png differ
diff --git a/recap-v2/meta.json b/recap-v2/meta.json
new file mode 100644
index 0000000..5a53b87
--- /dev/null
+++ b/recap-v2/meta.json
@@ -0,0 +1,5 @@
+{
+ "id": "my-video",
+ "name": "my-video",
+ "createdAt": "2026-07-22T20:41:14.117Z"
+}
\ No newline at end of file
diff --git a/recap-v2/package.json b/recap-v2/package.json
new file mode 100644
index 0000000..152d9bc
--- /dev/null
+++ b/recap-v2/package.json
@@ -0,0 +1,11 @@
+{
+ "name": "my-video",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "npx --yes hyperframes@0.7.68 preview",
+ "check": "npx --yes hyperframes@0.7.68 check",
+ "render": "npx --yes hyperframes@0.7.68 render",
+ "publish": "npx --yes hyperframes@0.7.68 publish"
+ }
+}
diff --git a/recap-v2/scripts/capture.mjs b/recap-v2/scripts/capture.mjs
new file mode 100644
index 0000000..3e69dbb
--- /dev/null
+++ b/recap-v2/scripts/capture.mjs
@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+/* Capture live rentv-v1.agentabrams.com screenshots for the recap video.
+ Uses httpCredentials (URL-embedded creds don't reach page fetch()). */
+import { createRequire } from 'node:module';
+import { mkdirSync } from 'node:fs';
+const require = createRequire('/Users/macstudio3/Projects/consulting-rentv-com/node_modules/');
+const { chromium } = require('playwright');
+
+const BASE = 'https://rentv-v1.agentabrams.com';
+const OUT = new URL('../media/captures/', import.meta.url).pathname;
+mkdirSync(OUT, { recursive: true });
+
+const SHOTS = [
+ // [name, path, {full, theme, waitMs}]
+ ['home', '/', { full: true, waitMs: 6000 }],
+ ['article', '/news/34236', { full: true, waitMs: 6000 }],
+ ['review', '/review', { full: true, waitMs: 6000 }],
+ ['markets', '/markets', { full: true, waitMs: 8000 }],
+ ['cretalk', '/cre-talk', { full: true, waitMs: 6000 }],
+ ['versions', '/versions', { full: true, waitMs: 4000 }],
+ ['v-wire', '/versions/wire.html', { full: false, waitMs: 6000 }],
+ ['v-broadsheet', '/versions/broadsheet.html',{ full: false, waitMs: 6000 }],
+ ['v-terminal', '/versions/terminal.html', { full: false, waitMs: 6000 }],
+ ['v-magazine', '/versions/magazine.html', { full: false, waitMs: 6000 }],
+ ['v-dashboard', '/versions/dashboard.html', { full: false, waitMs: 6000 }],
+ ['theme-midnight', '/', { full: false, theme: 4, waitMs: 6000 }],
+ ['theme-salmon', '/', { full: false, theme: 2, waitMs: 6000 }],
+ ['admin-index', '/admin', { full: true, waitMs: 5000 }],
+ ['admin-command', '/admin/command.html', { full: false, waitMs: 6000 }],
+ ['admin-kanban', '/admin/kanban.html', { full: false, waitMs: 6000 }],
+ ['admin-analytics', '/admin/analytics.html', { full: false, waitMs: 6000 }],
+ ['blog', '/blog', { full: true, waitMs: 5000 }],
+ ['publish', '/admin/publish.html', { full: false, waitMs: 6000 }],
+];
+
+const browser = await chromium.launch();
+const ctx = await browser.newContext({
+ httpCredentials: { username: 'admin', password: 'DW2024!' },
+ viewport: { width: 1920, height: 1080 },
+ deviceScaleFactor: 1,
+});
+
+for (const [name, path, opt] of SHOTS) {
+ const page = await ctx.newPage();
+ try {
+ if (opt.theme !== undefined) {
+ await page.addInitScript(t => localStorage.setItem('rentv-theme', String(t)), opt.theme);
+ }
+ await page.goto(BASE + path, { waitUntil: 'load', timeout: 45000 });
+ await page.waitForTimeout(opt.waitMs || 5000);
+ await page.screenshot({ path: `${OUT}${name}.png`, fullPage: !!opt.full });
+ console.log('ok', name);
+ } catch (e) {
+ console.log('FAIL', name, e.message.split('\n')[0]);
+ }
+ await page.close();
+}
+await browser.close();
← 86470bb RENTV: 4 HyperFrames promo videos (brand/deals/review/daily)
·
back to Rentv Promos
·
auto-save: 2026-07-22T14:14:43 (21 files) — recap-v2/index.h 3787f47 →