Animated “How It Works” Bento Section
From “hi” to keys, in four steps.
Designed and animated a “How it works” section for a homestay platform, where each card shows the product working instead of just describing it.
FRAME is a cinematic skin for Video.js v10, built around a centred play dial that quietly tracks your place in the film, with volume and playback speed at its sides.
Explore turns real film frames into a scene map. Responsive layouts, light and dark themes, keyboard controls, visible focus and reduced-motion support carry the same design language across screens.
Designed by TAiO Design Studio. Built with Video.js v10 and Mux.
The centred play dial is a lovely idea — one control that quietly tracks where you are in the film, with volume and speed at its sides, so the player reads like an instrument rather than a toolbar. And Explore turning real film frames into a scene map makes browsing feel like...