Laptop Frame

1"use client";
2 
3import type { CSSProperties, ReactNode } from "react";
4import {
5  Easing,
6  getRemotionEnvironment,
7  Img,
8  interpolate,
9  OffthreadVideo,
10  staticFile,
11  useCurrentFrame,
12  useVideoConfig,
13} from "remotion";
14import {
15  mixOklch,
16  type SnapCnTheme,
17  useSnapCnTheme,
18  withAlpha,
19} from "@/lib/snap-cn-ui";
20 
21export type LaptopFrameEntrance = "rise" | "open" | "none";
22export type LaptopFrameFinale = "none" | "zoom-to-screen";
23export type NotchPhase = "idle" | "loading" | "done";
24 
25export interface LaptopFrameProps {
26  /** Screen content. Falls back to `screenSrc`, then a built-in hero placeholder. */
27  children?: ReactNode;
28  /**
29   * Image *or* video to fill the screen when `children` is omitted. Videos
30   * (.mp4/.webm/.mov/.m4v) play via `<OffthreadVideo>`, images via `<Img>` —
31   * both cover the screen and fade/un-blur in. A root-relative path
32   * (`/showcase-videos/x.mp4`) is served by Next in the Player and rewritten
33   * through `staticFile()` in a render.
34   */
35  screenSrc?: string;
36  /** How the laptop enters. `open` lifts the lid up from the deck. */
37  entrance?: LaptopFrameEntrance;
38  /**
39   * How the shot ends. `zoom-to-screen` dollies the camera into the screen and
40   * un-tilts it until the content fills the frame — a product "screen takeover".
41   * Assumes the frame is the whole composition (the cover scale is derived from
42   * `useVideoConfig`).
43   */
44  finale?: LaptopFrameFinale;
45  /** Lid shell + deck base color. Space-grey by default. */
46  /** Lid colour. Defaults to a dark neutral from the design system. */
47  bezelColor?: string;
48  /** Screen fill behind the content. */
49  /** Screen fill behind `children`. Defaults to the theme's `card`. */
50  screenColor?: string;
51  /** Design-system token overrides — applied to the screen's contents. */
52  theme?: Partial<SnapCnTheme>;
53  mode?: "light" | "dark";
54  /** Notch status indicator. The macOS system green is the look, not a token. */
55  indicatorColor?: string;
56  /** rotateX of the lid at rest, in degrees (positive tips the top back). */
57  restTilt?: number;
58  /** Lid top-corner radius. The bottom corners stay near-square (the hinge). */
59  radius?: number;
60  /** CSS box-shadow under the deck. Empty string disables it. */
61  shadow?: string;
62  /** Uniform size multiplier for the whole machine. */
63  scale?: number;
64  /** Render the notch notification pill. */
65  showNotch?: boolean;
66  /** Text shown in the notch's connected state. */
67  notchLabel?: string;
68// … truncated