Animated Laptop
Laptop mockup with a hover-triggered lid that opens using CSS 3D transforms to reveal the screen. Also supports a static open state showing the keyboard deck.
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 |