create-analytics-demo 1.0.0

package/template/src/Composition.tsx

@@ -0,0 +1,476 @@
+import {
+  AbsoluteFill,
+  interpolate,
+  useCurrentFrame,
+  spring,
+  useVideoConfig,
+  Sequence,
+} from "remotion";
+import React from "react";
+import { config } from "./demo.config";
+import { IPhoneFrame } from "./components/IPhoneFrame";
+import { EventParticle } from "./components/EventParticle";
+import { TouchRipple } from "./components/TouchRipple";
+import { CodePanel } from "./components/CodePanel";
+import { ServiceLogoCard } from "./components/ServiceLogo";
+import { SplashScreen } from "./screens/SplashScreen";
+import { LoginScreen } from "./screens/LoginScreen";
+import { HomeScreen } from "./screens/HomeScreen";
+
+const { theme } = config;
+const [primary, secondary] = config.services;
+
+// ── Scene 1: App Launch — Anonymous Device ID ───────────────────────────────
+
+const SceneAppLaunch: React.FC = () => {
+  const frame = useCurrentFrame();
+  return (
+    <AbsoluteFill
+      style={{
+        background:
+          "linear-gradient(135deg, #0a0a12 0%, #12121f 50%, #0a0a12 100%)",
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          top: 30,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+        }}
+      >
+        <h1
+          style={{
+            color: "white",
+            fontSize: 32,
+            fontFamily: "system-ui",
+            margin: 0,
+            fontWeight: "700",
+          }}
+        >
+          App Launch — Anonymous User
+        </h1>
+      </div>
+
+      <div style={{ position: "absolute", left: 100, top: 100 }}>
+        <IPhoneFrame>
+          <SplashScreen />
+        </IPhoneFrame>
+      </div>
+
+      <ServiceLogoCard
+        service={primary}
+        x={900}
+        y={180}
+        delay={10}
+        isActive={frame > 40}
+      />
+      <ServiceLogoCard
+        service={secondary}
+        x={900}
+        y={380}
+        delay={20}
+        isActive={frame > 60}
+      />
+
+      <EventParticle
+        startFrame={40}
+        startX={380}
+        startY={350}
+        endX={920}
+        endY={220}
+        color={primary.color}
+        label="getDeviceId()"
+      />
+      <EventParticle
+        startFrame={60}
+        startX={380}
+        startY={350}
+        endX={920}
+        endY={420}
+        color={secondary.color}
+        label="changeUser(deviceId)"
+      />
+
+      <CodePanel
+        title="IdentityManager.swift"
+        lines={[
+          "// Anonymous user — use Device ID",
+          "let deviceId = analytics.getDeviceId()",
+          "",
+          "// Don't set userId for anonymous",
+          "analytics.setUserId(nil)",
+          "",
+          `// Use Device ID as ${secondary.name} external ID`,
+          "engagement.changeUser(",
+          "    externalId: deviceId",
+          ")",
+        ]}
+        startFrame={35}
+        x={480}
+        y={280}
+      />
+    </AbsoluteFill>
+  );
+};
+
+// ── Scene 2: Login — Set User ID ────────────────────────────────────────────
+
+const SceneLogin: React.FC = () => {
+  const frame = useCurrentFrame();
+  const showSuccess = frame > 50;
+  return (
+    <AbsoluteFill
+      style={{
+        background:
+          "linear-gradient(135deg, #0a0a12 0%, #12121f 50%, #0a0a12 100%)",
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          top: 30,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+        }}
+      >
+        <h1
+          style={{
+            color: "white",
+            fontSize: 32,
+            fontFamily: "system-ui",
+            margin: 0,
+            fontWeight: "700",
+          }}
+        >
+          User Login — Set Identity
+        </h1>
+      </div>
+
+      <div style={{ position: "absolute", left: 100, top: 100 }}>
+        <IPhoneFrame>
+          <LoginScreen showSuccess={showSuccess} />
+          <TouchRipple x={140} y={280} frame={frame} startFrame={35} />
+        </IPhoneFrame>
+      </div>
+
+      <ServiceLogoCard
+        service={primary}
+        x={900}
+        y={180}
+        delay={0}
+        isActive={frame > 55}
+      />
+      <ServiceLogoCard
+        service={secondary}
+        x={900}
+        y={380}
+        delay={0}
+        isActive={frame > 85}
+      />
+
+      <EventParticle
+        startFrame={55}
+        startX={380}
+        startY={350}
+        endX={920}
+        endY={220}
+        color={primary.color}
+        label="setUserId(uid)"
+      />
+      <EventParticle
+        startFrame={70}
+        startX={380}
+        startY={320}
+        endX={920}
+        endY={220}
+        color={primary.color}
+        label="Login Completed"
+      />
+      <EventParticle
+        startFrame={85}
+        startX={380}
+        startY={380}
+        endX={920}
+        endY={420}
+        color={secondary.color}
+        label="changeUser(uid)"
+      />
+
+      <CodePanel
+        title="AuthManager.swift"
+        lines={[
+          "// Authenticated user — use Firebase UID",
+          "let userId = user.uid",
+          "",
+          `// Set ${primary.name} user ID`,
+          "analytics.setUserId(userId)",
+          "",
+          `// Set ${secondary.name} external ID`,
+          "engagement.changeUser(",
+          "    externalId: userId",
+          ")",
+          "",
+          "// Track login event",
+          "analytics.track(",
+          '    event: "Login Completed",',
+          '    properties: ["method": "email"]',
+          ")",
+        ]}
+        startFrame={50}
+        x={480}
+        y={220}
+      />
+    </AbsoluteFill>
+  );
+};
+
+// ── Scene 3: Summary ────────────────────────────────────────────────────────
+
+const SceneSummary: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const items = [
+    {
+      icon: "\u{1F511}",
+      text: "Identity Management",
+      subtext: "Device ID \u2192 User ID on login",
+      delay: 15,
+      color: "#9C27B0",
+    },
+    {
+      icon: "\u{1F4CA}",
+      text: "Analytics Events",
+      subtext: "Track user actions across the app",
+      delay: 35,
+      color: primary.color,
+    },
+    {
+      icon: "\u{1F514}",
+      text: "Engagement",
+      subtext: "Push notifications & campaigns",
+      delay: 55,
+      color: secondary.color,
+    },
+  ];
+
+  const logoScale = spring({ frame, fps, config: { damping: 40 } });
+
+  return (
+    <AbsoluteFill
+      style={{
+        background:
+          "linear-gradient(135deg, #0a0a12 0%, #12121f 50%, #0a0a12 100%)",
+        alignItems: "center",
+      }}
+    >
+      {/* App icon */}
+      <div
+        style={{
+          position: "absolute",
+          top: 60,
+          width: 90,
+          height: 90,
+          borderRadius: 22,
+          background: `linear-gradient(135deg, ${theme.accent}, ${theme.accentSoft})`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: 44,
+          color: "white",
+          fontWeight: "bold",
+          transform: `scale(${logoScale})`,
+        }}
+      >
+        {config.appName.charAt(0)}
+      </div>
+
+      <div style={{ position: "absolute", top: 165, textAlign: "center" }}>
+        <h1
+          style={{
+            color: "white",
+            fontSize: 38,
+            fontFamily: "system-ui",
+            margin: 0,
+            fontWeight: "700",
+          }}
+        >
+          {config.appName}
+        </h1>
+        <p
+          style={{
+            color: theme.accent,
+            fontSize: 18,
+            fontFamily: "system-ui",
+            marginTop: 6,
+          }}
+        >
+          Analytics & Engagement Stack
+        </p>
+      </div>
+
+      <div
+        style={{
+          position: "absolute",
+          top: 260,
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+          width: 500,
+        }}
+      >
+        {items.map((item, i) => {
+          const itemScale = spring({
+            frame: frame - item.delay,
+            fps,
+            config: { damping: 40 },
+          });
+          const itemOpacity = interpolate(
+            frame - item.delay,
+            [0, 15],
+            [0, 1],
+            { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+          );
+          return (
+            <div
+              key={i}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 16,
+                transform: `scale(${Math.max(0, itemScale)})`,
+                opacity: Math.max(0, itemOpacity),
+                background: theme.surface,
+                padding: "12px 18px",
+                borderRadius: 16,
+                border: `1px solid ${theme.stroke}`,
+              }}
+            >
+              <div
+                style={{
+                  width: 46,
+                  height: 46,
+                  borderRadius: 12,
+                  background: `${item.color}22`,
+                  border: `2px solid ${item.color}`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: 22,
+                }}
+              >
+                {item.icon}
+              </div>
+              <div>
+                <div
+                  style={{
+                    color: "white",
+                    fontSize: 16,
+                    fontWeight: "600",
+                    fontFamily: "system-ui",
+                  }}
+                >
+                  {item.text}
+                </div>
+                <div
+                  style={{
+                    color: theme.textSecondary,
+                    fontSize: 12,
+                    fontFamily: "system-ui",
+                  }}
+                >
+                  {item.subtext}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Service logos at bottom */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: 50,
+          display: "flex",
+          gap: 50,
+          alignItems: "center",
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+          <svg width={45} height={45} viewBox="0 0 100 100" fill="none">
+            <rect width="100" height="100" rx="20" fill={primary.color} />
+            <path
+              d="M25 70 L35 45 L45 55 L55 30 L65 50 L75 25"
+              stroke="white"
+              strokeWidth="6"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+            <circle cx="75" cy="25" r="6" fill="white" />
+          </svg>
+          <span
+            style={{
+              color: "white",
+              fontSize: 18,
+              fontFamily: "system-ui",
+              fontWeight: "600",
+            }}
+          >
+            {primary.name}
+          </span>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+          <div
+            style={{
+              width: 45,
+              height: 45,
+              borderRadius: 12,
+              background: secondary.color,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "white",
+              fontWeight: "bold",
+              fontSize: 18,
+            }}
+          >
+            {secondary.name.charAt(0)}
+          </div>
+          <span
+            style={{
+              color: "white",
+              fontSize: 18,
+              fontFamily: "system-ui",
+              fontWeight: "600",
+            }}
+          >
+            {secondary.name}
+          </span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ── Main Composition — 3 starter scenes ─────────────────────────────────────
+
+export const MyComposition = () => {
+  return (
+    <AbsoluteFill>
+      <Sequence from={0} durationInFrames={200}>
+        <SceneAppLaunch />
+      </Sequence>
+      <Sequence from={200} durationInFrames={200}>
+        <SceneLogin />
+      </Sequence>
+      <Sequence from={400} durationInFrames={200}>
+        <SceneSummary />
+      </Sequence>
+    </AbsoluteFill>
+  );
+};

package/template/src/Root.tsx

@@ -0,0 +1,18 @@
+import { Composition } from "remotion";
+import { MyComposition } from "./Composition";
+import { config } from "./demo.config";
+
+export const RemotionRoot: React.FC = () => {
+  return (
+    <>
+      <Composition
+        id="MyComp"
+        component={MyComposition}
+        durationInFrames={config.video.durationInFrames}
+        fps={config.video.fps}
+        width={config.video.width}
+        height={config.video.height}
+      />
+    </>
+  );
+};

package/template/src/components/CodePanel.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+
+/** Code panel for Remotion scenes (animated slide-in with syntax coloring) */
+export const CodePanel: React.FC<{
+  lines: string[];
+  startFrame: number;
+  x: number;
+  y: number;
+  title: string;
+}> = ({ lines, startFrame, x, y, title }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const localFrame = frame - startFrame;
+  if (localFrame < 0) return null;
+
+  const slideIn = spring({
+    frame: localFrame,
+    fps,
+    config: { damping: 30, stiffness: 100 },
+  });
+  const panelOpacity = interpolate(localFrame, [0, 15], [0, 1], {
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: x,
+        top: y,
+        transform: `translateX(${interpolate(slideIn, [0, 1], [50, 0])}px)`,
+        opacity: panelOpacity,
+        background: "#1e1e2e",
+        borderRadius: 12,
+        padding: 14,
+        border: "1px solid #333",
+        boxShadow: "0 20px 60px rgba(0,0,0,0.5)",
+        minWidth: 360,
+      }}
+    >
+      {/* Traffic lights + filename */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          marginBottom: 10,
+        }}
+      >
+        <div style={{ display: "flex", gap: 6 }}>
+          <div
+            style={{
+              width: 10,
+              height: 10,
+              borderRadius: 5,
+              background: "#FF5F56",
+            }}
+          />
+          <div
+            style={{
+              width: 10,
+              height: 10,
+              borderRadius: 5,
+              background: "#FFBD2E",
+            }}
+          />
+          <div
+            style={{
+              width: 10,
+              height: 10,
+              borderRadius: 5,
+              background: "#27CA40",
+            }}
+          />
+        </div>
+        <span
+          style={{
+            color: "#666",
+            fontSize: 11,
+            fontFamily: "monospace",
+            marginLeft: 8,
+          }}
+        >
+          {title}
+        </span>
+      </div>
+
+      {/* Code lines */}
+      <div
+        style={{
+          fontFamily: "SF Mono, Menlo, monospace",
+          fontSize: 11,
+          lineHeight: 1.5,
+        }}
+      >
+        {lines.map((line, i) => {
+          const lineDelay = startFrame + 8 + i * 4;
+          const lineOpacity = interpolate(frame - lineDelay, [0, 5], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          let color = "#ABB2BF";
+          if (
+            line.includes("analytics.") ||
+            line.includes("braze.") ||
+            line.includes("engagementClient") ||
+            line.includes("engagement.")
+          )
+            color = "#61AFEF";
+          else if (
+            line.includes("setUserId") ||
+            line.includes("changeUser") ||
+            line.includes("getDeviceId")
+          )
+            color = "#E5C07B";
+          else if (line.includes('"')) color = "#98C379";
+          else if (line.match(/\d+\.\d+/) || line.match(/: \d+/))
+            color = "#D19A66";
+          else if (line.includes("//")) color = "#5C6370";
+          return (
+            <div key={i} style={{ opacity: lineOpacity, color, whiteSpace: "pre" }}>
+              {line}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/template/src/components/EventParticle.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
+
+export const EventParticle: React.FC<{
+  startFrame: number;
+  startX: number;
+  startY: number;
+  endX: number;
+  endY: number;
+  color: string;
+  label: string;
+}> = ({ startFrame, startX, startY, endX, endY, color, label }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const localFrame = frame - startFrame;
+  if (localFrame < 0 || localFrame > 50) return null;
+
+  const progress = spring({
+    frame: localFrame,
+    fps,
+    config: { damping: 25, stiffness: 80 },
+  });
+  const midX = (startX + endX) / 2;
+  const midY = Math.min(startY, endY) - 100;
+  const t = progress;
+  const x =
+    (1 - t) * (1 - t) * startX + 2 * (1 - t) * t * midX + t * t * endX;
+  const y =
+    (1 - t) * (1 - t) * startY + 2 * (1 - t) * t * midY + t * t * endY;
+  const scale = interpolate(localFrame, [0, 10, 40, 50], [0, 1.2, 1, 0], {
+    extrapolateRight: "clamp",
+  });
+  const opacity = interpolate(localFrame, [40, 50], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: x - 60,
+        top: y - 12,
+        transform: `scale(${scale})`,
+        opacity,
+        background: color,
+        padding: "6px 14px",
+        borderRadius: 20,
+        color: "white",
+        fontSize: 11,
+        fontFamily: "SF Mono, monospace",
+        fontWeight: "600",
+        boxShadow: `0 4px 20px ${color}66`,
+        whiteSpace: "nowrap",
+      }}
+    >
+      {label}
+    </div>
+  );
+};