video-use-hyperframes-editor

name

video-use-hyperframes-editor

description

End-to-end workflow for editing narrated talking-head or screen-recording videos with Video Use-style text/timeline cleanup and HyperFrames motion overlays. Use when the user asks to cut a video, remove filler words/口水话/repeated phrases/false starts/silence, use Alibaba ASR, plan dynamic overlays, create preview/example pages for confirmation, render a final MP4, or build a nested demo video using Video Use and HyperFrames together.

Video Use + HyperFrames Editor

Use this skill to turn a narrated raw video into a reviewed final MP4. Treat the work as two separate stages:

1. Clean the spoken base video first.
2. Add HyperFrames motion only after the user confirms the base cut and visual direction.

The core rule is collaboration before irreversible polish: show the user what was removed, what will be animated, and example pages before final production.

Hard Gates

• Do not start motion design while the base cut still has obvious filler, false starts, repeated words, wrong tool names, or long no-speech gaps.
• Do not silently decide that filler cleanup is "good enough". After rendering a cleanup pass, tell the user the output path, duration, what was removed, and any uncertain spots.
• Do not proceed from motion planning to full implementation until the user confirms the planned style and content.
• Do not proceed from examples/mockups to full animation until the user confirms at least one example direction.
• Do not export the final MP4 until representative rendered frames have been checked from the actual output, not only from browser preview.

Workflow

1. Understand the Source

Locate the raw video and create a project folder near the source. Capture:

• source path
• target aspect ratio and duration
• whether the user wants speed-up
• silence threshold, usually 0.4s+ for no-speech gaps
• whether Chinese + English tool names are present
• desired output path

If the video is Chinese or mixed Chinese/English, prefer Alibaba ASR for edit decisions. If Alibaba is unavailable, disclose the fallback before using it.

2. Build a Clean Transcript Timeline

Transcribe the source with word or phrase timestamps. Read the transcript as clauses, not just search terms.

Identify and mark:

• no-speech gaps over the user threshold
• repeated words: 可以可以, 没有没有, 什么什么
• false starts: started phrase abandoned and restarted
• half-spoken English names: hy... before HyperFrames, vi... before Video Use
• correction pairs: wrong word followed by correct word
• unfinished clauses that leave a clipped artifact after cutting
• verbal filler that carries no meaning

Use references/workflow-checklists.md for the detailed cleanup checklist.

3. Render and Verify the Clean Base

Render a cleanup preview before motion work. Then transcribe the rendered preview again, preferably with Alibaba ASR.

Report to the user:

• clean preview path
• original duration vs cleaned duration
• speed multiplier if used
• silence rule used
• examples of removed filler/false starts
• residual scan results
• any phrases that still need human review

Ask for confirmation or permission to revise the cut before moving to motion.

4. Plan HyperFrames Motion

After the clean base is accepted, summarize the video structure in Chinese:

• major sections with timestamps
• what each section is trying to make the viewer understand
• where the screen has empty space
• where the face, subtitles, and important browser content must not be covered

Then propose the motion direction before coding. Include:

• visual style
• overlay logic
• how many overlay groups
• example text style
• subtitle style
• what will stay unanimated
• anti-patterns to avoid

For tutorial/screen-recording videos, prefer 无底 PPT 浮层: floating lecture notes in real empty space, not large cards or full-screen masks.

5. Make Example Pages First

Before full animation, create 2-3 example frames/pages or short HTML mockups. They should show materially different choices, for example:

• lecture-note layout vs flow-arrow layout
• dark text for light screen recordings vs light text for dark editor screens
• dense explanatory points vs simpler high-level callouts

Show these to the user and ask which direction to keep. Do not continue to full production until the user confirms.

6. Build the HyperFrames Composition

Use HyperFrames for the official animated composition. Keep local playback helpers outside the official index.html if they require imperative media control.

Rules:

• Use Chinese overlay text unless the user explicitly wants bilingual output.
• Do not turn overlays into repeated subtitles or keyword spam.
• Use one clear title, one support line, and at most 1-3 short points per overlay group.
• Avoid -webkit-text-stroke on Chinese text. It outlines every stroke and looks dirty.
• Switch text theme when the background changes from light browser pages to dark editor screens.
• Keep subtitles and overlay notes separate: subtitles preserve speech; overlays explain structure.

7. Preview, Render, and Final Check

Run lint/inspect when available, but do not rely on them alone. Use browser preview for interaction and MP4 frame extraction for final truth.

Before final delivery:

1. Render final MP4 with npx hyperframes render --quality high.
2. Run ffprobe to confirm duration, streams, size, frame rate, and resolution.
3. Extract frames from early, middle, and late sections with ffmpeg.
4. Check light-background and dark-background sections.
5. Confirm face, subtitles, and important screen content are not covered.
6. Open/select the final MP4 path for the user.
7. Record the final command, output path, and lessons in the project document.

User-Facing Updates

During the work, keep the user informed with concrete checkpoints:

• after transcript cleanup: "I removed these categories; this is the preview path"
• before motion: "this is the video structure and proposed visual direction"
• before implementation: "these are the example pages; choose one"
• before final export: "this is what will be rendered"
• after export: "this is the final MP4 and these checks passed"

Do not hide uncertainty. If ASR may have missed a phrase or browser seek may be unreliable, say so and verify with a stronger method.