Skip to content

Motion Principles

A blue ball bounces, stretches and leaves ghost trails while handwritten notes name every animation principle.

16:9Fast pace8.5spreciseplayfulcraft-obsessed

Motion-designer showreel that annotates its own craft. White and black scenes hard-cut against each other: a ball squashes and stretches over a thin floor line leaving onion-skin outlines, a giant word snaps on elastic, a position-vs-time curve draws above a square with ghosted frames showing spacing, a particle trail follows a curve, a progress ring winds up with anticipation, and a motion-blurred stagger resolves into a name card whose full stop is the ball.

Use this style

With Frame Jam installed, press Use this style in the local gallery, or just ask your agent:

Make a video with the Frame Jam style "motion-principles" and open it for review.

style.json Install Frame Jam

Palette

paper#ffffff

ink#0a0a0a

electricBlue#2540ff

blueOnBlack#6b82ff

emphasisRed#ff3b30

dimGrid#2a2a2a

greyLight#d8d8d8

greyMid#8c8c8c

Type

Display: Inter Tight 900Statements and name 200–300px, tracking -0.03em, all caps; can be scaled non-uniformly to show stretch
Body: Caveat 700Handwritten annotations 64–84px in blue (red for corrections), slightly rotated, written on left to right
Mono: JetBrains Mono 500Tiny uppercase labels 22–26px, tracking 0.16em, 50% opacity: axis names, easing values, frame rate

Motion

Fall: power2.in
Rise: power2.out
Elastic: elastic.out(1, 0.45)
Graph: power2.inOut
Anticipation: back.out(1.6)
Blur: expo.out
Average shot: 1.2s

Seven scenes of 0.7–2.2s. Every scene shows one principle moving plus one or two annotations that write on in the first half second. Last scene holds the longest.

Transitions and text

hard cut between white and black scenes, no fades or wipes
the ball or its trail from one scene is never carried across a cut; each scene starts moving on its first frame
handwriting write-on: clip-path inset 100% → 0 on the right edge, linear, 0.3–0.45s
arrows: SVG path with pathLength=1000 and dasharray 1000, strokeDashoffset 1000 → 0 (GSAP rounds px values, so avoid pathLength=1), 0.15–0.3s, arrowhead drawn in the same path
giant word: scaleX 2.6 / scaleY 0.3 → 1 / 1.7 on elastic.out, 0.55s
name rises from a clipped baseline on expo.out; the full stop drops as the ball and squashes on first contact

Style guide your agent follows

Palette: white #ffffff and ink #0a0a0a backgrounds that hard-cut against each other; one electric blue #2540ff (#6b82ff on black), a small red #ff3b30 only for corrections and emphasis.
Show the principle, then name it: a blue ball (112px) on a 4px floor line, fall power2.in, rise power2.out, squash to scale 1.6×0.5 for 0.09s, stretch to 0.84×1.28 in the air, and thin blue outline circles stamped every 0.06s so the spacing shows.
Annotations are Caveat 700 at 64–84px, rotated -4° to 3°, written on with a linear clip-path reveal and followed by a hand-drawn SVG arrow (pathLength 1000, dashoffset 1000→0, 0.2s). Use real terms: 'squash!', 'stretch', 'slow in, slow out', 'stagger: 45ms', 'follow-through'.
Tiny mono labels (22px, uppercase, tracking 0.16em, 50% opacity) carry the data: axis names, 'ease · back.out(1.6)', 'shutter 180°'.
Graph scene: clip-reveal the eased curve linearly while the marker's y and the square's x use the same ease, and stamp ghost squares at equal time steps so spacing is tight at the ends and wide in the middle.
Fake motion blur by stacking 10–15 copies of an object delayed by 5ms each with falling opacity, tweened on expo.out so the copies converge into a sharp shape.
End on a name in Inter Tight 900 around 290px where the full stop is the ball dropping with bounce.out; add one blue handwritten arrow with the call to action. Avoid gradients, glow, drop shadows, frames and decorative corner labels.