horizontal-kinetic-talk-video

name	horizontal-kinetic-talk-video
description	Create 16:9 horizontal kinetic talk-video edits with Remotion from a speaker video and script. Use when the user asks to cut or template a horizontal口播 video with 人物开场, full-screen animated business/methodology boards, phrase-triggered components, subtitles synced to voice, picture-in-picture circular speaker anchors, camera-like push/pan transitions, or the 横版运镜增强 style.

Horizontal Kinetic Talk Video

What This Skill Does

This Skill is the editing workflow and directing logic. It is not the renderer by itself.

To reproduce the intended look, use it together with the paired Remotion project in this kit:

remotion-hud-template/

The real visual template is:

remotion-hud-template/src/TemplateHorizontalKinetic.tsx

If this Skill is shared without the Remotion project, another user will only receive the method description, not the actual animation components, caption layer, PIP portrait logic, camera motion, or composition setup.

Workflow

1. Inspect the source video with ffprobe, then extract frames around 1s, 8s, and the ending to check face position, hand movement, and safe zones.
2. Transcode unstable phone/HEVC inputs to 1920x1080 H.264/AAC before using Remotion.
3. Extract audio and transcribe with Whisper. Manually correct business terms, names, CTA words, and the final 10 seconds.
4. Segment the script into 5-8 chapters. Prefer this order: intro, mistakes, money, contentFlow, salesFlow, supportFlow, standards, cta.
5. Build a props JSON for HorizontalKineticTemplate: captions follow the audio, scenes follow semantic chapters, and items.at follows exact spoken phrases.
6. Render stills for key frames before rendering the full video.
7. Render the full video, then create a contact sheet and verify no face overlap, no card collision, and no template debug words.

Scene Rules

• intro: Use the speaker video or a full-screen title opening. The user should understand the promise in 1-2 seconds.
• mistakes: Use a full-screen board with PIP when listing wrong approaches, risks, or traps.
• money: Use the speaker page when giving the main selection standard; place cards away from the face.
• contentFlow, salesFlow, supportFlow: Use full-screen board scenes for process visualization. Reveal cards by phrase, not all at once.
• standards: Return to the speaker for identity, stance, or framework summary.
• cta: Use a simple full-screen board or speaker return. Make the CTA readable and synchronized.

Timing Rules

• Caption lead: about 0.05s.
• Component/motion lead: about 0.12s.
• Card reveal: 8-10 frames.
• Transition sweep: under 20 frames.
• Split any static visual section longer than 12-14 seconds.
• Check the final 10 seconds separately; end captions often lag.

Visual Rules

• Speaker full-screen scenes may slowly push or pan, but should not feel like a digital zoom mistake.
• Full-screen boards should use the source video as a blurred low-opacity background to keep visual continuity.
• PIP should be a clean circular portrait. Do not add LIVE, scan lines, or horizontal marks over the face.
• Do not place cards over the eyes, mouth, or the bottom subtitle area.
• Do not show internal labels such as Hook, Action, Scene, or version numbers. Use viewer-facing chapter titles.
• Prefer transparent or glassy panels; avoid opaque blocks that make the screen feel fake or heavy.

Remotion Project

Use the paired project:

cd remotion-hud-template
npm install
npm run render:sample

For a new video:

1. Put the normalized video into remotion-hud-template/public/input/.
2. Duplicate src/data/sample-kinetic-props.json.
3. Update videoPath, durationInSeconds, captions, and scenes.
4. Render with:

npx remotion render src/index.ts HorizontalKineticTalkVideo out/output.mp4 --props=src/data/your-props.json --crf=18 --concurrency=1

Validation Commands

npm run typecheck

npm run still:sample

npm run render:sample

ffmpeg -y -i "out/output.mp4" -vf "fps=1/7,scale=480:-1,tile=4x3" -frames:v 1 -update 1 "out/contact.jpg"

Reference

Read references/remotion-horizontal-kinetic.md for the detailed SOP, props schema, chapter mapping, and delivery checklist.