Motion

Original motion pieces made with noah-motion, the animation library I wrote. Every frame is computed live in code, with no video footage at all, so you can pause and scrub to any frame.

OPEN SOURCE · MIT LICENSE

noah-motion

Frame-accurate programmatic motion engine powered by closed-form springs and pure time functions

Zero DependenciesAnalytical SpringsDeterministic seek(t)60fps Video Export

Made from my own content

My work, my signature and my stats on X.

01

Prompt to picture

The home page opener. A dot grows into my name, turns into an input box that types a prompt, sends it, becomes my work, then shrinks back to a dot.

tracktimelinespring
02

Denoising

Mimics how a diffusion model renders: it starts as colored noise and resolves in 30 steps, with the step count and noise curve alongside.

timelinecanvaseaseInOut
03

LLM token stream

Visualizes autoregressive token sampling: each step pops up top-3 candidate tokens with live Softmax probability bars before locking the winner into the prompt stream.

trackspringsoftmax
04

Latent space walk

A probe travels across a 2D latent manifold (z₁, z₂) between 4 style clusters, interpolating color gradients and style blend weights in real time.

springmixColormanifold
05

Spark

My signature. Words drop in one by one, a beam of light sweeps across, “spark” lights up with stars, then the line scatters.

trackspringstagger
06

Magnetic studio dock

A virtual cursor glides across a creative dock; icons scale along a Gaussian proximity curve with spring follow-through and bounce on click.

springgaussiantrack
07

Card deck

Five of my works in a stack. The front card swipes away to the back and the rest step forward. One full round lands exactly where it began.

trackspring
08

Top posts

Real view counts from my X account: bars for the top 6 grow one after another, numbers counting up with them.

springtrackreal data
09

When I post

My real posting times on X, in Beijing time: a hand sweeps the 24-hour dial and each hour’s bar springs out as it passes, then the busiest hour lights up.

springtrackreal data
10

Spring vs. Bezier

Side-by-side physics inspector comparing closed-form analytical springs (with live velocity vector and natural overshoot) against fixed CSS cubic-bezier curves.

springvelocityeaseInOut
11

Spring feel

Four amounts of bounce start together. The faint lines trace each spring’s position over time, and each shows how long it took to settle.

springsettlevelocity
12

noah-motion intro

The library’s own intro. The same code exports straight to a 1080×1080, 60 fps video from the repo.

trackmixColorrender

Experiments

All 41 scenes from the noah-motion gallery. You can also see them on the library’s demo site.

13

Aurora title

Soft blobs of color drift along their own paths while the title rises letter by letter out of a blur, then sinks back.

trackstaggercanvas
14

Hero shot

A product hero image: the serum rises from its plinth, selling points pop out along leader lines, the price rolls down, a deal stamp slams on, and Buy now gets tapped.

springtrackvelocitystaggerline drawing
15

Diffusion

A prompt is typed into the box and Generate is clicked. The picture starts as pure noise and is denoised step by step until, 30 steps later, it settles into a beach at dusk.

springtrackcanvasdeterministic noise
16

Ink bloom

Ink drops fall on rice paper and bloom, dark at the heart and feathered along the fibres at the edge. Then the ink gathers back into the strokes and flows into a line of calligraphy, finished with a small red seal.

canvasdistance fieldtrackspring
17

Fireworks

A riverside night: shells climb on sparking tails and burst into chrysanthemums, peonies, Saturn rings, crossed rings, strobes and a golden willow. Stars fly out on 3D spheres with drag, gravity and wind, each burst lights the sky, smoke and rooftops, embers flicker down, and the river mirrors it all.

canvasclosed-form physicswrapdeterministic noise
18

Wireframe to final

A cursor selects a gray wireframe block by block while the selection box springs between them, filling in color, type and imagery until the finished page lifts off the canvas.

trackspringstaggerclip-path
19

Exploded layers

A finished poster tips back and its five layers (background, decoration, subject, copy, button) float apart along Z with name tags, a selection sweeps through them, then they stack back into the final piece.

springtrackstaggerCSS 3D
20

Color picker

A loupe sweeps the picture and drops on five spots; each color flies out along an arc, spreads into a swatch and rolls out its hex code. The swatches sort by lightness, then reprint the image in just those five colors.

trackspringstaggercanvas
21

Frosted glass

Four frosted widgets — weather, radio, calendar and brightness — float over drifting orbs of light, spreading, swapping, stacking and fanning out while their rims catch the light.

track × 18springvelocitybackdrop-filter
22

A day at the window

Outside the window it goes from midnight to noon and back to night: the sky, sun and moon, stars, clouds and distant city lights all change, and the floor lamp comes on after dark.

timelineloopSVG
23

Node workflow

Image-generation nodes pop in and bezier wires draw between them; on Run each node lights up and checks off, data dots stream along the wires and the preview resolves from noise.

trackspringstaggerbezier arc length
24

Morphing pill

A black pill at the top of a lock screen morphs between idle, timer, now playing and a new message. Its size rides on springs, and the content fades in as the shape lands.

trackspringshape morph
25

Commit graph

A Git history grows upward: commits light up on main, branches sprout, run in parallel and merge back, messages and short hashes arrive row by row, and branch labels ride their tips.

trackspringstaggerSVG mask
26

Amber metaballs

Six drops of amber liquid glass fuse one by one into a single blob, wobble, then pull apart with strands that stretch thin, snap and retract. Through the glass you see the dot grid magnified, and the drop’s own shadow.

springtrackdistance fieldmarching squaresrefractioncanvas
27

Focus pull

