01
Work in the product's brand
Paper, teal ink and sage from Klatea's own stylesheet, Fraunces with italic accent words, and coral kept for the LIVE dot and the closing link.
experiment 002 · code
Klatea · Showreel
24.3s · 1920×1080 · 30fps · 6 scenes
A motion reel for Klatea, a private prep studio and live copilot for the meetings that count. One loop, four moves: prepare, go live, get help, debrief.
Music and sound effects. No spoken dialogue. On-screen text carries the story.
scene breakdown · select a scene to play
The study
Show a real product in its own visual language: Klatea's warm editorial brand, its actual screens and its approved copy, each step of the loop told with a different motion technique.
- tools
- HyperFramesHTMLCSSGSAP
- techniques
- Match-cut transitionsCamera journey through UILogo assembly
process notes
02
Rebuild the live screen
The live meeting is recreated in HTML so every part can move: the Arabic line, its translation decoding, the Ctrl+Space press and the suggestion card.
03
Seams as transitions
Every scene hands over in one continuous move: the waveform becomes the K, the camera flies through the cup, a card becomes the live window, a ring opens into the close. Each scene still holds long enough to read.