MacBook Reveal

About MacBook Reveal is an Apple-inspired animated laptop mockup for Framer that opens to present images, website screenshots, app interfaces, or muted videos.

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: [email protected] 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.

Explore all components →