Notification

1/**
2 * social-notification — iOS-style notification card on a media background.
3 *
4 * Card visuals + motion live in the NotificationCard primitive
5 * (src/lib/primitives/social/NotificationCard.tsx). This template wires the
6 * scene background + variable schema + primitive together.
7 */
8 
9import * as React from "react";
10import type { VariableField } from "../video-config";
11import type { SceneTemplateProps } from "./types";
12import { SceneBackground, mediaBackgroundSchemaFields, mediaBackgroundDefaults } from "./scene-background";
13import { NotificationCard } from "../primitives/social/NotificationCard";
14 
15export const socialNotificationSchema: Record<string, VariableField> = {
16  appName: {
17    type: "string",
18    label: "App name",
19    default: "Reminder",
20    required: true,
21    description: "App name shown in the notification header (e.g. Reminder, Lume, Linear, GitHub).",
22  },
23  appIcon: {
24    type: "string",
25    label: "App icon",
26    default: "🔔",
27    description: "Single emoji used as the app icon. Override the default 🔔 to retheme: 📅 reminder, ✅ task done, 💌 message, 🎉 celebration, ⚡ system event.",
28  },
29  message: {
30    type: "string",
31    label: "Message",
32    default: "Believe in your dreams, they will lead you.",
33    required: true,
34    description: "The notification body — 1-2 lines reads best.",
35  },
36  textColor: {
37    type: "color",
38    label: "Text color",
39    default: "",
40    description: "Override text color (leave empty for auto).",
41  },
42  ...mediaBackgroundSchemaFields,
43};
44 
45export const socialNotificationDefaults: Record<string, unknown> = {
46  appName: "Reminder",
47  appIcon: "🔔",
48  message: "Believe in your dreams, they will lead you.",
49  textColor: "",
50  ...mediaBackgroundDefaults,
51};
52 
53export const SocialNotificationTemplate: React.FC<SceneTemplateProps> = ({
54  variables,
55  style,
56  progress,
57  beatIntensity,
58  width,
59  height,
60  sceneDuration,
61  isPlaying = true,
62  backgroundEffect,
63}) => {
64  const message = String(variables.message || "");
65  const gradSeed = message.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
66 
67  return (
68    <div
69      style={{
70        width,
71        height,
72        backgroundColor: "#000",
73        position: "relative",
74        overflow: "hidden",
75        fontFamily: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
76      }}
77    >
78      {/* [slot: background] Gradient / media backdrop */}
79      <SceneBackground
80        style={style}
81        progress={progress}
82// … truncated