seam-craft

Diagnose and fix white-flash render defects at scene-to-scene transitions in HyperFrames videos.

43.5k|4.2k|Updated Mar 10, 2026
One-click install
npx skills add https://github.com/heygen-com/hyperframes --skill seam-craft
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: seam-craft
Source: https://github.com/heygen-com/hyperframes/tree/main/.agents/skills/seam-craft
Command: npx skills add https://github.com/heygen-com/hyperframes --skill seam-craft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

When assembling multi-scene HyperFrames videos, transitions like crossfades and zoom-throughs can briefly drop the combined opacity of overlapping scene wrappers below 1, causing a glaring white flash at every seam on dark films. This Skill provides the render-correctness doctrine that makes scene-to-scene transitions composite correctly on the master timeline.

Core Features & Use Cases

  • White-Flash Guard: Explains the opaque stage-ground prerequisite — painting #root with an opaque background so opacity dips never reveal the renderer's default white page.
  • Injector Mechanics: Documents how the transition injector extends wrapper durations, overlaps scenes, ping-pongs track indexes, and stamps GSAP templates onto the master timeline.
  • Template Placeholders: Defines the substitution tokens (__OLD__, __NEW__, __T__, __DUR__, __DX__, __DY__) used in transition GSAP templates.
  • Use Case: While assembling a launch video's index.html, you notice a white flash at a crossfade seam on a dark film; load this Skill to verify the stage-ground background and confirm the injector's overlap and track-assignment behavior.

Quick Start

Use the seam-craft skill to diagnose why a white flash appears at the crossfade seam in my assembled HyperFrames index.html.

Frequently Asked Questions about seam-craft

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does a white flash appear at transition seams in my HyperFrames video?

The white flash happens when two overlapping scene wrappers' summed opacity drops below 1 during a transition and the #root element has no opaque background. The renderer's default white page shows through the dip. Fix it by painting the stage: `#root { background: var(--canvas-deep, var(--canvas, #000)) }`.

How do scene-to-scene transitions work on the HyperFrames master timeline?

The injector extends the outgoing wrapper's data-duration to hold its final frame, pulls the incoming wrapper's data-start earlier to create an overlap window, reassigns clip data-track-index as a 0/1 ping-pong so wrappers never share a track, and stamps the GSAP template into the main timeline at the overlap start.

What transition types does this render doctrine cover?

It governs Tier-B-ready transitions: pure transform, opacity, and filter animations on the two scene clip wrappers with no injected overlay DOM. Overlay families like staggered blocks, blinds, light leak, grid dissolve, page burn, and shader transitions are deferred to later phases.

Does this skill contain the catalog of individual transitions?

No. This skill is the render-correctness doctrine underneath all transitions, covering stage-ground prerequisites and injector mechanics. The per-transition catalog with entries like crossfade, push-slide, zoom-through, and cut-the-curve lives in the separate transition registry.

Are filter and transformOrigin animations lint-clean on the master timeline?

Yes. The GSAP lint rule has no per-property whitelist and scopes checks to data-composition-id ranges. The x/y/scale/rotation/opacity whitelist is only a scene-worker prompt rule and does not bind index.html, so filter, scaleX, and transformOrigin are allowed on the master timeline.