Laptop framePro
A generic laptop mockup with lid, camera notch and base, front on or in a CSS 3D three quarter view, with a real app on the screen.
On this page
Installation
Usage
import { LaptopFrame } from "@/components/ui/chatcn/pro/laptop-frame"
<LaptopFrame width={760} view="three-quarter" viewport={1440}>
<YourApp />
</LaptopFrame>The screen shows a real 1440 x 900 layout. Front on, the lid stands on its hinge barrel and the base is drawn the way a product shot sees it from a little above: the deck as a sliver that widens toward you, a polished front edge, the thumb scoop and a face that curves under into its shadow. It is one SVG in device units, so every edge stays sharp at any width. The three quarter view is real CSS 3D for the flat faces (the deck with a full keyboard at true key pitch, the trackpad, the lid and the live screen); the rounded edges are a loft of outlines projected with the same math as the CSS transform and lit by their normals, so corners stay closed and the lid and base meet with no seam. The scene is drawn at twice its size inside the 3D transform, so the screen stays as crisp as the front view.
Every finish is its own material: a metal ramp lit from the top left, thin bands lit the way a studio key light wraps around a frame, a specular top edge, near black cover glass with a faint reflection (light glass on white), a hairline where the screen meets the glass, and buttons and camera lenses shaded as solids. Fine detail (the polished chamfer, antenna breaks) only draws once it is a few px wide, so small frames stay crisp instead of stacking hairlines. It is all gradients, inset shadows and SVG: no images, no glare. On a dark page the device gets a light hairline edge instead of a heavier shadow.
The screen exposes its safe area as --chatcn-safe-top, --chatcn-safe-right, --chatcn-safe-bottom and --chatcn-safe-left, in viewport px, the way env(safe-area-inset-*) reads on the device. Pad with pt-(--chatcn-safe-top) and friends.
A screen scaled far below 1x shrinks its controls under the 24 px minimum target. When a frame is a picture (a hero, a gallery card), pass inert to the frame: the content stays visible but leaves the tab order and the accessibility tree. Leave it off and the screen stays fully live.
Examples
Finishes and no notch
Props
| Prop | Type | Notes |
|---|---|---|
width | number | Rendered width in px. Everything scales from it. Capped at the container |
finish | "auto" | "silver" | "graphite" | "black" | "white" | Hardware material. auto is silver in light, graphite in dark. light and dark still work as aliases for silver and graphite |
shading | boolean | Metal sheen, specular edges, chamfer and glass reflection. false draws flat tones. Default true |
shadow | boolean | Layered contact shadow, plus a floor shadow under upright devices. Default true |
glare | boolean | A soft diagonal reflection on the screen glass. Default false |
viewport | number | CSS width the content renders at before it scales. Smaller makes the UI larger |
screenClassName | string | Class names for the screen, for example dark |
view | "front" | "three-quarter" | Default front. Three quarter is a static 3D view with the keyboard |
notch | boolean | Camera notch. Its height is --chatcn-safe-top. Default true |
Keyboard
The frame adds nothing to the tab order.
Accessibility
- Lid, notch and base are
aria-hidden; only the screen content is read.
Motion
- The three quarter view is a static perspective with no animation, so it renders the same under reduced motion.
- Frames are static. Nothing animates on hover.
- Under
forced-colors: active, the shell and the screen get a system color outline, so the silhouette survives without fills.