HyperFrames Scene Transition (CSS) — effect skill for transitions

For AI agents: find the right skill in one call — curl -s "https://varg.ai/how-to/api/search?q=<what the person wants>" returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://varg.ai/how-to/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the how-to page.

Overlap two clips or sub-compositions on separate tracks and tween both wrappers at the same time T.

What it does

Built on Fade Through by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.

Crossfade, push, zoom-through, blur, iris or any CSS move between scenes or videos.

When: Every multi-scene HyperFrames video; video clips need opacity plus matching volume envelopes.

Watch out: Fading the outgoing scene out first and then animating the next one in: that is a dip, not a transition. Also don't animate the timed clip element itself.

Timing: Presets: snappy 0.2 s power4.inOut, smooth 0.4 s power2.inOut, gentle 0.6 s sine.inOut

Also called: clip overlap, sub-composition transition, GSAP transition, crossfade clips

In HyperFrames

Video crossfade (0.5 s overlap, sound follows each clip):

<div id="a-visual" class="inner"><video id="a" src="a.mp4" data-start="0" data-duration="3" data-track-index="0" data-has-audio="true"
  data-automation='{"version":1,"lanes":[{"target":"volume","points":[{"t":0,"v":1},{"t":2.5,"v":1},{"t":3,"v":0}]}]}'></video></div>
<div id="b-visual" class="inner"><video id="b" src="b.mp4" data-start="a - 0.5" data-duration="3" data-track-index="1" data-has-audio="true"
  data-automation='{"version":1,"lanes":[{"target":"volume","points":[{"t":0,"v":0},{"t":0.5,"v":1},{"t":3,"v":1}]}]}'></video></div>
<script>
  const tl = gsap.timeline({ paused: true });
  tl.set("#b-visual", { opacity: 0 }, 0)
    .to("#a-visual", { opacity: 0, duration: 0.5 }, 2.5)
    .to("#b-visual", { opacity: 1, duration: 0.5 }, 2.5);
  window.__timelines["main"] = tl;
</script>

For sub-compositions (data-composition-src), extend the outgoing host's data-duration by the overlap, pull the incoming host's data-start earlier by the same amount, put them on alternating tracks, and tween the host wrappers at T (e.g. push: x: -1920 / x: 1920 → 0, power3.inOut). Tracks are editor rows; paint order is CSS z-index.

Ready-made components

Where this comes from

Use when

Not for

Install

Example output

https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.mp4 — Preview of the Blur Transitions component that builds this take (credit: Blur Transitions · hyperframes, https://hyperframes.heygen.com/catalog/blocks/transitions-blur)

More transitions skills

Run the generation on varg

varg is one API key for the models these skills drive — Seedance 2.5, Kling 4, Veo 3.1, Wan 3, Nano Banana 2.1, GPT Image 2.5, ElevenLabs v4 and 200+ more — billed in credits, with a cost estimate before anything runs.