skills.rest
AbuBakar125-co
AbuBakar125-coCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

seam-craft

Diagnoses and fixes render-correctness issues at scene-to-scene transition seams in HyperFrames master timelines.

Updated Sep 6, 2026
Search Tags:#rendering#gsap#hyperframes#video transitions#white flash#master timeline#scene seams
One-click install
npx skills add https://github.com/AbuBakar125-co/Resturant_web --skill seam-craft-abubakar125-co
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: seam-craft
Source: https://github.com/AbuBakar125-co/Resturant_web/tree/main/agent/skills/seam-craft
Command: npx skills add https://github.com/AbuBakar125-co/Resturant_web --skill seam-craft-abubakar125-co

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When assembling HyperFrames launch videos, transitions between scenes can render incorrectly — most visibly a white flash at cut or crossfade seams on dark films — because the master timeline lacks the render prerequisites that make overlapping scene wrappers composite correctly. ## Core Features & Use Cases - White-flash guard doctrine: Explains why an opaque #root stage background (var(--canvas-deep, var(--canvas, #000))) is mandatory so opacity dips between wrappers never composite over the renderer's default white page. - Injector mechanics reference: Documents how the injector extends the outgoing wrapper's duration, pulls the incoming wrapper's start earlier, ping-pongs data-track-index between tracks 0/1, and stamps the gsap_template at the overlap-start time. - Template placeholder table: Defines the substitution tokens (__OLD__, __NEW__, __T__, __DUR__, __DX__, __DY__, __ORIGIN_OUT__/__ORIGIN_IN__) used in transition GSAP templates. - Use Case: While assembling index.html for a dark-themed product launch video, a white flash appears at every crossfade seam; load this Skill to verify the stage-ground background and confirm the injector's overlap and track-assignment behavior before debugging individual transitions. ## Quick Start Load this Skill when assembling the master timeline index.html or when a white flash appears at a scene transition seam, and ask it to verify the stage-ground background and injector overlap mechanics.

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 rendered video?▼

A white flash appears when the two scene wrappers' summed opacity drops below 1 during a transition and the #root element has no opaque background, so the renderer's default white page shows through. Fix it by setting #root background to var(--canvas-deep, var(--canvas, #000)).

How do I fix crossfade seams on dark videos in HyperFrames?▼

Ensure the assembled index.html paints an opaque stage ground on #root so the crossfade's opacity dip composites over your dark canvas instead of white. The assemble-index.mjs script emits this automatically; other template consumers must add the same guarantee.

How does the injector overlap two scenes for a transition?▼

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

What placeholders can I use in transition GSAP templates?▼

Templates support __OLD__ and __NEW__ for the outgoing and incoming wrapper selectors, __T__ for overlap-start time, __DUR__ for duration, __DX__/__DY__ for directional travel, and __ORIGIN_OUT__/__ORIGIN_IN__ for squeeze transform origins.

Does this Skill cover individual transition effects like push-slide or zoom-through?▼

No, this Skill covers only the render-correctness doctrine shared by all transitions, such as the stage-ground prerequisite and injector mechanics. The per-transition catalog lives in the separate transition registry.

Are filter and scaleX properties allowed on the master timeline?▼

Yes, filter, scaleX, and transformOrigin are lint-clean on the master timeline because the GSAP lint rule 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.

Related Skills

Explore More Design & Creative Skills→
heygen-comheygen-com
43.5k

seam-craft

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

Official
Intermediate
reason-machinesreason-machines
4

lottiefiles-motion-design-skill

Guides UI animation decisions using timing, easing, choreography, and Disney motion principles.

Official
Intermediate
mofa-orgmofa-org
11

mofa-agent-topology

Generate topology diagrams from Gateway RouteRegistry or coordination graph layouts.

Official
Advanced
deepparserdeepparser

design-hashicorp

Apply HashiCorp's design system tokens, typography, and components when generating UI.

Official
Intermediate