With an AI assistant

An assistant such as Claude Code can write a Kinetic page from a brief, and you look at, check and render the page it writes.

What the assistant reads

Kinetic ships a skill for Claude Code, a folder of rules, names, patterns and scripts (The skill for Claude Code). Download the skill, or copy skills/wildflower-kinetic from the @wildflowerjs/kinetic package, into the project's .claude/skills/ folder, or into ~/.claude/skills/ for every project. Claude Code picks it up at the start of the next session and uses it for any brief that asks for a video.

Any assistant that can read a web page can work from https://kinetic.wildflowerjs.com/llms.txt, the condensed reference, which links the framework's own. In Claude Code, add this line to the CLAUDE.md in the project folder, and it reads the file at the start of every session.

Read https://kinetic.wildflowerjs.com/llms.txt before writing Kinetic code.

The brief

A brief is the message that asks for the video, and it holds the following.

• The length in seconds.
• The size, 1280 by 720 or 1920 by 1080 pixels.
• The frame rate. Without one, the page runs at 30 frames a second.
• What the video is for, such as a product launch, a talk, or a showreel.
• The mood and the palette, in words or as hex colors.
• The text, word for word.
• Any data file or voice track, by file name.
• Whether it is one video or many, and for many, the file of rows and which values change from video to video.

A brief that says nothing about the look gets the skill's default style: ink on warm paper, Work Sans, one lavender accent, a light grain, and the same layout for every lesson. Any style in the brief wins over it, so a brief that names a palette, a ground, a font or a mood gets that, and the default fills in only what the brief leaves out.

The showreel demo began as this brief.

make a dynamic 20-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a resume. go all out.

These two cover more of the list.

make a 6 second launch title for Meadow, a note-taking app. 1280 by 720, 30 fps.
dark background, purple accent, white text.
the word MEADOW rises in letter by letter, then a line under it types itself: "Notes that grow with you."

make a 12 second bar chart race from sales.csv. 1920 by 1080, 30 fps.
the columns are product, year and units. one bar per product, racing from the earliest year to the latest.
a dark background and one colour per product. the title is "Units sold by product".

What comes back

The assistant writes an HTML page, a script file, and a data folder when the video reads data. The HTML loads the framework, Kinetic with data-preview on its tag for the preview bar, and the page's own script, from a CDN, so nothing is installed to look at the page.

Made from a prompt shows four pages an assistant wrote this way, each from one prompt, with the prompt beside the result.

Looking at it

Ask the assistant to start a local server in the project folder and give you the address, then open it in Chrome.

Stop on the moment that looks wrong and read its time and frame off the preview bar. Say what is wrong in plain words, with the time or the frame when the problem is at one moment. These requests worked on the showreel.

• "the scenes after the spheres go too quickly, slow them down"
• "replace the black with the darker purple"
• "make the last morph the shape of the logo"
• "the ball bounces before it hits the floor"

The fix for the last request put each landing on a whole frame, a rule llms.txt gives the assistant (A landing on a whole frame).

Checking it

Ask the assistant to run await wildflower.kinetic.check() in the page and report the result. If it cannot reach the browser, paste the line into the console (Cmd-Option-J on a Mac, Ctrl-Shift-J on Windows) and paste the result back.

{ ok: true, frames: 180, samples: 30, ready: 'true', errors: 0 }
{ ok: false, reason: 'a seek threw', frames: 180, samples: 30, ready: 'true', errors: 60, firstError: "[WildflowerJS] Error in computed property 'bar': ..." }
{ ok: false, frame: 41, time: 1.3667, element: 'ol > li:nth-child(3)', property: 'style', first: 'width: 212px;', second: 'width: 230px;', ready: 'true', errors: 0 }

Paste the whole result to the assistant, and see check() for what each field means.

Copy console lines that start with [KN into the chat as they are, with the Suggestion line under them (error codes).

Rendering it

The Render button makes an MP4 in Chrome and downloads it, with the sound of the page's audio clips (Audio).

Until Chrome 157 the button needs HTML-in-Canvas: paste chrome://flags/#canvas-draw-element into Chrome's address bar, set the entry to Enabled, and restart Chrome. The page has to be served over https, from localhost, or opened from disk (What a render needs). When a requirement is missing, the bar says which for ten seconds, and the full message is in the console.

For many videos from one page, the assistant runs the batch script in the project folder, which renders the page once for each row of a file (Rendering the batch).

Data, voice and many videos

A chart reads a data file, and the brief gives the file name and what each column holds (sales chart demo). For captions, the brief gives the voice track, and the assistant makes a transcript with every word's start and end time, from a transcription tool or an SRT file (captions demo).

In a brief, each of the three is one line.

the chart reads sales.csv: product, year, units.
the captions follow the voice track in talk.mp3, four words at a time.
make one title video for each row of people.csv, with the name and the accent colour from the row.