Phone 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 { type SnapCnTheme, useSnapCnTheme, withAlpha } from "@/lib/snap-cn-ui";
15 
16export type PhoneFrameVariant = "flat" | "tilt" | "showcase";
17export type PhoneFrameEntrance = "rise" | "rotate-in" | "float";
18 
19export interface PhoneFrameProps {
20  /** Screen content. Falls back to `screenSrc`, then the ride-summary placeholder. */
21  children?: ReactNode;
22  /**
23   * Image *or* video to fill the screen when `children` is omitted. Videos
24   * (.mp4/.webm/.mov/.m4v) play via `<OffthreadVideo>`, images via `<Img>` —
25   * both cover-fit the screen.
26   */
27  screenSrc?: string;
28  /**
29   * `flat` faces the camera; `tilt` adds a static 3D rotateY; `showcase` is a
30   * cinematic crane move — the camera starts low at the bottom-left corner of
31   * the laid-back device, sweeps up the screen while zooming in, then pulls
32   * back and settles on a straight frontal view.
33   */
34  variant?: PhoneFrameVariant;
35  /** How the device enters the frame. */
36  entrance?: PhoneFrameEntrance;
37  /** Device shell color. Defaults to the theme's `foreground`. */
38  bezelColor?: string;
39  /** Screen fill behind the children. Defaults to the theme's `card`. */
40  screenColor?: string;
41  /** Design-system token overrides. */
42  theme?: Partial<SnapCnTheme>;
43  mode?: "light" | "dark";
44  /** Outer body corner radius. Defaults to real-device curvature. */
45  radius?: number;
46  /** Screen corner radius. Defaults to `radius - bezel` (concentric corners). */
47  screenRadius?: number;
48  /** CSS box-shadow under the device. Empty string disables it. */
49  shadow?: string;
50  /** Uniform size multiplier for the whole device. */
51  scale?: number;
52  /** Render the dynamic-island cutout over the screen. */
53  showDynamicIsland?: boolean;
54  /** Gentle vertical bob after the entrance settles. */
55  floatLoop?: boolean;
56  /** Peak float displacement in pixels. */
57  floatAmplitude?: number;
58  /** rotateY angle (degrees) used by the `tilt` variant. */
59  tiltAngle?: number;
60  speed?: number;
61  className?: string;
62}
63 
64const FONT_FAMILY =
65  'Inter, var(--font-geist-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
66 
67/** Device shell size — matches the ~0.488 width:height ratio of a real iPhone. */
68export const DEVICE_WIDTH = 320;
69export const DEVICE_HEIGHT = 656;
70 
71// … truncated