Search, then result
Label out 120 ms · spinner · check draws 320 ms
Motion design · SKYLARK, private aviation
The booking, told in 36 seconds.
A logo animation, a product explainer, two social cut-downs and the interface motion for the SKYLARK charter platform. One set of rules for all of it: short, decelerating, never decorative.
- Explainer
- 0:36 · 16:9 · 1920×1080
- Social
- 0:15 · 9:16 / 0:12 · 1:1
- Logo
- 0:05 · 16:9
- Built with
- HTML, CSS and GSAP, rendered frame by frame
01
Logo animation
The mark is a disc cut by two arcs: the horizon and a climb. The animation builds it the way the logo was drawn, then writes the name.
- 0.0 sThe ring draws900 ms, ease in-out
- 0.35 sThe two arcs meet1000 ms each, expo out, 130 ms apart
- 0.9 sThe name writes itself550 ms per letter, 70 ms stagger
- 2.5 sThe line settles“On-demand charter · Tel Aviv”
02
Product explainer
Five scenes, one continuous camera. Every screen in the film is the real interface of the platform, animated from its own components.
0:00The trip, in wordsKinetic type. Each word rises on its own mask. 
0:04The route drawsReal airport positions. The aircraft follows the line; distance and time count up with it. 
0:12SearchThe map steps back; the search panel rises into focus. 
0:15Three aircraftCards arrive in order; prices count to the full total. 
0:20The quoteThe chosen card slides aside; the price builds line by line. 
0:25ConfirmedThe button turns into the confirmation. 
0:28The operator’s sideThe booking lands in the console with its aircraft and crew. 
0:33Sign-offThe logo builds; the address follows.
04
Interface micro-interactions
Six moments in the booking app. Each is live: try them.
FromTLV Tel Aviv
ToNCE Nice
Swap airports
Icon turns 180° · names cross, 320 ms, expo out
4
passengersPassenger count
Digits roll in the direction of change · 200 ms
€32,900total, all fees
Aircraft and price
Indicator slides 320 ms · price counts 600 ms
Book, then confirmed
Button closes to a circle · check draws · 500 ms total
A booking reaches the console
Slides in 320 ms · older rows step down · badge pulses once
05
The rules behind it
Arrive fast, settle slowly
Everything that enters uses an expo-out curve: most of the distance in the first third, then a long settle. Nothing bounces.
Order shows sequence
Lists stagger by 70 to 120 ms in reading order, so the eye is led from the first item to the last. In Hebrew, the order runs right to left.
Numbers move, never jump
Prices, distances and times count to their value, so a change is seen, not just displayed. With reduced motion, they simply appear.
The motion tokens are part of the SKYLARK design system. See the tokens
03
Social cut-downs
The same scenes, recomposed for the feed rather than cropped: type set larger, cards stacked, the logo held longer. Silent by design, readable without sound.
What changes between formats