01
A real brochure, flipped in 3D
The pages are the actual 2025 portfolio brochure. Each leaf turns over the spine in CSS 3D, accelerating like a thumbed flipbook through eight client projects.
film 010 · code
João Queirós · Branding Reel
14.0s · 1920×1080 · 30fps · seamless loop
Fourteen seconds of a branding career: the portfolio brochure opens and thumbs through eight client projects, bursts into a wall of logos counting up to 1,200+ brands in 40+ countries, and folds back into the mark on its cover.
Music only. No spoken dialogue.
scene breakdown · select a scene to play
The study
Show the design practice behind the systems: the real brochure, real client identities and the full logo library, in a loop that ends exactly where it began.
- tools
- HyperFramesHTMLCSSGSAP
- techniques
- CSS 3D page flipsTile burst and card turnsSeamless loop
process notes
02
The library
Seventy-two real logos burst from the spine into a six by four wall, then turn over in diagonal waves while the count rises to 1,200+ brands.
03
It loops
The wall collapses into the JQ mark, the mark lands on the cover, and the final frame is the first one, so the film loops seamlessly. The 16:9 cut adds the music, timed so its last hit lands on the mark.