Klima Studio
Klima Studio is a self-initiated concept for an imagined residential climate brand. Its centrepiece is a bedroom scene that follows the visitor’s scroll: an AC opens into an illustrative exploded view, then reassembles. The ten-page site explores how expressive motion can sit alongside clear service navigation. It is a portfolio demonstration, not a commissioned business website; no client or sales results are claimed.
“The room becomes the interface.”
The Challenge
Make the animation tell the same story as the text, without crowding the controls or hiding the rest of the website. The sequence needed to work in both scroll directions and on short phone screens, while remaining readable without animation.
The Process
A story in four scenes
Planned the sequence around a bedroom: the room at rest, summer heat, an illustrated exploded view of the AC, and reassembly.
Video controlled by scrolling
Used an AI-generated bedroom clip as a visual illustration. GSAP maps scroll progress to video time, holding the assembled unit before opening it and reversing the clip for reassembly.
A scene, not a video box
Blended the bedroom into the ivory, orange, charcoal and ice backgrounds. Kept controls and Serbian text clear of the animation on narrow and short screens.
A complete concept website
Built ten connected pages, a demonstration enquiry form and accessible alternatives. Tested real forward and reverse scrolling, reduced motion and media failure states.
The Solution
A pinned four-chapter stage pairs oversized Serbian typography with an existing AI-generated bedroom film. ScrollTrigger controls video time; feathered edges blend the room into the changing backgrounds. Play, pause, chapter jumps and a skip link give the visitor control. A Three.js scene and still imagery provide alternative visuals when needed. Nine supporting pages and a clearly disabled demo form complete the concept.
Results
See it live
Visit the live website and explore the finished project.
Like what you see?
Every project starts with a conversation. Tell us about your goals and we will figure out the best way to get there.