CTA Logo

1/**
2 * ctaLogo — Brand-stamp closer.
3 *
4 * Logo (or brand wordmark when no logo is uploaded) centered in the frame.
5 * URL or fallback CTA text sits directly below. Background is media when
6 * a mediaUrl is provided, otherwise the standard brand-color gradient
7 * (same SceneBackground pipeline as `media` and `ctaMedia`).
8 *
9 * The Apple-style sign-off: identity + address, nothing else. Pick this
10 * when the rest of the video did the talking and the close just needs to
11 * stamp who and where.
12 *
13 * FX: shared SPRING_SMOOTH "land" curve over [0, 0.85].
14 *  - Logo: fade + zoom 0.94 → 1.08
15 *  - Wordmark fallback: same fade + zoom + letter-spacing collapse
16 *    (0.4em → -0.02em) — type slowly tightens into place
17 *  - URL: fade + scale + matching letter-spacing collapse (0.3em → 0.01em)
18 */
19 
20import React from "react";
21import type { VariableField } from "../video-config";
22import type { SceneTemplateProps } from "./types";
23import { resolveTokens } from "../theme";
24import {
25  SceneBackground,
26  mediaBackgroundSchemaFields,
27  mediaBackgroundDefaults,
28} from "./scene-background";
29import { WordmarkReveal } from "../primitives/typography/WordmarkReveal";
30 
31export const ctaLogoSchema: Record<string, VariableField> = {
32  brandName: {
33    type: "string",
34    label: "Brand name",
35    default: "YourBrand",
36    required: true,
37    description: "Shown as a wordmark when no logo is uploaded.",
38  },
39  url: {
40    type: "string",
41    label: "URL",
42    default: "yoursite.com",
43    description: "URL shown below the logo. Leave empty to fall back to CTA text.",
44  },
45  cta: {
46    type: "string",
47    label: "CTA fallback",
48    default: "",
49    description: "Optional. Shown ONLY when url is empty — use for 'Coming soon', 'Available now', etc. Leave empty when a URL is set; it would never render.",
50  },
51  ...mediaBackgroundSchemaFields,
52  textColor: {
53    type: "color",
54    label: "Text color",
55    default: "",
56    description: "Override text color (leave empty for white).",
57  },
58};
59 
60export const ctaLogoDefaults: Record<string, unknown> = {
61  brandName: "VanillaSky",
62  url: "yoursite.com",
63  cta: "",
64  ...mediaBackgroundDefaults,
65  textColor: "",
66};
67 
68export const CtaLogoTemplate: React.FC<SceneTemplateProps> = ({
69  variables,
70  style,
71  progress,
72  width,
73  height,
74  sceneDuration,
75  isPlaying,
76}) => {
77  const s = Math.min(width, height) / 1080;
78  const { content, font } = resolveTokens(style);
79  const textColor = String(variables.textColor || "") || content;
80 
81// … truncated