Macbook Scroll
Product mockup that opens like a Macbook lid as the user scrolls, revealing content inside.
Preview
Macbook Scroll
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Product demo pages and app showcase sections.
Why this component matters
The physical metaphor (opening a laptop) creates anticipation and a natural reveal moment.
Usage guidance
Use once per page for the primary product reveal. The content inside the laptop should be a screenshot or interactive demo. Requires tall scroll space.
Installation
bash
npx shadcn@latest add @aceternity/macbook-scrollUsage
example.tsxtsx
import { MacbookScroll } from "@/components/ui/macbook-scroll";
export default function Example() {
return (
<MacbookScroll>
{/* Your content here */}
</MacbookScroll>
);
}Source
macbook-scroll.tsx
components/ui/macbook-scroll.tsx