Motion graphics, live
Three examples built for this work. The buttons inside the examples work.
Marks on a vertical screen
Six marks in a row on a 768×1280 screen. Each has its own exit, hold and caption, and the background moves under them.
- Format
- MP4 H.264, 768×1280
- Frame rate
- 60 fps
- Length
- 21.6 s
- Size
- 3.0 MB
A character in Lottie
Khrum in five states. Each state is a separate Lottie cycle, the page draws the background.
- Format
- Lottie JSON
- Run cycle
- 36 frames, 30 fps, 640×440
- Cycle size
- 28 KB gzipped
- Player
- lottie-web, canvas
Animation in one file
An egg in a nest: success, failure and back to the start. The script draws on a canvas and needs no libraries.
- File
- hatch.js
- Size
- 7 KB gzipped
- Connection
- one script and one call
- Motion
- computed from time, not from frames
A showreel with music
3D product films, app promos, live interfaces, games, brand idents and vertical videos in the rhythm of one track: the cuts land on the beat and the transitions are built in motion. The interfaces were recorded frame by frame from working pages.
- Format
- MP4 H.264, 1920×1080, 60 fps
- Length
- 53.7 s
- Size
- 27.4 MB
- Sound
- Sunfade, Roa Music, CC BY 3.0
A product promo
The SONO speaker: kinetic type, dimensions drawn as lines, numbers that count up and a colour that changes with the background.
- Format
- MP4 H.264, 1920×1080, 60 fps
- Length
- 20.9 s
- Size
- 15.4 MB
- Sound
- Between Oceans and Summits, Alex-Productions, CC BY 3.0
A vertical clip
A different character of movement: springy letters, jumps and confetti. The character is Khrum, with Lottie cycles.
- Format
- MP4 H.264, 1080×1920, 60 fps
- Length
- 26.7 s
- Size
- 8.8 MB
- Sound
- Little Adventures, Sokolovsky Music, CC BY 4.0