First video

Your first video is a six-second title card, where the word WILDFLOWER rises one letter at a time and a subtitle types itself underneath. The stage shows the page after each step, and where a step changes code you already have, its new lines are marked.

Kinetic is a WildflowerJS extension that makes a video from a web page. You write what the page shows at second t, and the renderer photographs the page thirty times a second. It installs as @wildflowerjs/kinetic and needs WildflowerJS 1.5.5 or later.

You need Chrome. The render draws the page's HTML into the video with HTML-in-Canvas (Chrome's article on the API), which until Chrome 157 is a setting: paste chrome://flags/#canvas-draw-element into Chrome's address bar, set the entry it opens at, HTML-in-Canvas, to Enabled, and restart Chrome. Chrome 157, scheduled for 3 November 2026, turns it on. The page you build here has no files beside it, so it opens from your disk. A page with an image, a sound or a data file beside it needs a web server (Preview, check and render).

The page

Start with an HTML file that loads three scripts and holds one element, the composition, which is the video.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Launch</title>
    <script defer src="https://cdn.jsdelivr.net/npm/wildflowerjs@^1.5.5/dist/wildflower.lite.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/@wildflowerjs/kinetic@0.1/dist/kinetic.wf.js" data-preview></script>
    <script defer src="scenes.js"></script>
    <style>
        html, body { margin: 0; }
        [data-composition-id] {
            position: relative;
            overflow: hidden;
            background: #0b0f1a;
            color: #fff;
            font-family: system-ui, sans-serif;
        }
        [data-composition-id]:not([data-kinetic-ready]) { visibility: hidden; }
    </style>
</head>
<body>
    <div data-composition-id="main" data-start="0" data-duration="6"
         data-width="1280" data-height="720" data-fps="30">
    </div>
</body>
</html>

The composition's attributes make the video six seconds long, 1280 by 720 pixels, at 30 frames a second. The stage is blank because the composition is still empty.

A title card

Add a clip to the composition, a card whose heading fades in and rises into place, and give the card two CSS rules.

<div data-composition-id="main" data-start="0" data-duration="6"
     data-width="1280" data-height="720" data-fps="30">
    <div class="card" data-component="title-card" data-start="0.4" data-duration="5">
        <h1 data-bind-style="heading">Launch</h1>
    </div>
</div>

.card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card h1 { margin: 0; font-size: 136px; }

The heading's motion is a scene in scenes.js.

const { scene } = wildflower.kinetic;

scene('title-card', {
    keyframes: {
        heading: {
            opacity:    { at: [0, 0.5], to: [0, 1] },
            translateY: { at: [0, 0.6], to: [40, 0], ease: 'spring' }
        }
    }
});

A scene is a component whose values are functions of the time. keyframes turns heading into a style object, and data-bind-style="heading" puts it on the heading. The card is shown from 0.4 seconds for 5 seconds, and the times in at count from the card's start.

The subtitle types itself

Add a paragraph under the heading that types a sentence, starting one second into the clip.

<div class="card" data-component="title-card" data-start="0.4" data-duration="5">
    <h1 data-bind-style="heading">Launch</h1>
    <p class="sub" data-bind="typed"></p>
</div>

.sub { margin: 28px 0 0; font-size: 34px; min-height: 1.3em; }

const { scene, typewriter } = wildflower.kinetic;

scene('title-card', {
    keyframes: {
        heading: {
            opacity:    { at: [0, 0.5], to: [0, 1] },
            translateY: { at: [0, 0.6], to: [40, 0], ease: 'spring' }
        }
    },
    computed: {
        typed() { return typewriter(this.local - 1, 'Every frame is a function of time.', 28); }
    }
});

typed is a computed, a value worked out again whenever what it reads changes. It reads this.local, so it changes on every frame, and data-bind="typed" shows it as the paragraph's text.

Letters one by one

Turn the heading into a list of letters, so each letter rises on its own, 0.06 seconds after the one before. The letters computed takes the place of the heading track.

<div class="card" data-component="title-card" data-start="0.4" data-duration="5">
    <h1 data-list="letters" data-key="key">
        <template><span class="ch" data-bind="text" data-bind-style="style"></span></template>
    </h1>
    <p class="sub" data-bind="typed"></p>
</div>

.ch { display: inline-block; white-space: pre; }

const { scene, split, styleAt, stagger, typewriter } = wildflower.kinetic;

const RISE = {
    opacity:    { at: [0, 0.35], to: [0, 1] },
    translateY: { at: [0, 0.6], to: [48, 0], ease: 'spring' },
    scale:      { at: [0, 0.6], to: [0.9, 1], ease: 'power2.out' }
};

scene('title-card', {
    computed: {
        letters() {
            const rows = split('WILDFLOWER');
            return rows.map((r) => ({
                key: r.key,
                text: r.text,
                style: r.space ? {} : styleAt(this.local - 0.2 - stagger(r.i, rows.length, { each: 0.06 }), RISE)
            }));
        },
        typed() { return typewriter(this.local - 1, 'Every frame is a function of time.', 28); }
    }
});

split() returns a row for each letter. styleAt(t, tracks) evaluates the same tracks that keyframes takes, at time t, and returns a style object for that moment, so each row carries its own letter's style. stagger(i, n, { each: 0.06 }) is letter i's delay, 0.06 seconds for each letter before it, and subtracting it from the time starts each letter that much later.

Preview, check and render

Open the page in Chrome, from your disk or a server. The bar at the bottom comes from data-preview, and the stage has the same bar. Drag its scrubber back and forth, and the heading is in the same place at the same time on every pass.

Check sets the time to a sample of frames in two orders and reports the first frame that came out different. Render writes the MP4 in the browser and downloads it as main.mp4, with the HTML-in-Canvas setting from the top of this page. A page can call both.

A render can ask for any frame in any order, so a frame has to depend on its time alone. Read the time from the scene, never the clock or Math.random(). Start no timers and use no CSS transitions in a seek. Format numbers with format(). The development build warns the first time it sees any of these, and Check reports the first frame that differs.

const report = await wildflower.kinetic.check({ samples: 30 });
// { ok: true, frames: 180, samples: 30, ready: 'true', errors: 0 }

const { blob, frames, ms } = await wildflower.kinetic.render({ fps: 30 });