Web Mockup

1/**
2 * showcase-web — block-shaped browser/tablet product reveal.
3 *
4 * The template owns the outer scene and caption. SceneBackground owns the
5 * atmosphere, WebMockup owns the device entrance, and ProductSurface (inside
6 * WebMockup) owns screenshot focus, camera motion, and feature annotations.
7 */
8 
9import React from "react";
10import type { VariableField } from "../video-config";
11import type { SceneTemplateProps } from "./types";
12import { resolveTokens } from "../theme";
13import { TemplateText } from "./template-text";
14import type { TextArchetype } from "../typography";
15import { WebMockup } from "../primitives/devices/WebMockup";
16import {
17  productSurfaceDefaults,
18  productSurfaceSchemaFields,
19  resolveProductSurfaceMotion,
20} from "../primitives/devices/product-surface-config";
21import {
22  mediaBackgroundDefaults,
23  mediaBackgroundSchemaFields,
24  SceneBackground,
25} from "./scene-background";
26 
27export const showcaseWebSchema: Record<string, VariableField> = {
28  frame: {
29    type: "enum",
30    label: "Device frame",
31    default: "browser",
32    options: ["browser", "tablet"],
33    description: "browser shows chrome and an address bar; tablet uses a clean product frame.",
34  },
35  texts: {
36    type: "string",
37    label: "Text",
38    default: "See it in action.",
39    required: true,
40    description: "Title text shown above the product.",
41  },
42  screenMediaUrl: {
43    type: "media",
44    label: "Screenshot",
45    description: "Product screenshot shown inside the browser or tablet frame.",
46  },
47  screen1Url: {
48    type: "media",
49    label: "Screen 1",
50    description: "Optional second product screen. Setting it enables slides mode.",
51  },
52  screen2Url: {
53    type: "media",
54    label: "Screen 2",
55    description: "Optional third product screen for slides mode.",
56  },
57  ...productSurfaceSchemaFields,
58  addressBarUrl: {
59    type: "string",
60    label: "Address bar URL",
61    default: "yourapp.com",
62    description: "URL shown in browser chrome; ignored by the tablet frame.",
63  },
64  textColor: {
65    type: "color",
66    label: "Text color",
67    default: "",
68    description: "Override text color; leave empty to use the brand-aware default.",
69  },
70  ...mediaBackgroundSchemaFields,
71};
72 
73export const showcaseWebDefaults: Record<string, unknown> = {
74  frame: "browser",
75  texts: "See it in action.",
76  screenMediaUrl: "",
77  screen1Url: "",
78  screen2Url: "",
79  ...productSurfaceDefaults,
80  addressBarUrl: "yourapp.com",
81  textColor: "",
82  ...mediaBackgroundDefaults,
83};
84 
85// … truncated