Emoji Burst

1/**
2 * bg-emoji — emoji characters bursting outward like fireworks.
3 *
4 * Progress-driven particle positions for export compatibility.
5 * Emojis 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 { Emoji } from "../emoji";
15 
16export const bgEmojiSchema: Record<string, VariableField> = {
17  texts: {
18    type: "string",
19    label: "Text",
20    default: "Let's go!",
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 bgEmojiDefaults: Record<string, unknown> = {
33  texts: "Let's go!",
34  textColor: "",
35};
36 
37function seededRandom(seed: number): number {
38  const x = Math.sin(seed * 12.9898 + seed * 78.233) * 43758.5453;
39  return x - Math.floor(x);
40}
41 
42const EMOJI_LIST = [
43  "\u2764\uFE0F",     // red heart
44  "\u2B50",           // star
45  "\uD83C\uDF89",     // party popper
46  "\uD83E\uDD84",     // unicorn
47  "\uD83D\uDD25",     // fire
48  "\u2728",           // sparkles
49  "\uD83D\uDE80",     // rocket
50  "\uD83D\uDC9C",     // purple heart
51];
52 
53const PARTICLE_COUNT = 100;
54 
55// Physics: even angular fan-out (360°) from center. Emojis fly radially
56// outward in their launch direction until they exit the frame — no falling
57// trajectory, which previously read as "celebration failed". A very gentle
58// gravity tugs them slightly downward over time so the motion still feels
59// natural. No 3D flip — flipped emojis read backwards.
60 
61function easeOutQuad(p: number): number {
62  return 1 - (1 - p) * (1 - p);
63}
64 
65export const BgEmojiTemplate: React.FC<SceneTemplateProps> = ({
66  variables,
67  style,
68  progress,
69  beatIntensity,
70  width,
71  height,
72  textArchetype,
73  safeZone,
74  sceneDuration,
75}) => {
76  const s = Math.min(width, height) / 1080;
77  /* Radial burst — sized off the long edge so even particles launched
78   * along the long axis exit the frame by progress=1. Half-diagonal of
79   * a 9:16 frame ≈ 0.61 * longEdge; 0.95 leaves ~35% headroom past the
80   * corner so emojis are clearly travelling, not parked at the edge. */
81  const BURST_RADIUS = Math.max(width, height) * 0.95;
82// … truncated