Phone Mockup

1/**
2 * showcase-phone — iPhone mockup with optional sliding screens.
3 *
4 * Single mode: one phone with screenMediaUrl or placeholder.
5 * Slides mode (when screen1Url is set): same big phone, 3 screens slide inside the device.
6 */
7 
8import React from "react";
9import type { VariableField } from "../video-config";
10import type { SceneTemplateProps } from "./types";
11import { resolveTokens } from "../theme";
12import { TemplateText } from "./template-text";
13import type { TextArchetype } from "../typography";
14import { PhoneFrame } from "../primitives/devices/PhoneFrame";
15import {
16  productSurfaceDefaults,
17  productSurfaceSchemaFields,
18  resolveProductSurfaceMotion,
19} from "../primitives/devices/product-surface-config";
20import {
21  mediaBackgroundDefaults,
22  mediaBackgroundSchemaFields,
23  SceneBackground,
24} from "./scene-background";
25 
26// ─── Schema & Defaults ─────────────────────────────────────────
27 
28export const showcasePhoneSchema: Record<string, VariableField> = {
29  texts: {
30    type: "string",
31    label: "Text",
32    default: "See it in action.",
33    required: true,
34    description: "Title text shown on the scene",
35  },
36  screenMediaUrl: {
37    type: "media",
38    label: "Screen screenshot",
39    description: "Screenshot to show on the phone screen",
40  },
41  screen1Url: {
42    type: "media",
43    label: "Screen 1",
44    default: "",
45    description: "Set to enable slides mode — screens slide inside the phone",
46  },
47  screen2Url: {
48    type: "media",
49    label: "Screen 2",
50    default: "",
51    description: "Second screen (slides mode)",
52  },
53  ...productSurfaceSchemaFields,
54  textColor: {
55    type: "color",
56    label: "Text color",
57    default: "",
58    description: "Override text color (leave empty for auto)",
59  },
60  ...mediaBackgroundSchemaFields,
61};
62 
63export const showcasePhoneDefaults: Record<string, unknown> = {
64  texts: "See it in action.",
65  screenMediaUrl: "",
66  screen1Url: "",
67  screen2Url: "",
68  ...productSurfaceDefaults,
69  textColor: "",
70  ...mediaBackgroundDefaults,
71};
72 
73// ─── Component ──────────────────────────────────────────────────
74 
75export const ShowcasePhoneTemplate: React.FC<SceneTemplateProps> = ({
76  variables,
77  style,
78  progress,
79  beatIntensity,
80  width,
81  height,
82  textArchetype,
83  safeZone,
84  sceneDuration,
85  backgroundEffect,
86  isPlaying,
87}) => {
88// … truncated