Single-file HTML animation studio

Write it.
Watch it move.

Paste a paragraph, pick a look, and Kinemotif turns every sentence into an animated scene — drawing its own artwork, morphing scene to scene, and synthesising a soundtrack as it plays. Everything ships as one HTML file.

No build step. No video export. No network calls. 95 KB, and it runs offline.

A Kinemotif scene: The sun warms the sea, neon style

Three steps, no timeline to learn

Most motion tools ask you to place keyframes. Kinemotif asks you to write a sentence and then lets you adjust what it did.

1

Pick a look

Six complete art styles — pixel arcade, stick figure, neon night, paper cut, cosmic dream, VHS retro. Each one changes the palette, the type, the background and how shapes are painted.

2

Give it a story

Paste anything. Sentences become scenes, each with a title pulled from its first clause and a picture matched to its keywords. Or start blank and write the slides yourself.

3

Play and export

Scrub the timeline, retime a scene, change its entrance or camera. When it feels right, export a single HTML file that plays full-screen on its own.

Made with Kinemotif

Four stories, four styles, four exported shows. Open any of them — each one is a single file with its own soundtrack.

What is actually inside

Everything is generated at runtime from about 2,400 lines of JavaScript and Canvas 2D. There are no images, fonts or audio files in the repository.

◈

Shapes that really morph

Every motif is a closed polygon resampled to the same point count, so a wave flows into a cloud into a rocket. Not a crossfade — actual geometry interpolation.

♪

A soundtrack, synthesised live

Pad, bass, arpeggio, drums and reverb built from oscillators. Seven moods, each with its own tempo, scale and chord progression. Never the same twice.

✍

Story to storyboard

Sentence splitting, title extraction and a keyword map of 14 motifs. The result is editable — every field is a normal form input, not a black box.

⚙

Ten entrances, eight curves

Rise, zoom, slide, drop, flip, blur, pop and more, each paired with an easing curve from linear to elastic and spring, plus a per-scene camera move.

⤓

Export, reopen, continue

Export a standalone HTML show, save a project as JSON, or reopen an exported show to keep editing it. Undo and redo run across everything.

◐

Offline and private

No CDN, no fonts, no analytics, no server. Your story never leaves the browser — it lives in localStorage until you export it.

Six styles, one click apart

Switch the look at any point — the whole show re-renders in the new style without losing a word.

Pixel Arcade
Stick Figure
Neon Night
Paper Cut
Cosmic Dream
VHS Retro

Documentation

Short, and written for someone who just wants to make the thing.

Need an actual video file?

Kinemotif exports HTML shows. Kinemorph is the heavy sibling — PixiJS, TypeScript and frame-exact MP4 export.

See Kinemorph →

Your next update could move.

Paste the changelog, the launch note, the lesson plan. It takes about a minute.

Open the studio →