"use client"; import { motion, useReducedMotion, useScroll, useTransform, } from "motion/react"; import { type ReactNode, type RefObject, useRef } from "react"; import { cn } from "@/lib/utils"; export type MacbookScrollProps = { /** Image shown on the screen. Ignored when `children` is set. */ src?: string; alt?: string; /** Custom screen content, e.g. a UI mock or a video element. */ children?: ReactNode; title?: ReactNode; /** Small element pinned to the bottom-left of the deck, e.g. a logo. */ badge?: ReactNode; /** Fades the bottom of the deck into the page background. */ showGradient?: boolean; /** Scrollable ancestor to track instead of the window. */ containerRef?: RefObject; className?: string; }; export function MacbookScroll({ src, alt = "", children, title, badge, showGradient = false, containerRef, className, }: MacbookScrollProps) { const reduceMotion = useReducedMotion(); const ref = useRef(null); const { scrollYProgress } = useScroll({ container: containerRef, offset: ["start end", "center center"], target: ref, }); // Lid opens over the first part of the range, then the screen zooms in. const lidRotate = useTransform(scrollYProgress, [0, 0.6], [-88, 0]); const lidScale = useTransform(scrollYProgress, [0.6, 1], [1, 1.12]); const titleOpacity = useTransform(scrollYProgress, [0, 0.4], [1, 0]); const titleY = useTransform(scrollYProgress, [0, 0.4], [0, -24]); return (

{title ? ( {title} ) : null}

{/* Lid */}

{children ?? (src ? ( {alt}

) : null)}

{/* Deck */}

); }