Cube — 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.

Both shots sit on the faces of a 3D cube that turns over a glossy floor reflection

Prompt that renders it frame-exact

Add the "Cube" transition from GL Transitions (by gre, MIT; https://gl-transitions.com/editor/Cube, GLSL source https://github.com/gl-transitions/gl-transitions/blob/master/transitions/Cube.glsl) between two slides of a product carousel or a before/after: 1 s, ease-in-out. The camera pulls back as the cube turns, then pushes in on the new face. Remotion: npm install gl-transitions @gl-transitions/remotion @remotion/transitions, then a <TransitionSeries.Transition> with presentation={glTransition({ name: "Cube", params: { persp: 0.7, unzoom: 0.3, reflection: 0.4, floating: 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. persp (0.7) is the perspective, unzoom (0.3) how far the camera backs off, reflection (0.4) the floor mirror and floating (3.0) its gap. 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