MotionKit

Gallery

Browse example compositions. Hover to preview, click to play. Each scene is built with the MotionKit primitives.

React Motion Graphics
MotionKit
A frame-driven animation framework for React. Deterministic, scrubbable, agent-friendly. Everything is f(frame).
v1.0 — MIT Licensed — All engines included
preview
Hello World
frame:0
MK:000

MotionKit Showcase

Framework overview — hero, features, code preview, and closing. Demonstrates core primitives and asymmetric layouts.

FrameworkDarkCode1080×608 · 17s
Wanderlust
A Journey Through Japan
▸ Begin journey
MK:000

Wanderlust — Japan

A watercolor map journey through Japan with animated route tracing, location pins, and painterly wash transitions.

TravelWatercolorMap1080×608 · 20s
Episode 04
Server Actions &
Data Mutations

Replace API routes with colocated mutations. Type-safe from form to database, zero client JavaScript for the happy path.

Duration
18 min
Level
Intermediate
Stack
Next.js 15
04
MK:000

Next.js Masterclass — Ep. 04

Video tutorial intro for a Server Actions episode. Impeccable-aligned: warm-tinted neutrals, exponential easing, left-aligned asymmetric layouts.

TutorialImpeccableCode1080×608 · 19s
F
I
Z
Z
Sparkling Water
Pure • Refreshing • Zero Sugar

Fizz — Product Launch

Cartoonish sparkling water commercial with bouncy physics, squash-and-stretch, floating bubbles, and confetti burst.

ProductCartoonPlayful1080×608 · 18s
4 compositions registered · MotionKit v1.0