Mystic Studios · studio reel/2026
Agency reel · MacBook
A 25 second studio reel: a 3D MacBook showing a real landing page that scrolls section by section, with the camera moving to each one and the Mystic logo closing it.
(01) Overview
My studio needed a piece that shows what a client gets: a landing page, alive, on a device. Instead of animating screenshots, the reel puts an actual landing I built on the screen of a 16 inch MacBook Pro in 3D. The page scrolls through six sections, pauses on each, and the laptop turns and zooms toward what is on screen while short labels talk about my work. It comes in 1:1 and 9:16 and ends with the animated Mystic logo.
Client
Mystic Studios · studio reel
Year
2026
Services
Motion, 3D
Deliverables
Reel 1:1, Reel 9:16, Section-by-section landing choreography, 3D MacBook scene, Logo outro
(A) The Challenge
A landing is made to be scrolled, not watched. Its reveals and counters had to land at a pace a viewer can follow, the page had to stay sharp while the laptop moves, and the same scene had to work in a narrow 9:16 frame, where the laptop barely fits.
(B) The Approach
- 01
The camera goes to the content
Four reference reels set the look: a silver laptop floating on deep violet with out-of-focus lights, and a camera that goes wherever the content is.
- 02
Hold, travel, hold
The landing was choreographed like a shot list, section by section, so every reveal and counter finishes before the page moves on. Each section has its own pose and zoom, tied to that timing.
- 03
The message moves up
The first version with labels put the message in a large headline at the bottom, until the zoomed shots covered it. The message moved to the top label, and the headline stayed for the opening and the closing.
- 04
Polished frame by frame
The last fixes came from looking at single frames: sharper screen text that stops crackling, calmer reflections on the aluminium, and the laptop levelled by 1.3 degrees so the page sits straight.
landing sections, each with its own pose and zoom
reference reels that set the look
formats from one scene: 1:1 and 9:16
(02) The Product
A real landing as footage
The references were reels of laptops and phones over dark backgrounds, with the camera following the content. Rather than fake a page with screenshots, the screen shows a landing I built, scrolling by section, hold, travel, hold, so every reveal and counter lands before the page moves on. This is the page on its own, before it goes on the laptop.
First frames on the laptop
These first test frames, without labels, checked the three things the reel depends on: the page sitting straight on the panel, the pose for each section and how far the zoom can go before the keyboard takes over the frame.
Labels that talk about my work
The first version with text paired a top label with a large headline at the bottom. In the zoomed shots the laptop covered the headline, so the message moved to the top label, which is always visible, and the large headline stayed for the opening and the closing. Generic labels like Motion were replaced by what I offer: modern design, smooth animations, custom code, pixel care.
Judging the motion, not the stills
Single frames do not show judder or shimmer, so short clips at final quality were reviewed for the feel of each move. This one covers a travel between two sections. A small hitch at the start of the travel showed up here and was smoothed out.
The vertical version
In 9:16 the laptop is centered and much smaller, so the same zooms would push it out of frame. The vertical cut keeps 55 % of each zoom and 45 % of each sideways move, and brings the labels close to the laptop instead of the edges of the frame.
The same scene in widescreen
Composed again at 16:10: front-on, the laptop centred between the blobs of violet light, the hero line «Tu negocio merece una web que venda» readable at a glance. The scene holds up in every format, and this frame became a cover for my own motion work.
(03) The Outcome
Two cuts of 24.9 seconds, square and vertical. The scroll covers 22.5 seconds across six sections, then the Mystic logo enters with a 0.6 second crossfade. The web version is the vertical cut, without sound. The same scene also composes at 16:10, and that frame became a cover for my own motion work.
3D model: «MacBook Pro M3 16 inch 2024» (Sketchfab), CC BY 4.0.