← back to Wallpaper Paint Antics
Scaffold Wally and Pippa animated shorts
fa6d0ab718338589481f7a7ec6ab964db4a4c7af · 2026-09-04 23:11:43 -0700 · Steve Abrams
Files touched
A .gitignoreA AGENTS.mdA BRIEF.mdA CLAUDE.mdA DESIGN.mdA STORYBOARD.mdA hyperframes.jsonA index.htmlA meta.jsonA package.json
Diff
commit fa6d0ab718338589481f7a7ec6ab964db4a4c7af
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Fri Sep 4 23:11:43 2026 -0700
Scaffold Wally and Pippa animated shorts
---
.gitignore | 11 ++++++
AGENTS.md | 100 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
BRIEF.md | 17 ++++++++++
CLAUDE.md | 100 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
DESIGN.md | 11 ++++++
STORYBOARD.md | 24 +++++++++++++
hyperframes.json | 13 ++++++++
index.html | 59 ++++++++++++++++++++++++++++++++
meta.json | 5 +++
package.json | 11 ++++++
10 files changed, 351 insertions(+)
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3eb5716
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,11 @@
+node_modules/
+.env*
+tmp/
+*.log
+.DS_Store
+dist/
+build/
+.next/
+.hyperframes/
+renders/
+assets/*.wav
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..6deb8e4
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,100 @@
+# 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, video to pull audio from, or one generated from a mood brief) → 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-audio`, `/hyperframes-registry`, `/figma`) and the full capability map live inside `/hyperframes` — it is the single source of truth for which skill handles which intent.
+
+**Changing how real footage or images look or reveal?** Load `/media-use` and read its `references/media-treatments.md` before editing, even when the request only says dark, flat, boring, retro, private, or “make the reveal cooler.” It governs how footage is treated, never whether media may be used. Use canonical media treatments and seek-safe motion; do not improvise equivalent CSS/SVG filters or overlays.
+
+> **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 # human-operated foreground preview (blocks until stopped)
+npx hyperframes preview --background # agent-safe persistent Studio preview
+npx hyperframes preview --status # verify the persistent preview is listening
+npx hyperframes preview --stop # stop it when review is finished
+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
+```
+
+> **Agents must use `npx hyperframes preview --background` for Studio handoff.** Do not rely
+> on a shell/tool `run_in_background` wrapper around `npm run dev`: that foreground process
+> remains owned by the invoking session and can disappear while the browser stays open,
+> leaving refreshes at `ERR_CONNECTION_TIMED_OUT`. Verify with `preview --status`, keep it
+> alive through review, and stop it explicitly with `preview --stop` afterward.
+
+> **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` and a duration. `data-start` is what marks it as timed; `data-track-index` is an optional Studio display lane the render never reads
+2. Give timed visual elements `class="clip"`. The framework keys visibility off `data-start`, not the class, but the shared `.clip` CSS is what gives a scene its full-frame box, and `lint` warns without it
+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/BRIEF.md b/BRIEF.md
new file mode 100644
index 0000000..d62fa3a
--- /dev/null
+++ b/BRIEF.md
@@ -0,0 +1,17 @@
+---
+workflow: general-video
+flow: automation
+storyboard: no
+message: Two decorators make a beautiful mess, then solve it together.
+aspect: 1080x1920
+language: en
+length: Three shorts, exactly 20 seconds each
+---
+
+User: "CReate 2 animated characsters using our mcp collection 2 People, 1 wallpaper 2. paint Wallpaper and 3 20 second videos of their antics"
+
+Deliver two original human cartoon characters: Wally, a meticulous wallpaper installer in teal overalls and a mustard cap; Pippa, a fearless painter with curly auburn hair, a coral shirt and cream dungarees. Both recur in all three shorts with articulated arms, legs, facial reactions and physical prop interactions.
+
+Inferred creative defaults: playful 2D cartoon animation, original instrumental music and comic sound effects, no spoken dialogue; portrait format follows personal media preference. User asked for finished videos; local rendering is authorized by that request. No publishing or paid provider setup.
+
+MCP inventory: tickets used for audit; Chrome DevTools available but initial startup returned profile-in-use. No generative-video MCP is connected. Do not claim an AI-video model generated these shots. Original local animation is the selected route.
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..6deb8e4
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,100 @@
+# 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, video to pull audio from, or one generated from a mood brief) → 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-audio`, `/hyperframes-registry`, `/figma`) and the full capability map live inside `/hyperframes` — it is the single source of truth for which skill handles which intent.
+
+**Changing how real footage or images look or reveal?** Load `/media-use` and read its `references/media-treatments.md` before editing, even when the request only says dark, flat, boring, retro, private, or “make the reveal cooler.” It governs how footage is treated, never whether media may be used. Use canonical media treatments and seek-safe motion; do not improvise equivalent CSS/SVG filters or overlays.
+
+> **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 # human-operated foreground preview (blocks until stopped)
+npx hyperframes preview --background # agent-safe persistent Studio preview
+npx hyperframes preview --status # verify the persistent preview is listening
+npx hyperframes preview --stop # stop it when review is finished
+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
+```
+
+> **Agents must use `npx hyperframes preview --background` for Studio handoff.** Do not rely
+> on a shell/tool `run_in_background` wrapper around `npm run dev`: that foreground process
+> remains owned by the invoking session and can disappear while the browser stays open,
+> leaving refreshes at `ERR_CONNECTION_TIMED_OUT`. Verify with `preview --status`, keep it
+> alive through review, and stop it explicitly with `preview --stop` afterward.
+
+> **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` and a duration. `data-start` is what marks it as timed; `data-track-index` is an optional Studio display lane the render never reads
+2. Give timed visual elements `class="clip"`. The framework keys visibility off `data-start`, not the class, but the shared `.clip` CSS is what gives a scene its full-frame box, and `lint` warns without it
+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/DESIGN.md b/DESIGN.md
new file mode 100644
index 0000000..349cf15
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,11 @@
+# Wally & Pippa
+
+Concept: an affectionate decorating double act in a warm, theatrical room, with an orderly wallpaper pattern colliding with irrepressible paint.
+
+Original code-native 2D character rigs, rounded silhouettes, navy outlines, tactile highlights and shadows. Wally has a round nose, a dark moustache, teal overalls, cream shirt, mustard cap and brown boots. Pippa has a curly auburn bun, freckles, coral sleeves, cream overalls and blue shoes. Shared proportions and unchanging costume geometry across episodes. Expressions change through eyelids, brows and mouths.
+
+Palette: background #f4eadb, ink #243b42, teal #267e7c, coral #e97556, mustard #e9b64b, paper #fff7e8. Warm wall with molding; patterned hanging paper, paint bucket, step ladder and shadowed floor establish the worksite.
+
+Type: Archivo Black for episode titles, Space Mono for episode labels, both embedded locally. Focal elements: the two large characters and the moving prop. Header anchors: WALLY & PIPPA and episode title. Bottom anchor: a short punchline timed to the payoff. Avoid UI boxes inside the films.
+
+Motion recipes: finite paused GSAP timeline; continuous deterministic character drawing driven by timeline time; anticipation, follow-through and squash at prop impacts. Particle-burst recipe supplies time-derived paint droplets; spring-pop entrance supplies playful punchline arrival. No generated still-image panning.
diff --git a/STORYBOARD.md b/STORYBOARD.md
new file mode 100644
index 0000000..0007ed0
--- /dev/null
+++ b/STORYBOARD.md
@@ -0,0 +1,24 @@
+# Three 20-second shorts
+
+## 01 — The runaway roll
+0–3: Wally proudly holds a wallpaper roll. Pippa gives an enthusiastic thumbs-up.
+3–6: The roll slips, bouncing into the room; Wally spots it a beat too late.
+6–11: Wally chases. Pippa tries to stop it with her foot, and the roll ricochets.
+11–15: Wallpaper winds around both decorators as they spin in a comic tangle.
+15–18: A shared tug lifts the paper onto the wall; they pop free.
+18–20: They pose beside the neat wallpaper. Punchline: THAT'S A WRAP.
+
+## 02 — A splash of personality
+0–4: Pippa paints a broad coral swath. Wally carefully measures his wallpaper.
+4–7: Pippa winds up an overconfident roller flourish.
+7–10: A stream of paint arcs toward Wally. He ducks; the wall gets a giant splat.
+10–13: Wally rises with one coral moustache. Pippa tries to look innocent.
+13–17: Wally adds wallpaper eyes to the splat, making a playful wall face.
+17–20: They laugh and point to their accidental art. Punchline: HAPPY ACCIDENT.
+
+## 03 — The great wall-off
+0–3: Painter and paperhanger size each other up; a simple 3-2-1 cue.
+3–10: Furious wallpapering and painting race; sleeves and knees pump.
+10–13: Both finish and boast. The seam between their sides looks awkward.
+13–17: They exchange tools, work together, and finish a paper-and-paint feature wall.
+17–20: High-five, a small comic paint fingerprint on Wally's cap. Punchline: BETTER TOGETHER.
diff --git a/hyperframes.json b/hyperframes.json
new file mode 100644
index 0000000..08fb681
--- /dev/null
+++ b/hyperframes.json
@@ -0,0 +1,13 @@
+{
+ "$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
+ },
+ "authoringSkill": "general-video"
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..69056c1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en" data-resolution="portrait">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=1080, height=1920" />
+ <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: 1080px;
+ height: 1920px;
+ 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="1080"
+ data-height="1920"
+ >
+
+
+
+ <!--
+ 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/meta.json b/meta.json
new file mode 100644
index 0000000..8e83b31
--- /dev/null
+++ b/meta.json
@@ -0,0 +1,5 @@
+{
+ "id": "wallpaper-paint-antics",
+ "name": "wallpaper-paint-antics",
+ "createdAt": "2026-09-05T06:10:33.556Z"
+}
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..c8700b7
--- /dev/null
+++ b/package.json
@@ -0,0 +1,11 @@
+{
+ "name": "wallpaper-paint-antics",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "npx --yes hyperframes@0.8.29 preview",
+ "check": "npx --yes hyperframes@0.8.29 check",
+ "render": "npx --yes hyperframes@0.8.29 render",
+ "publish": "npx --yes hyperframes@0.8.29 publish"
+ }
+}
(oldest)
·
back to Wallpaper Paint Antics
·
Build and verify Wally and Pippa character animation 66ed536 →