So I'm ready to finally talk about the new feature for WildflowerJS: Kinetic.
Kinetic allows you to create motion video with just wildflowerJS and your Chrome browser (nothing more to install). There are already other motion video libraries out there, so why would you consider Kinetic? Well, off the bat it was designed differently.
- The video is written with just HTML, JS, and CSS.
- View directly in your Chrome browser. Render an MP4 with sound in that same tab. No Node, no FFmpeg, no server, no license, no build, no dependencies.
- Every frame is a function of time, so there's no timeline you need to register. And this also makes everything deterministic.
- You can create motion videos or interactive lessons. And a file could be both: a static video rendered as an MP4, or an interactive with motion video steps that wait for user input.
- You don't have to render. For example, you could add a motion component in a dashboard that reacts to data queried from a server.
-Built for AI agents: a Claude Code skill; a checker that fails on mistakes; error messages written as fixes.
- Many features and effects built in (more to come), so less manual work by you or the AI agent.
- Extra added features like pencil/pen drawing simulation, crachis and subtractive ink gradients, integration with ThreeJs, and more.
- If you provide no design suggestions, it comes with font pair suggestions based on theme/topic, as well as a range of color palettes to produce good-looking results.
- requires HTML in Canvas, currently available with a setting toggle in Chrome, but coming as a feature in 157+. (Currently testing against Chrome beta.)
Check it out at https://kinetic.wildflowerjs.com.
If you're feeling adventurous, you could try a prompt. For example, in Claude Design, you could try:
"Using WildflowerJS and its Kinetic extension (https://kinetic.wildflowerjs.com/llms.txt), make a 20-second animated explainer about why the sky is blue."
If you give it a try, let me know how it turns out!
I'll share more of how to use it in later posts.
KineticKinetic | WildflowerJSMotion graphics in 100% standard HTML, JavaScript, and CSS that can react to data, to sound, and to the viewer. Describe what you need to an AI assistant, and Kinetic's skill has it design the piece the way a studio would: the message first, a considered look, and every frame held long enough to read. Render it to an MP4 in your browser, or ship the same page as an interactive.
commit 07d433a