Macbook Scroll
The screen rises out of a MacBook as you scroll
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
As the page scrolls, the MacBook's screen rotates open from a closed lid and the content gradually emerges. Built with pure CSS 3D transforms, with no dependency on WebGL.
npx shadcn@latest add "https://webberui.com/r/macbook-scroll.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<MacbookScroll />
Installation
npx shadcn@latest add "https://webberui.com/r/macbook-scroll.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/macbook-scroll.
Usage
import { MacbookScroll } from "@/components/ui/macbook-scroll";
<MacbookScroll title="Scroll down to see it">
<div className="h-full w-full bg-indigo-600" />
</MacbookScroll>children is rendered inside the screen; when not provided, a gradient placeholder is used. The component brings its own scroll track, so it works as soon as you drop it into a page that scrolls normally.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | React.ReactNode | — | Heading above the screen, which fades out as the lid opens |
children | React.ReactNode | gradient placeholder | The content shown inside the screen |
showGradient | boolean | true | Overlay a fade-out gradient at the bottom of the screen |
trackHeight | number | 1400 | Height of the scroll track (px); the taller it is, the slower the lid opens |
container | React.RefObject<HTMLElement | null> | — | Ref of a nested overflow scroll container; when not provided, the window is tracked |
className | string | — | Forwarded to the outer track container |
Accessibility
- When the user has "reduce motion" enabled at the system level, a static MacBook opened all the way is rendered directly, with nothing bound to scroll
- A two-stage
mountedrender avoids an SSR hydration mismatch, andwindowis only accessed after mount