One scene, several clips

Three name cards follow one another, each with its own name, role and color, all from one scene. A registered scene runs on every element whose data-component is its name, and each clip counts its own local from its own data-start.

<div id="stage" data-composition-id="main"     data-start="0" data-duration="6" data-width="1280" data-height="720" data-fps="30">
    <div class="card" data-component="name-card" data-start="0" data-duration="2" data-prop-role="'Director'" data-prop-color="'#892dbf'">
        <div data-bind-style="slide"><h2>Ada Lovelace</h2><p data-bind="role"></p></div>
    </div>
    <div class="card" data-component="name-card" data-start="2" data-duration="2" data-prop-role="'Engineer'" data-prop-color="'#2d5fbf'">
        <div data-bind-style="slide"><h2>Grace Hopper</h2><p data-bind="role"></p></div>
    </div>
    <div class="card" data-component="name-card" data-start="4" data-duration="2" data-prop-role="'Mathematician'" data-prop-color="'#bf6a2d'">
        <div data-bind-style="slide"><h2>Katherine Johnson</h2><p data-bind="role"></p></div>
    </div>
</div>
                

const { scene, typewriter } = wildflower.kinetic;

scene('name-card', {
    props: {
        role: { type: String, default: '' },
        color: { type: String, default: '#0b0f1a' },
    },
    edges: { enter: 0.4, exit: 0.4 },
    root: { style: { background: 'background', opacity: 'presence' } },
    keyframes: {
        slide: { translateX: { at: [0, 0.5], to: [-40, 0], ease: 'power3.out' } },
    },
    computed: {
        background() { return this.props.color; },
        role() { return typewriter(this.local - 0.3, this.props.role, 24); },
    },
});
                

html, body { margin: 0; background: #0a0b10; }

#stage { position: relative; overflow: hidden; background: #0b0f1a; }

.card { position: absolute; left: 80px; bottom: 80px; padding: 18px 28px; color: #fff; }

.card h2 { margin: 0; font: 700 48px system-ui, sans-serif; }

.card p { margin: 6px 0 0; min-height: 1.2em; font: 400 26px system-ui, sans-serif; }

[data-composition-id]:not([data-kinetic-ready]) { visibility: hidden; }
                

Text that the scene only animates goes in each clip's markup, as the names do here.
A value the scene computes from is a prop on the clip element, data-prop-role="'Director'", which the scene declares in props and a computed reads as this.props.role (a binding reads props.role). Text is always quoted, one word or many, as 'Director' and '#892dbf' are, since a bare word names a value; a number, true and false go bare (Props).
A color for each clip goes on the scene's root through root: { style: { background: 'background' } }, from a computed that reads this.props.color, and presence fades each card on the same root.

inputs are composition-wide, so every clip of a scene reads the same values. For values that change from clip to clip, each clip takes its own props, as this pattern does.

No demo uses this pattern yet.

One scene, several clips

More in Scenes and transitions