ultramotion

Original：🇺🇸 English

Translated

63 scripts

Makes finished motion-graphics VIDEOS (mp4 with music and sound) from a prompt, rendered from code in a browser: 65 templates, single effects (a neon sign switching on, glitch and datamosh transitions, rolling numbers, karaoke wipes) and the engines behind them. Neon signs, glitch titles and posters, pixel art, karaoke and lyric videos, paper cut-outs and pop-ups, fluid (ink in water, marbling, light in water, milk pouring), light particles, liquid glass, kinetic typography, bar chart races and data animation, event replays on 3D maps, infographics, film title sequences, Van Gogh, Monet and Leonardo paintings that move, Chinese ink wash, whiteboard and chalkboard explainers, flat narrated explainers, variety-show captions on your own footage. Use it for any 动效 / 片头 / 视频 / animation / motion graphics / explainer / lyric video / logo reveal / social video request — 霓虹故障像素卡拉OK 歌词剪纸流体粒子液态玻璃动感排版数据动画信息图水墨油画手绘综艺花字.

1installs

Sourcesunsiyuan/ultramotion

Added on2026-10-21

NPX Install

npx skill4agent add sunsiyuan/ultramotion ultramotion

SKILL.md Content

View Translation Comparison →

ultramotion

A finished video from a prompt: the picture is a web page drawn as a pure function of time,

render.py

turns it into an mp4, and

sound.py

writes the music and the sounds. Below,

$SKILL

is this folder (where this file is).

```
effects/
```
— single effects, one shot each (a neon sign switching on, a datamosh cut, a rolling number, a karaoke wipe): a short page per effect, indexed in
```
effects/README.md
```
by engine.
```
templates/
```
— 65 templates, each a folder with
```
TEMPLATE.md
```
and the pages to start from. The index is
```
templates/README.md
```
, grouped by what people make (signs and posters, lyrics and music, data and news, titles and intros, product and brand, art in motion, greetings, explainers).
```
lib/<engine>/
```
— the engines the templates are built on, each with a
```
GUIDE.md
```
: what it does, how things move in it, its API, its sound, and what to check.
```
render.py
```
— page → mp4, contact sheets, sound only, loop seams, footage frames. The usage is at the top of the file.
```
sound.py
```
— sampled instruments, ready arrangements and the sounds of the picture; the full list is at the top of the file.

Working

Read the request for who it is for, where it will play, and what it has to say. Write the content for that place and audience.
A template fits (look through
```
templates/README.md
```
): read its
```
TEMPLATE.md
```
, copy the starting page that matches the user's language and the media it loads into the project, copy the engine files its
```
<script>
```
tags load from
```
lib/
```
next to it and point the tags at the copies. Make it fit the user's content: keep what serves it, change the rest — the camera, the motion, the pacing and the music follow what is in their content and what happens in it.
They want one effect — a shot, a transition, a reveal to put on their own words, logo or footage (look through
```
effects/README.md
```
): copy that effect's page and what it loads the same way, keep how it moves, its timing and its sound, and put their content in. Inside a longer piece, build the effect into it the way its page does.
Nothing fits: pick the engine (or engines) for the picture the content wants, read their
```
GUIDE.md
```
, look at the templates built on them for how ideas are carried out, then make your own piece — not a variation of the nearest template.

python3 $SKILL/render.py page.html --preview --at 1,4,8,12

→

preview.png

; look at it, open a frame at full size (

--full

), fix, look again.

```
python3 $SKILL/render.py page.html --out video.mp4
```
, then watch a contact sheet of the mp4 and listen to it before calling it done.

Needs ffmpeg, Python with

playwright

,

Pillow

,

numpy

,

scipy

,

soundfile

, and Playwright's Chromium or an installed Google Chrome; music on sampled instruments needs fluidsynth (

brew install fluid-synth

/

apt install fluidsynth

; the soundfont downloads itself on first use). Engines that need more say so in their GUIDE.md. If you're in a sandbox and the browser won't start, ask for permission to run it outside the sandbox; don't re-implement the page in another language to get around it.

Engines

