Communitygithub.com

Drama2557/4RealDigital-Video-Studio

場景間無縫過渡的渲染正確性原則——確保 HyperFrames 發布影片中場景切換在主時間軸上正確合成的必要條件。

4RealDigital-Video-Studio 是什麼?

這份技能文檔定義了 PLV 場景間過渡的「渲染正確性原則」,涵蓋了主時間軸組合的機械細節,確保任何特定過渡(如交叉淡入淡出、推拉滑動等)都能正確合成,而不依賴於具體選擇哪種過渡效果。它主要解決了白色閃爍問題:當兩個場景包裝器的總透明度小於 1 時,背景的白色會穿透顯示,形成刺眼的白色閃爍。解決方案是為 `#root` 設置不透明背景色。文檔還說明了注入器如何通過延長前一場景的持續時間、提前後一場景的開始時間、並通過乒乓分配軌道索引來避免同一軌道重疊,從而創建過渡重疊窗口。最後,它列出了模板中使用的令牌及其含義,所有這些都符合 lint 清潔規則,且不與場景工作者的屬性白名單衝突。該技能適用於需要處理 HyperFrames 影片主時間軸組裝的開發者,特別是在遇到過渡處白色閃爍或透明度異常時。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Drama2557/4RealDigital-Video-Studio/tree/HEAD/.agents/skills/seam-craft

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

場景拼接 — 場景間過渡的渲染前提條件

這是 PLV 場景間拼接的渲染正確性原則:確保任何過渡都能正確合成的先決條件與主時間軸機械原理,與具體選擇哪種過渡無關。每個過渡的目錄(交叉淡入淡出、推拉滑動、縮放穿越、曲線剪輯……)存放在過渡註冊表中——本頁是位於所有過渡之下的基本原則。

本原則管轄的過渡已達到 Tier-B 準備就緒:僅對兩個場景的剪輯包裝器(#el-<sid>)進行 transform / opacity / filter 操作,無需注入額外 DOM 元素,無需場景間協作。覆蓋類(交錯區塊、百葉窗、漏光、網格溶解、頁面燃燒)和著色器過渡延至後續階段處理。

舞台背景前提條件(白色閃爍防護)

多個模板會打開一個窗口,在此窗口中兩個包裝器的總透明度 < 1(曲線剪輯的中間裁剪窗口、縮放穿越的 0.15 下限、普通交叉淡入淡出的冪曲線下降)。包裝器背後的任何內容都會在該窗口期間顯示出來。如果已組合的 index.html 中 #root 沒有不透明背景,渲染器會將透明度下降區域合成到其默認的白色頁面上 → 每個拼接處都會出現白色閃爍,在暗色影片中尤為刺眼(在修復前的兩次 Spotify 運行中觀察到)。組裝器必須為舞台著色: #root { background: var(--canvas-deep, var(--canvas, #000)) } — assemble-index.mjs 現在已發出此設定;這些模板的任何其他使用者都承擔相同的保證。

注入器如何應用過渡

在場景 i(from)和場景 i+1(to)之間的 break 邊界處,注入器執行以下操作:

  1. 將 #el-<from> 包裝器的 data-duration 延長 duration_s(保持其最後一幀 — 已驗證:core/src/runtime/init.ts:1393-1410 external-slot 分支)。
  2. 將 #el-<to> 包裝器的 data-start 提前 duration_s(創建重疊窗口)。
  3. 將所有剪輯的 data-track-index 重新分配為 0/1 的乒乓模式,使兩個重疊的包裝器永遠不會共享同一條軌道(同一軌道重疊是不允許的 — core/src/lint/rules/composition.ts)。較高軌道合成在上方。
  4. 在 T = overlap-start 時間點將 gsap_template 蓋印到 window.__timelines["main"] 中。

已由原型渲染驗證(2026-05-31):主時間軸的包裝器補間動畫被定位並渲染(不會與子合成的暫停時間軸產生雙重定位——運行時獨立驅動它們),延長的包裝器保持場景 i 的最後一幀,且較高軌道的進入包裝器合成在 + 混合在退出包裝器之上。

模板佔位符

注入器會替換每個 gsap_template 行中的以下令牌:

Token含義
__OLD__"#el-<from>" — 退出剪輯包裝器選擇器(帶引號)
__NEW__"#el-<to>" — 進入剪輯包裝器選擇器(帶引號)
__T__重疊開始時間(秒,主時鐘)
__DUR__此邊界的 duration_s
__DX__方向類型的水平移動:-1920(向左) / 1920(向右)
__DY__垂直移動:-1080(向上) / 1080(向下)
__ORIGIN_OUT__ / __ORIGIN_IN__squeeze 過渡的 transformOrigin 對

filter / scaleX / transformOrigin 在主時間軸上保持 lint 清潔(已驗證:core/src/lint/rules/gsap.ts 沒有按屬性列出的白名單,並將檢查範圍限定在 data-composition-id 區間內;x/y/scale/rotation/opacity 白名單僅是場景工作者的提示規則 — 它不綁定 index.html)。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

Drama2557/4RealDigital-Video-Studio

Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a talking-head or launch video, when deciding whether a phrase should be dropped, ride the verbatim rail, or be promoted to a scarce embedded climax, when laying out a composition that will carry captions (do NOT reserve a keep-out band), or when centering a composition on the true frame center under captions. Quotes the rail+embed model from embedded-captions and constraint #13 (captions overlay, keep-out band retired) from the product-launch-video scene agent. Applies ON TOP of embedded-captions.

Drama2557/4RealDigital-Video-Studio

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

Drama2557/4RealDigital-Video-Studio

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

Drama2557/4RealDigital-Video-Studio

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet `anchor` rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.

Drama2557/4RealDigital-Video-Studio

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

Drama2557/4RealDigital-Video-Studio

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated motion-first unit, including an animated title. Route fresh creation through hyperframes before using this skill.

Drama2557/4RealDigital-Video-Studio

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.

Drama2557/4RealDigital-Video-Studio

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.

Drama2557/4RealDigital-Video-Studio

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

Drama2557/4RealDigital-Video-Studio

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

Drama2557/4RealDigital-Video-Studio

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

Drama2557/4RealDigital-Video-Studio

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

Drama2557/4RealDigital-Video-Studio

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

Drama2557/4RealDigital-Video-Studio

Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR topic explainer (/faceless-explainer). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on "graphic overlays", "on-screen graphics", "package / dress up my video". Not plain subtitles (/embedded-captions). Unclear → /hyperframes.

Drama2557/4RealDigital-Video-Studio

Agent skill / project related to launch or product demo video: Drama2557/4RealDigital-Video-Studio

相關技能