Animated Laptop
Laptop mockup with a hover-reactive lid that springs open to reveal the screen. Built with pure CSS 3D transforms. For a static open pose with a visible keyboard deck, use laptop-mockup. Pairs with phone-mockup, tablet-mockup, and browser-mockup.
Default
Single laptop with a remote screenshot-hover to open the lid.
Sign in to view this example's source code.
Sign inCustom screen
Replace the image with any React node inside the display.
> npm run devready in 320ms
Sign in to view this example's source code.
Sign inGrid showcase
Multiple laptops in a responsive grid-dashboard, terminal, and product layouts.
Dashboard
> npm run devready in 320ms
Custom content
Product shot
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| image | string | "/laptop-screen.png" | Image URL for the screen. Ignored when children are provided. |
| imageAlt | string | "Laptop screen content" | Accessible alt text for the screen image |
| children | ReactNode | undefined | Custom screen content; overrides image when provided |
| className | string | undefined | Classes for the root laptop container |