A phone camera viewfinder: tap the vase and the focus box drops, shrinks and turns yellow as focus pulls from the window to the vase and the background melts into bokeh. The shutter flashes and the photo shrinks into the album thumbnail.

trackspringdepth of fieldcanvas
28

Tags in the wind

A gust sweeps a row of paper hang tags from the left. Each one is pushed out, trembles in the wind and swings back with follow-through; two on long strings get twisted round to their backs until a return breeze turns them over again.

springtrackstacked impulsesfollow-throughperiodic wrapCSS 3D
29

Particle text

Over a thousand particles sweep left to right into a word, burst into a spinning golden-angle spiral, then drift back home.

trackspringone path per particle
30

Paper plane

A faceted paper plane glides, rolls, loops and dives between three layers of cloud. The camera follows it, and its wingtips trail a ribbon that twists along with every roll.

springtrackcubicBezierperspectiveparallaxcanvas
31

Split-flap board

An airport-style split-flap board: the top flap falls carrying the old letter, and its back is the bottom half of the new one. Real 3D flaps with shading and cast shadows ripple column by column, riffle through the drum and settle on a spring with a small bounce.

springstagger3D flipdeterministic noise
32

Shape morph

A soft jelly morphs through a circle, squircle, heart, star and cloud. Outlines are resampled by arc length with aligned start points, and every change crouches, hops and lands with a wobbly spring.

springtrackarc-length resamplingcanvas
33

Beat

A record spins inside a ring spectrum that dances to a four-bar groove: bars fall back with gravity, peak caps hang before dropping, and a 16-step drum machine lights up until a snare roll lands on the downbeat again.

spring pulsestrackperiodic wrapcanvas
34

Plucked string

A line of text sits on a string. A pick pulls the string into a triangle on a spring and lets go; the string follows d'Alembert's solution, its corners racing to the bridges and flipping back. Letters ride and tilt with it, and the fast ones flush red.

d'AlemberttrackspringmixColorcanvas
35

Ripple grid

Ten colored raindrops fall on a dot-grid pond seen at an angle: a streak, a flash, a halo and a crown of splashes, then spring pulses spreading as elliptical rings. Where rings meet their colors add, and stacked crests flare white.

spring pulsesdistance delayperspectivewrapcanvas
36

AI chat

Send a message, see “typing…”, watch the reply stream in letter by letter, then a Copy button pops up. Each bubble springs out of the corner it was sent from.

springtrackstreaming text
37

Flip mosaic

40 tiles flip in 3D along the diagonal and their backs form one whole picture, then they flip back the other way.

track × 403Dstagger
38

Bar chart race

Six tags grow month by month. Bars re-sort by value as they go and spring into their new places when the ranking changes, while the axis rescales to the leader.

trackspringlive sorting
39

Kaleidoscope

Only one 30° wedge is drawn, then rotated and mirrored into 12. Cool veils of light layer into a soft bloom while gold lace rings, translucent lenses and fans of fine lines grow out of the center on a breathing rhythm, splitting and rejoining as they slide across the mirrors.

timelineloopmirror symmetryperiodic wrapcanvas
40

Layout shift

12 cards move between a pile, a grid, a ring and a wave, each leaving a beat after the last, like a small crowd finding its marks.

track × 48staggerspring
41

Times-table circle

Point i on a circle of 180 connects to point i × k. As k walks from 2 to 7 it pauses on a cardioid, a nephroid and a run of epicycloids.

timelinecanvasmath
42

Seal

Vertical Chinese calligraphy is brushed onto rice paper from top to bottom, then a red seal drops from above, squashes as it lands and leaves a textured print.

springsquash & stretchSVG filters
43

Decoding text

Each character flickers through noise, then locks into place from left to right with a brief flash; after a pause the line scrambles away and the next one decodes.

timelinestaggerdeterministic noise
44

Control feel

A toggle, checkbox, slider, segmented control, like button and stepper get tapped in turn, each with its own spring feel and a ripple where the tap lands, then reset one by one.

springtrackmicro-interactions
45

Orbits

Bodies travel tilted elliptical orbits with fading trails. Every period divides the total length, so the whole piece loops seamlessly.

timelineloopcanvas
46

Odometer

Every digit is its own wheel, driven by one spring. The faster it spins, the blurrier it gets, and the blur comes straight from the spring’s velocity.

springvelocitytrack
47

Breathe

A translucent flower of light opens and closes with “breathe in · hold · breathe out”. Three layers of petals counter-rotate and unfold from the inside out; spring-follow makes the outer ones lag and settle softly, while motes drift in and out with the breath.

spring followtrackstaggermixColorcanvas
48

Trifold

A folded card opens its side panels along the creases in perspective, its content pops in piece by piece, then it folds back up.

track3D perspectivespring
49

Activity heatmap

Thirty weeks of daily squares pop in and color along a diagonal while the total climbs; a highlight walks the longest streak and the busiest day gets a tooltip.

springstaggertrack
50

Growing chart

A week of views draws itself: points pop as the line passes, a tooltip jumps to the peak, and the total climbs along with the line.

springtrackSVG
51

Bauhaus

Circles, half circles, triangles and bars spin in from off-canvas to form a Bauhaus composition, breathe gently for a moment, then leave one by one.

trackspringcomposition
52

Blossom rain

Petals sway and tumble as they fall, big and quick up close, small and slow far away. Every path is periodic, so they fall forever yet loop seamlessly.

timelineloopdepth
53

Route

Pins drop on four places on a sketch map, the route draws itself along the streets, a dot walks it while the distance adds up, and the finish ripples.

springpath lengthSVG

Start typing to search