Doorway — 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 first shot splits and swings open like double doors as the next shot comes forward

Prompt that renders it frame-exact

Add the "Doorway" transition from GL Transitions (by gre, MIT; https://gl-transitions.com/editor/Doorway, GLSL source https://github.com/gl-transitions/gl-transitions/blob/master/transitions/Doorway.glsl) into a reveal: a new room, the product, the result: 1.2 s, ease-in-out. The incoming shot grows from the gap between the doors. Remotion: npm install gl-transitions @gl-transitions/remotion @remotion/transitions, then a <TransitionSeries.Transition> with presentation={glTransition({ name: "Doorway", params: { reflection: 0.4, perspective: 0.4, depth: 3.0 } })} and timing={linearTiming({ durationInFrames: 36, easing: Easing.inOut(Easing.cubic) })} (36 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.2, 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.4) and depth (3.0) shape the doors, 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