{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "laptop-frame", "title": "Laptop Frame", "description": "MacBook-style laptop that opens, runs a dynamic-island notch notification, then dives the camera into the screen until an image or video fills the frame.", "dependencies": [ "remotion" ], "registryDependencies": [ "https://snapcn.dev/r/snap-cn-ui.json" ], "files": [ { "path": "registry/snap-cn/laptop-frame/index.tsx", "content": "\"use client\";\n\nimport type { CSSProperties, ReactNode } from \"react\";\nimport {\n Easing,\n getRemotionEnvironment,\n Img,\n interpolate,\n OffthreadVideo,\n staticFile,\n useCurrentFrame,\n useVideoConfig,\n} from \"remotion\";\nimport {\n mixOklch,\n type SnapCnTheme,\n useSnapCnTheme,\n withAlpha,\n} from \"@/lib/snap-cn-ui\";\n\nexport type LaptopFrameEntrance = \"rise\" | \"open\" | \"none\";\nexport type LaptopFrameFinale = \"none\" | \"zoom-to-screen\";\nexport type NotchPhase = \"idle\" | \"loading\" | \"done\";\n\nexport interface LaptopFrameProps {\n /** Screen content. Falls back to `screenSrc`, then a built-in hero placeholder. */\n children?: ReactNode;\n /**\n * Image *or* video to fill the screen when `children` is omitted. Videos\n * (.mp4/.webm/.mov/.m4v) play via ``, images via `` —\n * both cover the screen and fade/un-blur in. A root-relative path\n * (`/showcase-videos/x.mp4`) is served by Next in the Player and rewritten\n * through `staticFile()` in a render.\n */\n screenSrc?: string;\n /** How the laptop enters. `open` lifts the lid up from the deck. */\n entrance?: LaptopFrameEntrance;\n /**\n * How the shot ends. `zoom-to-screen` dollies the camera into the screen and\n * un-tilts it until the content fills the frame — a product \"screen takeover\".\n * Assumes the frame is the whole composition (the cover scale is derived from\n * `useVideoConfig`).\n */\n finale?: LaptopFrameFinale;\n /** Lid shell + deck base color. Space-grey by default. */\n /** Lid colour. Defaults to a dark neutral from the design system. */\n bezelColor?: string;\n /** Screen fill behind the content. */\n /** Screen fill behind `children`. Defaults to the theme's `card`. */\n screenColor?: string;\n /** Design-system token overrides — applied to the screen's contents. */\n theme?: Partial;\n mode?: \"light\" | \"dark\";\n /** Notch status indicator. The macOS system green is the look, not a token. */\n indicatorColor?: string;\n /** rotateX of the lid at rest, in degrees (positive tips the top back). */\n restTilt?: number;\n /** Lid top-corner radius. The bottom corners stay near-square (the hinge). */\n radius?: number;\n /** CSS box-shadow under the deck. Empty string disables it. */\n shadow?: string;\n /** Uniform size multiplier for the whole machine. */\n scale?: number;\n /** Render the notch notification pill. */\n showNotch?: boolean;\n /** Text shown in the notch's connected state. */\n notchLabel?: string;\n /** Battery fill (0–100) drawn green in the connected state. */\n batteryLevel?: number;\n /** Gentle vertical bob after the entrance settles. */\n floatLoop?: boolean;\n /** Peak float displacement in pixels. */\n floatAmplitude?: number;\n speed?: number;\n className?: string;\n}\n\nconst FONT_FAMILY =\n 'Inter, var(--font-geist-sans), -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif';\n\n/** Lid (screen panel) size — a 16:10 MacBook-style display. */\nexport const LID_WIDTH = 820;\nexport const LID_HEIGHT = 500;\n\n/** Dark shell thickness between the lid edge and the screen. */\nexport const BEZEL_WIDTH = 14;\n\n/** Deck (base) is a touch wider than the lid — the trapezoid under the hinge. */\nexport const DECK_WIDTH = 900;\nexport const DECK_HEIGHT = 22;\n\n/** Lid top-corner radius; bottom corners are near-square where the hinge is. */\nexport const LID_RADIUS = 22;\n\n/** rotateX of the lid at rest, and the perspective it is rendered through. */\nexport const REST_TILT = 18;\nexport const PERSPECTIVE = 1600;\n\n/** Frames the entrance takes before the machine is fully settled. */\nexport const ENTRANCE_FRAMES = 30;\n\n/** Camera \"screen takeover\" push: dolly + un-tilt from here to here. */\nexport const PUSH_START = 140;\nexport const PUSH_END = 185;\n\n/**\n * The camera-move easing. A *moderate* decelerate — not quint/expo-out, which\n * cover their travel in the first third and then spend frames moving < 0.5px,\n * i.e. freeze on a frame clock. See the motion-quality skill.\n */\nexport const CAMERA_EASE = Easing.bezier(0.2, 0.6, 0.35, 1);\n\n/**\n * Camera-box height: the lid + deck stack, which is what the outer wrapper\n * shrink-wraps and scales around. Used to find how far the screen centre sits\n * above the box centre so the zoom can recentre it in the frame.\n */\nexport const COLUMN_HEIGHT = LID_HEIGHT + DECK_HEIGHT;\n\n/** Seconds per full float-loop cycle. */\nexport const FLOAT_PERIOD_SECONDS = 5;\n\n/** Notch pill height, and its width in each of the three states. */\nexport const NOTCH_HEIGHT = 30;\nexport const NOTCH_IDLE_WIDTH = 116;\nexport const NOTCH_LOADING_WIDTH = 150;\nexport const NOTCH_DONE_WIDTH = 320;\n\n/** Default frame at which each notch state begins (before `speed`). */\nexport const NOTCH_TIMING = {\n loadingStart: 72,\n doneStart: 120,\n} as const;\n\nexport interface EntrancePose {\n opacity: number;\n translateY: number;\n scale: number;\n}\n\n/**\n * Pure entrance schedule for the whole machine. Every entrance settles to the\n * identity pose by `ENTRANCE_FRAMES`, so the float loop takes over with no seam.\n * The lid-open rotation is a separate track — see `lidTilt`.\n */\nexport function entrancePose(\n frame: number,\n entrance: LaptopFrameEntrance,\n): EntrancePose {\n const clamp = {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n } as const;\n const easeOut = Easing.out(Easing.cubic);\n\n if (entrance === \"none\") {\n return { opacity: 1, translateY: 0, scale: 1 };\n }\n\n if (entrance === \"open\") {\n // The travel is small — the drama is in the lid lifting (lidTilt).\n return {\n opacity: interpolate(frame, [0, 10], [0, 1], clamp),\n translateY: interpolate(frame, [0, 24], [24, 0], {\n ...clamp,\n easing: easeOut,\n }),\n scale: 1,\n };\n }\n\n // rise (default)\n return {\n opacity: interpolate(frame, [0, 12], [0, 1], clamp),\n translateY: interpolate(frame, [0, 26], [70, 0], {\n ...clamp,\n easing: easeOut,\n }),\n scale: 1,\n };\n}\n\n/**\n * rotateX of the lid (degrees). `open` swings it from closed-ish to rest, hinged\n * at the deck (the lid's transform-origin is its bottom edge). `zoom-to-screen`\n * then flattens it back to 0 during the push, so the takeover ends on a flat,\n * head-on screen rather than a foreshortened one.\n */\nexport function lidTilt(\n frame: number,\n entrance: LaptopFrameEntrance,\n finale: LaptopFrameFinale = \"none\",\n restTilt: number = REST_TILT,\n): number {\n const opened =\n entrance === \"open\"\n ? interpolate(frame, [0, ENTRANCE_FRAMES], [82, restTilt], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: Easing.out(Easing.cubic),\n })\n : restTilt;\n\n if (finale !== \"zoom-to-screen\" || frame < PUSH_START) return opened;\n\n return interpolate(frame, [PUSH_START, PUSH_END], [restTilt, 0], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: CAMERA_EASE,\n });\n}\n\nexport interface CameraPose {\n scale: number;\n translateY: number;\n}\n\n/**\n * The \"screen takeover\" camera. `zoom-to-screen` dollies in (scale) and slides\n * up (translateY) so the screen's inner rect grows to *cover* the composition\n * and stays centred as it does. The scale is derived from the composition size,\n * so the content lands exactly filling the frame — verified by rendering frames,\n * not eyeballed (motion-quality Rule 0).\n */\nexport function cameraPose(\n frame: number,\n finale: LaptopFrameFinale,\n baseScale: number,\n compWidth: number,\n compHeight: number,\n): CameraPose {\n if (finale !== \"zoom-to-screen\") return { scale: 1, translateY: 0 };\n\n const p = interpolate(frame, [PUSH_START, PUSH_END], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: CAMERA_EASE,\n });\n\n // Screen inner, at the resting base scale, must cover the whole frame.\n const innerW = (LID_WIDTH - 2 * BEZEL_WIDTH) * baseScale;\n const innerH = (LID_HEIGHT - 2 * BEZEL_WIDTH) * baseScale;\n const cover = Math.max(compWidth / innerW, compHeight / innerH);\n const scale = 1 + (cover - 1) * p;\n\n // The screen centre sits `d` px above the camera-box centre (the deck pulls the\n // box centre down). Countering `d * cover` as we scale keeps it centred: the\n // screen centre tracks from (centre − d) to (centre) exactly.\n const d = (COLUMN_HEIGHT / 2 - LID_HEIGHT / 2) * baseScale;\n const translateY = d * cover * p;\n\n return { scale, translateY };\n}\n\n/**\n * Deterministic float-loop offset in pixels. Starts at 0 with an upward drift\n * at `startFrame`, so it blends seamlessly out of the entrance. (Same math as\n * the phone-frame float — kept inline so the copied component has no deps.)\n */\nexport function floatOffset(\n frame: number,\n fps: number,\n amplitude: number,\n startFrame = 0,\n periodSeconds: number = FLOAT_PERIOD_SECONDS,\n): number {\n const local = Math.max(0, frame - startFrame);\n const value =\n Math.sin((local / (fps * periodSeconds)) * Math.PI * 2) * amplitude;\n // Negative = upward drift; the `=== 0` guard avoids returning -0.\n return value === 0 ? 0 : -value;\n}\n\nexport interface NotchState {\n phase: NotchPhase;\n /** Pill width in pixels, morphing between the three states. */\n width: number;\n /** Cross-fade weights for the three content layers. */\n idle: number;\n loading: number;\n done: number;\n}\n\n/**\n * Pure notch schedule: which state is showing, the morphing pill width, and the\n * cross-fade weights of the three content layers. The pill holds its loading\n * width, then expands to fit the connected label — the dynamic-island morph.\n */\nexport function notchState(\n frame: number,\n timing: { loadingStart: number; doneStart: number } = NOTCH_TIMING,\n): NotchState {\n const { loadingStart, doneStart } = timing;\n const clamp = {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n } as const;\n\n const phase: NotchPhase =\n frame < loadingStart ? \"idle\" : frame < doneStart ? \"loading\" : \"done\";\n\n const width = interpolate(\n frame,\n [loadingStart - 8, loadingStart, doneStart - 4, doneStart + 12],\n [\n NOTCH_IDLE_WIDTH,\n NOTCH_LOADING_WIDTH,\n NOTCH_LOADING_WIDTH,\n NOTCH_DONE_WIDTH,\n ],\n { ...clamp, easing: Easing.inOut(Easing.cubic) },\n );\n\n const idle = interpolate(\n frame,\n [loadingStart - 6, loadingStart],\n [1, 0],\n clamp,\n );\n const loading = interpolate(\n frame,\n [loadingStart - 6, loadingStart, doneStart - 6, doneStart],\n [0, 1, 1, 0],\n clamp,\n );\n const done = interpolate(\n frame,\n [doneStart - 4, doneStart + 6],\n [0, 1],\n clamp,\n );\n\n return { phase, width, idle, loading, done };\n}\n\n/**\n * Built-in placeholder: a full-bleed product hero. Full-bleed on purpose — the\n * `zoom-to-screen` finale dives into the screen, so the content has to reward\n * filling the frame, not sit as a small card on empty canvas. Elements stagger\n * in during the open, then hold. Pass `imageSrc`/`children` to use your own.\n */\nfunction PlaceholderScreen({ frame, t }: { frame: number; t: SnapCnTheme }) {\n const rise = (delay: number) => {\n const r = interpolate(frame, [delay, delay + 14], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n easing: Easing.out(Easing.cubic),\n });\n return { opacity: r, transform: `translateY(${(1 - r) * 14}px)` };\n };\n\n return (\n \n {/* App bar */}\n \n
\n \n \n Acme\n \n
\n
\n {[\"Product\", \"Pricing\", \"Docs\"].map((l) => (\n \n {l}\n \n ))}\n \n Sign in\n
\n \n \n\n {/* Hero */}\n \n \n \n Now in public beta\n \n \n Ship demos that sell.\n \n \n Turn your product into a polished launch video in minutes — no editor,\n no render farm.\n \n
\n \n Get started\n
\n \n Watch demo\n \n \n \n \n );\n}\n\nconst isVideo = (src: string) => /\\.(mp4|webm|mov|m4v)(\\?|$)/i.test(src);\n\n/**\n * A root-relative asset (`/showcase-videos/x.mp4`) is served at the origin root\n * by Next in the Player, but a server render serves `public/` through\n * `staticFile()` — so rewrite local paths only while rendering, and pass\n * http(s)/data/blob URLs straight through.\n */\nfunction resolveSrc(src: string): string {\n const isLocal = src.startsWith(\"/\") && !src.startsWith(\"//\");\n if (isLocal && getRemotionEnvironment().isRendering) {\n return staticFile(src.replace(/^\\/+/, \"\"));\n }\n return src;\n}\n\n/** Fills the screen with an image or a video, fading and un-blurring it in. */\nfunction ScreenMedia({ src, frame }: { src: string; frame: number }) {\n const t = interpolate(frame, [4, 22], [0, 1], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n });\n const style: CSSProperties = {\n position: \"absolute\",\n inset: 0,\n width: \"100%\",\n height: \"100%\",\n // Tailwind's preflight sets `img { max-width: 100% }`, which can collapse a\n // media element we size ourselves to 0px wide. Opt out. (motion-quality skill.)\n maxWidth: \"none\",\n objectFit: \"cover\",\n opacity: t,\n filter: `blur(${(1 - t) * 8}px)`,\n };\n const resolved = resolveSrc(src);\n return isVideo(src) ? (\n \n ) : (\n \n );\n}\n\nfunction Dot({\n size,\n color,\n style,\n}: {\n size: number;\n color: string;\n style?: CSSProperties;\n}) {\n return (\n \n );\n}\n\n/** The notch pill notification, morphing idle → loading → connected. */\nfunction Notch({\n frame,\n label,\n batteryLevel,\n t,\n indicatorColor,\n}: {\n frame: number;\n label: string;\n batteryLevel: number;\n /** Resolved in dark mode — the notch is a dark pill whatever the app theme. */\n t: SnapCnTheme;\n indicatorColor: string;\n}) {\n const state = notchState(frame);\n const layer: CSSProperties = {\n position: \"absolute\",\n inset: 0,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n return (\n \n {/* idle — camera dot + sensor dot */}\n
\n \n \n
\n\n {/* loading — three pulsing dots */}\n
\n {[0, 1, 2].map((i) => (\n \n ))}\n
\n\n {/* done — label + battery */}\n
\n \n {label}\n \n \n \n
\n \n \n );\n}\n\nexport function LaptopFrame({\n children,\n screenSrc,\n entrance = \"rise\",\n finale = \"none\",\n bezelColor,\n screenColor,\n theme,\n mode,\n indicatorColor = \"#30D158\",\n restTilt = REST_TILT,\n radius = LID_RADIUS,\n shadow,\n scale = 0.95,\n showNotch = true,\n notchLabel = \"AirPods Connected\",\n batteryLevel = 85,\n floatLoop = true,\n floatAmplitude = 4,\n speed = 1,\n className,\n}: LaptopFrameProps) {\n const frame = useCurrentFrame() * speed;\n // The screen shows an app, so it follows the app theme. The lid, the notch\n // and the drop shadow are a physical object photographed on a desk: they take\n // the dark end of the system whatever mode the screen is in.\n const t = useSnapCnTheme(theme, mode);\n const shell = useSnapCnTheme(theme, \"dark\");\n const lid = bezelColor ?? mixOklch(shell.background, shell.foreground, 0.09);\n const glass = screenColor ?? t.card;\n const drop = shadow ?? `0 40px 80px ${withAlpha(shell.background, 0.45)}`;\n const { fps, width, height } = useVideoConfig();\n const isRendering = getRemotionEnvironment().isRendering;\n\n const pose = entrancePose(frame, entrance);\n const tilt = lidTilt(frame, entrance, finale, restTilt);\n const camera = cameraPose(frame, finale, scale, width, height);\n // The float loop would fight the camera push, so it stops when the dive starts.\n const bob =\n floatLoop && !(finale === \"zoom-to-screen\" && frame >= PUSH_START)\n ? floatOffset(frame, fps, floatAmplitude, ENTRANCE_FRAMES)\n : 0;\n // The notch is at the top of the screen; fade it out as we dive past it.\n const notchFade =\n finale === \"zoom-to-screen\"\n ? interpolate(frame, [PUSH_START, PUSH_START + 10], [1, 0], {\n extrapolateLeft: \"clamp\",\n extrapolateRight: \"clamp\",\n })\n : 1;\n\n const screenContent =\n children ??\n (screenSrc ? (\n \n ) : (\n \n ));\n\n return (\n \n {/* Camera: the screen-takeover dolly. `geometricPrecision` keeps any scaled\n text from boiling; will-change helps the live Player but is wrong in a\n render (it rasterises type across parallel tabs) — motion-quality skill. */}\n \n {/* Entrance + float rig */}\n \n {/* Perspective stage: the lid tilts inside it, the deck stays flat */}\n \n {/* Lid — hinged at its bottom edge */}\n \n {/* Screen */}\n \n {screenContent}\n {showNotch && notchFade > 0 && (\n
\n \n
\n )}\n \n \n\n {/* Deck — wider than the lid, with the lift-lip on top */}\n \n \n \n \n \n \n \n );\n}\n", "type": "registry:component", "target": "components/snap-cn/laptop-frame.tsx" } ], "type": "registry:component" }