WildflowerJS Logo WildflowerJS

Cuts on whole frames

The screen cuts between five words, TYPE, SHAPE, TIME, SPACE and COLOR, in changing colors, and each card stays up for fewer frames than the one before. A table of cuts with at in frames makes every card last a whole number of frames, the rule A landing on a whole frame applies to motion.

<div id="stage" data-composition-id="main"     data-start="0" data-duration="2" data-width="1280" data-height="720" data-fps="30">
    <div class="layer" data-component="cuts" data-start="0" data-duration="2">
        <div class="layer" style="display: flex; align-items: center; justify-content: center" data-bind-style="card">
            <h2 data-bind="word" data-bind-style="wordStyle"></h2>
        </div>
    </div>
</div>
const { scene, interpolate, styleAt, moment } = wildflower.kinetic;

const CUTS = [
    { at: 0,  word: 'TYPE',  bg: '#0c0c10', fg: '#f2eee6' },
    { at: 14, word: 'SHAPE', bg: '#892dbf', fg: '#f2eee6' },
    { at: 27, word: 'TIME',  bg: '#0c0c10', fg: '#aa3de6' },
    { at: 39, word: 'SPACE', bg: '#aa3de6', fg: '#0c0c10' },
    { at: 50, word: 'COLOR', bg: '#0c0c10', fg: '#f2eee6' },
];

scene('cuts', {
    computed: {
        // The cut on screen at this frame of the clip: the at values are frames, so since is too.
        now() { return moment(this.clipFrame, CUTS); },
        card() { const c = this.now.row; return { background: c.bg, color: c.fg }; },
        word() { return this.now.row.word; },
        wordStyle() {
            const scale = interpolate(this.now.since / this.fps, [0, 0.25], [1.14, 1], { ease: 'power3.out' });
            return styleAt(this.local, { scale });
        },
    },
});
html, body { margin: 0; background: #0a0b10; }

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

.layer { position: absolute; inset: 0; }

h2 { margin: 0; font: 800 160px system-ui, sans-serif; }

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

moment(this.clipFrame, CUTS) takes the frame number within the clip and finds the last cut whose at is at or before it, so each comparison is between two whole numbers. Here the cards shorten from 14 frames to 10, and since, the frames since the cut started, divided by this.fps, drives each card's own motion in seconds.

Another scene can read the same table, as the showreel's overlay does to take each cut's color.

The rhythm scene of the Showreel demo cuts between its words this way.

These patterns time landings and cuts to whole frames, bake a simulation at load, push a camera over layers of flat HTML, and move a three.js camera through a formation of beads with Trillium, morph the formation and render it through a depth-of-field pass.

  • A landing on a whole frame: A ball hangs in the air, drops to a line on the floor, and bounces twice more, each bounce shorter, squashing flat on every landing.
  • A simulation baked at load: Three balls drop and bounce, each losing a different share of its speed on every landing.
  • A camera push over layers: A title stands among three ridges of hills at different depths, and the camera pushes in and drifts right across them, as if held by hand.
  • A camera push and a fly-through: A sphere of 600 purple beads bursts outward from its center as the camera pushes in, and at the end the beads fly out past the camera.
  • Morphing a formation: The sphere of beads turns into a doughnut shape, starting at the top and rippling down, while the beads brighten from dark to bright purple.
  • Depth of field in 3D: A field of 600 purple beads fills the depth of the frame, and the focus moves through them from the back to the front like a camera's focus pull, with a blur computed for each pixel from its depth.