Macbook Scroll

A CSS-drawn laptop pins in place and opens its lid as the screenshot scales up.

Open it up. Everything is already set.

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/macbook-scroll.json

Adds components/velora/macbook-scroll.tsx, installs motion.

A mock dashboard built from Tailwind as the screen content instead of an image.

OverviewLast 30 days

Revenue

$48.2k

+12.4%

Active users

2,184

+5.1%

Churn

1.9%

−0.3%

Monthly recurring revenue

Prop	Type	Default
`src` Screenshot shown on the screen	`string`	`—`
`alt` Alt text for `src`; leave empty if the image is decorative	`string`	`""`
`children` Custom screen content, used instead of `src`; `cqw` units scale with the screen	`React.ReactNode`	`—`
`title` Heading above the laptop, rendered in an h2	`React.ReactNode`	`—`
`badge` Small element on the lower-left of the deck, e.g. a logo	`React.ReactNode`	`—`
`container` Scrollable element to track instead of the window	`React.RefObject<HTMLElement \| null>`	`—`

Also accepts every <div> attribute, forwarded to the root element.

Reduced motion: The laptop renders open with the screenshot at full size, the section drops its extra scroll height, and nothing moves while scrolling.
Keyboard: Decorative — nothing to operate.
Screen readers: The title is an h2 and the screenshot uses the `alt` you pass (empty by default); the lid shell, keyboard and trackpad are aria-hidden.