Swap — primitive for transitions (glsl)

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

The two shots slide past each other in 3D, trading places over a reflective floor

Prompt that renders it frame-exact

Add the "Swap" transition from GL Transitions (by gre, MIT; https://gl-transitions.com/editor/Swap, GLSL source https://github.com/gl-transitions/gl-transitions/blob/master/transitions/Swap.glsl) between two options, versions or products being compared: 1 s, ease-in-out. It reads as "this one, or this one". Remotion: npm install gl-transitions @gl-transitions/remotion @remotion/transitions, then a <TransitionSeries.Transition> with presentation={glTransition({ name: "Swap", params: { reflection: 0.4, perspective: 0.2, depth: 3.0 } })} and timing={linearTiming({ durationInFrames: 30, easing: Easing.inOut(Easing.cubic) })} (30 frames at 30 fps). HyperFrames: draw the GLSL on a full-frame WebGL canvas over the cut, with the outgoing and incoming frames as the from/to textures, and compute progress from the composition time, clamp((t − cutStart) / 1, 0, 1) through the easing; never from requestAnimationFrame or a timer, so every frame renders the same. ffmpeg's xfade can't run GLSL. perspective (0.2) and depth (3.0) set how far the cards travel in space, reflection (0.4) the floor mirror. Where the shader draws no image it returns transparent pixels, which encode as black: put a backdrop color or a blurred copy of the frame under the canvas.

Used in

More transitions