Confetti

1/**
2 * bg-confetti — colorful confetti particles bursting and falling.
3 *
4 * Progress-driven particle positions for export compatibility.
5 * Particles burst from center, drift outward, then fall with gravity.
6 */
7 
8import type { VariableField } from "../video-config";
9import type { SceneTemplateProps } from "./types";
10import { resolveTokens } from "../theme";
11import { TemplateText } from "./template-text";
12import type { TextArchetype } from "../typography";
13import { BrandGradientOverlay } from "../backgrounds";
14import { ConfettiLayer } from "./confetti-layer";
15 
16export const bgConfettiSchema: Record<string, VariableField> = {
17  texts: {
18    type: "string",
19    label: "Text",
20    default: "Celebrate.",
21    required: true,
22    description: "Title text shown on the scene",
23  },
24  textColor: {
25    type: "color",
26    label: "Text color",
27    default: "",
28    description: "Override text color (leave empty for auto)",
29  },
30};
31 
32export const bgConfettiDefaults: Record<string, unknown> = {
33  texts: "Celebrate.",
34  textColor: "",
35};
36 
37export const BgConfettiTemplate: React.FC<SceneTemplateProps> = ({
38  variables,
39  style,
40  progress,
41  beatIntensity,
42  width,
43  height,
44  textArchetype,
45  safeZone,
46  sceneDuration,
47}) => {
48  const { accent, secondary, content, font } = resolveTokens(style);
49  const textColor = String(variables.textColor || "") || content;
50 
51  return (
52    <div
53      style={{
54        width,
55        height,
56        backgroundColor: "#000",
57        position: "relative",
58        overflow: "hidden",
59        fontFamily: font,
60      }}
61    >
62      {/* [slot: background] Atomic brand backdrop; no stock media by design. */}
63      <BrandGradientOverlay
64        style={style}
65        progress={progress}
66        sceneDuration={sceneDuration}
67        seed={String(variables.texts || "").split("").reduce((acc, c) => acc + c.charCodeAt(0), 0)}
68      />
69 
70      {/* [slot: badge] Shared particle layer, hue-filtered against the bg gradient. */}
71      <ConfettiLayer
72        progress={progress}
73        width={width}
74        height={height}
75        beatIntensity={beatIntensity}
76        bgColor={style.brandKit?.secondary || accent || secondary}
77      />
78 
79      {/* [slot: caption] */}
80      <TemplateText
81        typeTreatment={resolveTokens(style).preset.type}
82        archetype={(textArchetype as TextArchetype) ?? "subtle"}
83        text={String(variables.texts ?? "")}
84        progress={progress}
85        sceneDuration={sceneDuration ?? 3}
86        width={width}
87// … truncated