Animated MacBook

Pro

A closed MacBook that hinges open and powers on when you hover, in ten finishes.

css 3d3dillustrationmacbooklaptopdevicecsshover

Overview

Animated MacBook is a React and Tailwind CSS laptop mockup that opens when hovered, in Next.js or any React app. It is pure CSS 3D with no dependencies: a full keyboard with function row and Touch ID, a notched display showing your screenshot, and a glass trackpad. Hover swings the lid up, tilts the deck toward the viewer, and powers on the screen. Ten finishes, hinge angle, and view tilt are props, and it scales with its container. Reduced motion shows it already open, and touch screens have no hover, so set position to open on mobile.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add macbook

Usage

Import Macbook from @/components/wensity/macbook and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { Macbook } from "@/components/wensity/macbook";
 2
 3export default function Example() {
 4  return (
 5    <Macbook
 6      theme="space-black"
 7      position="hover"
 8      src="/screenshot.webp"
 9      className="w-full max-w-lg"
10    />
11  );
12}

Props

Prop	Type	Default	Description
`theme`	"space-black" \| "black" \| "midnight" \| "space-gray" \| "silver" \| "starlight" \| "sky-blue" \| "gold" \| "yellow" \| "wensity-red"	"space-black"	Chassis finish: Space Black, Black, Midnight, Space Gray, Silver, Starlight, Sky Blue, Gold, Yellow, or Wensity Red.
`position`	"hover" \| "open" \| "closed"	"hover"	Pose: hover to open, stay open, or stay closed.
`openAngle`	number	138	Lid hinge angle in degrees (90 ≈ upright, 180 ≈ folded flat back). Larger reclines the screen further.
`baseTilt`	number	16	Tilt of the bottom body / keyboard deck toward the viewer, in degrees. Independent of the lid.
`tilt`	number	6	Overall camera/view tilt of the open deck in degrees. Lower reads head-on, higher tips toward a top-down view.
`src`	string	-	Image shown on the screen (fills the display, object-cover).
`screenAlt`	string	"Screen"	Alt text for the screen image.
`label`	string	"MacBook illustration"	Accessible label announced for the illustration.

Featured in React 3D components.