Prompt Input

1/**
2 * prompt-input — AI prompt-field demo, centered.
3 *
4 * A small pill with an AI-sparkles icon springs in, expands horizontally
5 * into a full-width prompt bar, then types out a sample prompt character
6 * by character. Use to showcase HOW a user prompts the product — the
7 * prompt UX itself becomes the focal element. Pairs with any modern
8 * "ask the AI" / "describe what you want" / "type your prompt" affordance.
9 *
10 * Centered on a solid background (or media if the user sets one). No
11 * other text — the prompt form is the entire scene.
12 */
13 
14import * as React from "react";
15import type { VariableField } from "../video-config";
16import type { SceneTemplateProps } from "./types";
17import {
18  SceneBackground,
19  mediaBackgroundSchemaFields,
20  mediaBackgroundDefaults,
21} from "./scene-background";
22import { stripPipe } from "../typography";
23import { PromptInputPill } from "../primitives/typography/PromptInputPill";
24 
25export const promptInputSchema: Record<string, VariableField> = {
26  promptText: {
27    type: "string",
28    label: "Prompt text",
29    default: "Make a launch video for our app",
30    required: true,
31    description:
32      "Example prompt that types into the AI prompt bar. 3-7 words / ~25-40 characters reads best. Longer prompts auto-shrink the font-size to fit the pill width, but stay most legible at the natural size. Demonstrates the product's prompt UX (e.g. 'Make a launch video for our app', 'Generate a customer testimonial', 'Build a 6-second product showcase').",
33  },
34  pillBg: {
35    type: "color",
36    label: "Pill background",
37    default: "",
38    description: "Prompt-pill background color. Leave empty for white.",
39  },
40  pillTextColor: {
41    type: "color",
42    label: "Pill text color",
43    default: "",
44    description: "Color of the prompt text. Leave empty for slate-grey (#374151, the AI-prompt-UI standard) — feels more considered than raw black.",
45  },
46  ...mediaBackgroundSchemaFields,
47};
48 
49export const promptInputDefaults: Record<string, unknown> = {
50  promptText: "Make a launch video for our app",
51  pillBg: "",
52  pillTextColor: "",
53  ...mediaBackgroundDefaults,
54};
55 
56export const PromptInputTemplate: React.FC<SceneTemplateProps> = ({
57  variables,
58  style,
59  progress,
60  beatIntensity,
61  width,
62  height,
63  sceneDuration,
64  isPlaying = true,
65  backgroundEffect,
66}) => {
67  const font = `${style.font ? `${style.font}, ` : ""}Inter, -apple-system, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif`;
68 
69// … truncated