MacBook Reveal
Open your work in motion
About this component
About
MacBook Reveal is an Apple-inspired animated laptop mockup for Framer that opens to present images, website screenshots, app interfaces, or muted videos. Choose Appear, Scroll, Hover/Tap, Loop, or Manual control. Add an optional startup sequence, replay and playback controls, mouse tilt, reflections, screen glow, and a light sweep. The detailed MacBook-style frame scales responsively.
What you can customize
Use Framer’s property panel to upload an image or MP4, WebM, or MOV video and adjust Fill/Fit, focal position, brightness, autoplay, looping, and poster artwork. Set the trigger, opening angles, delay, scroll range, loop timing, and transition. Customize the startup logo, progress bar, controls, perspective, tilt, rotation, scale, laptop finish, keyboard backlight, lighting, background, padding, and accessible label.
This React code component uses CSS 3D, SVG details, and Framer Motion rather than an imported 3D model. It includes reduced-motion behavior and media fallbacks. This independent concept is not affiliated with or endorsed by Apple.
Great for (examples)
Use it wherever a website, app, or digital product deserves a more cinematic reveal:
SaaS product and feature demos
Website and app showcases
UI/UX portfolios and case studies
Dashboard and software previews
Video product presentations
Launch pages and hero sections
Agency and studio project reveals
Share your build
If you ship something cool with it, post it on X and tag me @Matthias_Oel, or send it over. I’d love to see what you create.
Need help?
Questions or feedback? Reach me anytime: matthias@lmvision.de or on X @Matthias_Oel.
Need a matching component?
Pair it with MacBook Carousel for multi-slide showcases or iPhone Duo Mockup for an interactive folding-phone presentation.
