---
name: morph-handoff
description: Author a 34-second square handoff film with a continuous shared-element morph, a prompt-reactive paper world, and a session-wall camera reveal. Produces editable HTML/GSAP and an actual HyperFrames MP4.
version: 1.0.3
category: video
delivery: download-only
---

# Morph Handoff · 形变接力短片

Use this for a connection between two tools: planning → ticketing, notes → briefing, or a comparable handoff. This is a parameterized 1080×1080 renderer with two authored artifact layouts, plus an authoring workflow. It does not infer a new story from an arbitrary prose prompt. Author a brief JSON first; extend `scripts/film.js` for a new visual artifact class.

Read `references/direction.md` and `references/input-contract.md`. Choose one concrete reacting word before writing the prompt. Use cool paper, a restrained jade accent, serif response copy, sans interface copy, and mono typing. Default film language is English. Both product surfaces must be owned or neutral original representations; no third-party assets or signatures are bundled.

## Build and render

Requirements: Node 22+, Python 3.9+, FFmpeg/FFprobe, Chrome or a HyperFrames-supported Chromium. No model key and no paid calls.

```sh
cd skills/morph-handoff
npm ci --ignore-scripts
node scripts/build.mjs /absolute/brief.json /absolute/project
node node_modules/hyperframes/bin/hyperframes.mjs check /absolute/project
node scripts/render.mjs /absolute/project /absolute/film.mp4
```

`build` writes an editable `index.html`, `film.js`, `design.css`, local font/GSAP assets, a generated original `score.wav`, `meta.json`, `ledger.json`, `STORYBOARD.md`, and the brief. The actual animation is embedded into HTML for HyperFrames static inspection; edit the reusable runtime and rebuild to keep both copies synchronized. HyperFrames owns audio timing. For browser authoring preview use HyperFrames preview; `window.seek(seconds)` supports deterministic inspection from 0 through 34.

## Direct and check

1. Confirm square feed use, interface rights, copy budgets, reacting word, receiving value, and nine meaningful fictional or authorized session names. The supplied demonstrations authorize a square review film and fictional surfaces.
2. Keep the *same node* through button 340×92 → prompt 760×260 → choices 760×520 → width/height zero. Shared geometry uses `.65s expo.out`, delayed inner content, letter dissolve, no first-act cuts.
3. Preserve the beat map 0 / 4 / 11 / 14.5 / 18.5 / 23 / 27 / 30.5 / 34. One reaction starts exactly when its word completes; paper or ghost number persists until the reveal.
4. Reveal a 3×3 physical session wall, maintaining the center session identity. Fly into upper-right and repeat the gesture in 4s. Close with parallel copy and concrete receiving value.
5. Run HyperFrames check and inspect actual encoded frames at 3.5, 4.4, 8.7, 12, 17, 19.9, 21, 22.8, 25.8, 28.6, 33.2. Check native 1080 text and normal-speed playback, not only thumbnails.
6. Verify H.264/AAC, 1080 square, 24fps and 34s. Check seeks out of order and reject input/seek bounds. Review audio separately; the procedural bed is a review score, not professional scoring or a ChatCut export. Disclose when subjective listening has not occurred.
7. Package only this Skill directory excluding node_modules, caches, and demo media. Keep each brief, render, poster and report outside the generic ZIP. Freshly unzip, `npm ci`, and run a third independently authored input before delivery.

## 中文说明

这是可参数化渲染器与创作流程，不是任意一句话自动成片。每次先编写输入，再运行本地 HTML/GSAP → HyperFrames，34 秒完整方形叙事不缩成技术 demo。票券与证据简报为两种已有成果布局，新类别需扩展代码。配乐由本地脚本合成，无私有音轨、无生成模型费用；专业配乐和主观听感须单独验收。