`lib/…`	what it draws
`neon-sign`	real neon tubes switching on, on a wall, the user's photo or footage, through a wet window
`glitch`	a picture broken by one WebGL pass: splits, tears, compression blocks, datamosh, CRT off
`pixel`	low-resolution pixel art blown up with hard edges, people posed by their joints in 16-bit shading, photos turned to pixels, chiptune ( `chip.py` )
`karaoke`	lyrics timed to a recording word by word ( `lyrics.py` ), the next line always on screen, any number of singers
`paper`	cut paper in layers with real shadows: folds, pop-ups, cut-paper titles, vellum, one light and a 3D camera
`mesh-gradient`	real fluid on the GPU ( `fluid.js` : ink, paint, light, marbling, satin) and soft colour fields that loop ( `mesh.js` )
`light-particles`	up to 1.6M glowing particles gathering into products, models, towns and titles
`liquid-glass`	Apple-style glass that pops, stretches, merges and bends text ( `scene.html` with cuts)
`kinetic-type`	heavy type slamming in on the beat, colour-block cuts ( `scene.html` with cuts)
`data-story`	years of real data played as time: lines, columns, ranking races, rolling numbers
`event-replay`	a moment replayed from data: a stretching clock, maps on real relief ( `relief.py` ), unit grids
`infographic`	one crowd of units re-formed for every question: blocks, piles, waffles, rings
`title-sequence`	slow film titles over fog, light, dusk and footage, letter-spacing reveals, vertical Chinese
`painterly`	oil-paint strokes that follow the form, the painting moving, the camera walking in
`ink-wash`	Chinese ink spreading on rice paper, scenes dissolving through the ink, a carved seal
`whiteboard`	writing and drawing stroke by stroke on a whiteboard, notebook or chalkboard, real Chinese stroke order
`flat-explainer`	narrated flat animation timed to every word of the voice-over ( `story.py` )
`variety-captions`	variety-show pop words, bursts and sound effects on the user's own talking-head footage ( `vc.py` )
`social-post`	a post on X drawn as the app shows it, fetched with its replies, as the hook for the data that checks it
`news-collage`	a news story as a collage: clippings, prints and real document pages on a board, highlighted, circled, stamped and strung together as the camera reads
`ui-demo`	a real app or site being used in a phone or a browser window: captured screens ( `capture.py` ), a cursor or finger clicking, typing, dragging, scrolling, the camera pushing in and following, callouts

Judgment

The content decides. What is being said, to whom, where it plays; the look follows. A shop sign says what that shop would put up; a data piece answers one question and its title is the answer.
What moves is what would move in this content. Ask what happens in the next seconds of this picture or story, and let each thing do that: people caught in a downpour run for cover, a wave heaves up and curls over, a portrait holds still while the world behind it changes. A motion that belongs to another example is wrong here even when it is well made.
Judge the result, not the route. An image model, a photo, the user's footage, drawing in code — any of them is fine when the frame meets the standard: it reads at a glance, it is finished (nothing pasted on, no holes or blank shapes where something moved away, no seams, no flicker, no stand-in drawing), and it holds up next to the starting page at full size.
Every frame is a pure function of t. No state carried between frames;
```
seek(t)
```
can jump anywhere.
Real things stay real. Data from a named source, computed on the page, the source on screen; the user's own photo or footage over an invented one; if a recognisable thing would have to be drawn badly in code, use a photo, crop tighter, or leave it out.
Sound lands on what happens. A tick when a number changes, a strike when a tube lights, a chord when a card lands. The picture doesn't flash or pump with the beat.
The music fits the weight of the piece. A greeting or a short explainer gets one or two instruments; orchestral weight is for events that can carry it. Write it on sampled instruments (
```
sound.py
```
), not synthesised tones.
Type: fonts that are on the machine (the engines list safe stacks), one or two sizes, readable over what is behind it.
Look before you call it done: a contact sheet with a frame inside every moment, a frame at full size, the sound on.

Sizes

Pages are made 9:16 (1080×1920) or 16:9 (1920×1080). Other shapes are re-laid out from the nearest one, not cropped:

3:4 and 4:5 (feeds) from 9:16: shorter; stacked elements close up or lose a layer; the subject stays the same size.
1:1 from 9:16, squeezed once more like 4:5; content that runs sideways (maps, timelines) from 16:9.
2.39:1 from 16:9: black bars inside the 16:9 frame, type and subject inside the picture.
Type sizes follow the short side.
Vertical video: keep the subject and type out of the bottom and right edges, where the platform's buttons and captions sit.

ultramotion

NPX Install

Tags

SKILL.md Content

ultramotion

Working

Engines

Judgment

Sizes