║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

Macbook Scroll

Scroll through the page and see the image come out of the screen, as seen on Fey.com website.

Tags: hero, footer, section, special, parallax

Installation

Run the following command:

npx shadcn@latest add @aceternity/macbook-scroll

Usage

import React from "react";
import { MacbookScroll } from "@/components/ui/macbook-scroll";
import { Badge } from "@/components/ui/badge";
 
export function MacbookScrollDemo() {
  return (
    <div className="w-full overflow-hidden bg-white dark:bg-[#0B0B0F]">
      <MacbookScroll
        title={
          <span>
            This Macbook is built with Tailwindcss. <br /> No kidding.
          </span>
        }
        badge={
          <a href="https://peerlist.io/manuarora">
            <Badge className="h-10 w-10 -rotate-12 transform" />
          </a>
        }
        src={`/linear.webp`}
        showGradient={false}
      />
    </div>
  );
}

Props

| Prop | Type | Description | Default Value | | :--- | :--- | :--- | :--- | | src | string | Source URL for the MacBook screen image. | undefined | | showGradient | boolean | Flag to show/hide the gradient overlay. | undefined | | title | string \| ReactNode | Title text or React node displayed above the MacBook. | undefined | | badge | ReactNode | Sticker displayed at the bottom left of the Macbook | undefined |

Credits

The design is inspired from Fey's landing page hero section.

Aceternity UI

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║