A sequence of transitions
Four cards follow one another, each joined to the next by a different transition, and the first fades in and the last fades out. The cards are plain HTML, and the transitions need no scene and no script.
<div id="stage" data-composition-id="main" data-start="0" data-duration="6" data-width="1280" data-height="720" data-fps="30">
<div id="one" class="layer card" data-start="0" data-duration="2" data-clip-enter="fade 18f"><h2>Plan</h2></div>
<div id="two" class="layer card" data-start="one - 0.6" data-duration="2" data-clip-transition="push from-bottom"><h2>Build</h2></div>
<div id="three" class="layer card" data-start="two - 0.6" data-duration="2" data-clip-transition="clock"><h2>Ship</h2></div>
<div class="layer card" data-start="three - 0.6" data-duration="1.8" data-clip-transition="zoom" data-clip-exit="fade 18f"><h2>Again</h2></div>
</div>// No scene: the cards and their transitions are all in stage.html.html, body { margin: 0; background: #0a0b10; }
#stage { position: relative; overflow: hidden; background: #07060d; }
.layer { position: absolute; inset: 0; }
.card { display: flex; align-items: center; justify-content: center; color: #fff; }
.card h2 { margin: 0; font: 800 140px system-ui, sans-serif; }
#one { background: #892dbf; }
#two { background: #2d5fbf; }
#three { background: #bf6a2d; }
.card:last-child { background: #1d7a5a; }
[data-composition-id]:not([data-kinetic-ready]) { visibility: hidden; }
A sequence of transitions
Each card starts 0.6 seconds, 18 frames at 30 fps, before the previous one ends, so every overlap starts and ends on a whole frame, and development builds warn about a clip that does not (KN-114).
The data-clip-enter and data-clip-exit lengths are in frames, 18f, to match.
The last card ends with the composition, at 6 seconds.
No demo uses this pattern yet.