Macbook Scroll: React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/macbook-scroll.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Show the gradient at the bottom of the screenshowGradient

Scroll track height (px)trackHeight

1400

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<MacbookScroll/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/macbook-scroll.en.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 mounted render avoids an SSR hydration mismatch, and window is only accessed after mount

Macbook Scroll