create-analytics-demo 1.0.0

package/template/src/components/IPhoneFrame.tsx

@@ -0,0 +1,174 @@
+import React from "react";
+import { config } from "../demo.config";
+
+const { theme } = config;
+
+/** iPhone frame wrapper for Remotion scenes */
+export const IPhoneFrame: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div
+    style={{
+      width: 280,
+      height: 580,
+      borderRadius: 45,
+      background: "linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%)",
+      padding: 8,
+      boxShadow:
+        "0 25px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1)",
+      position: "relative",
+    }}
+  >
+    {/* Notch */}
+    <div
+      style={{
+        position: "absolute",
+        top: 18,
+        left: "50%",
+        transform: "translateX(-50%)",
+        width: 90,
+        height: 26,
+        background: "#000",
+        borderRadius: 20,
+        zIndex: 100,
+      }}
+    />
+    {/* Screen */}
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        borderRadius: 38,
+        overflow: "hidden",
+        background: `linear-gradient(160deg, ${theme.bg} 0%, ${theme.bgGradient} 50%, #0a0a12 100%)`,
+        position: "relative",
+      }}
+    >
+      {children}
+    </div>
+  </div>
+);
+
+/** Smaller phone frame for the live demo visualization */
+export const MiniIPhoneFrame: React.FC = () => (
+  <div
+    style={{
+      width: 200,
+      height: 420,
+      borderRadius: 32,
+      background: "linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%)",
+      padding: 5,
+      boxShadow:
+        "0 25px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1)",
+      position: "relative",
+    }}
+  >
+    <div
+      style={{
+        position: "absolute",
+        top: 12,
+        left: "50%",
+        transform: "translateX(-50%)",
+        width: 60,
+        height: 20,
+        background: "#000",
+        borderRadius: 16,
+        zIndex: 100,
+      }}
+    />
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        borderRadius: 28,
+        overflow: "hidden",
+        background: `linear-gradient(160deg, ${theme.bg} 0%, ${theme.bgGradient} 100%)`,
+        position: "relative",
+      }}
+    >
+      <div style={{ padding: "36px 8px 8px", height: "100%" }}>
+        <div
+          style={{
+            fontSize: 7,
+            color: theme.textSecondary,
+            marginBottom: 2,
+          }}
+        >
+          DELIVERING TO
+        </div>
+        <div
+          style={{
+            fontSize: 9,
+            color: theme.textPrimary,
+            fontWeight: "600",
+            marginBottom: 8,
+          }}
+        >
+          123 Main Street
+        </div>
+        <div
+          style={{
+            background: theme.surface,
+            borderRadius: 6,
+            padding: "5px 6px",
+            marginBottom: 8,
+            border: `1px solid ${theme.stroke}`,
+          }}
+        >
+          <span style={{ color: theme.textSecondary, fontSize: 8 }}>
+            Search...
+          </span>
+        </div>
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(4, 1fr)",
+            gap: 3,
+            marginBottom: 8,
+          }}
+        >
+          {config.categories.map((cat, i) => (
+            <div
+              key={i}
+              style={{
+                background: theme.surface,
+                borderRadius: 5,
+                padding: 3,
+                textAlign: "center",
+              }}
+            >
+              <span style={{ fontSize: 10 }}>{cat.emoji}</span>
+            </div>
+          ))}
+        </div>
+        <div style={{ background: theme.surface, borderRadius: 8, overflow: "hidden" }}>
+          <div
+            style={{
+              background: "linear-gradient(135deg, #2a2a3e, #1a1a2e)",
+              height: 40,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <span style={{ fontSize: 16 }}>
+              {config.categories[0]?.emoji || ""}
+            </span>
+          </div>
+          <div style={{ padding: 5 }}>
+            <div
+              style={{
+                fontSize: 8,
+                color: theme.textPrimary,
+                fontWeight: "600",
+              }}
+            >
+              Featured Store
+            </div>
+            <div style={{ fontSize: 6, color: theme.textSecondary }}>
+              4.8 - 20-30 min
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);

package/template/src/components/LiveCodePanel.tsx

@@ -0,0 +1,196 @@
+import React from "react";
+import { config } from "../demo.config";
+
+const { theme } = config;
+
+interface AnalyticsEvent {
+  event: string;
+  userId: string | null;
+  deviceId: string;
+  properties: Record<string, any>;
+  timestamp: string;
+}
+
+/** Code panel overlay shown in the live demo when clicking an event */
+export const LiveCodePanel: React.FC<{
+  event: AnalyticsEvent;
+  onClose: () => void;
+}> = ({ event, onClose }) => {
+  const category = getEventCategory(event.event);
+  const goesToSecondary = shouldGoToSecondary(event.event);
+  const snippet = config.codeSnippets[event.event.toLowerCase()];
+  const [primary, secondary] = config.services;
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        left: "50%",
+        top: "50%",
+        transform: "translate(-50%, -50%)",
+        background: "#1e1e2e",
+        borderRadius: 14,
+        padding: 20,
+        border: "1px solid #444",
+        boxShadow: "0 25px 80px rgba(0,0,0,0.8)",
+        minWidth: 420,
+        maxWidth: 520,
+        zIndex: 1000,
+        animation: "fadeIn 0.2s ease",
+      }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {/* Header */}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: 12,
+          paddingBottom: 10,
+          borderBottom: "1px solid #333",
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <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 }}>
+            {snippet?.file || "AnalyticsClient.swift"}
+          </span>
+        </div>
+        <button
+          onClick={onClose}
+          style={{ background: "none", border: "none", color: "#666", cursor: "pointer", fontSize: 20, padding: "0 8px", lineHeight: 1 }}
+        >
+          x
+        </button>
+      </div>
+
+      {/* Badges */}
+      <div style={{ display: "flex", gap: 8, marginBottom: 14, flexWrap: "wrap" }}>
+        <span
+          style={{
+            background: `rgba(252, 91, 64, 0.2)`,
+            color: theme.accent,
+            padding: "4px 10px",
+            borderRadius: 12,
+            fontSize: 10,
+            fontWeight: 600,
+          }}
+        >
+          {category}
+        </span>
+        <span
+          style={{
+            background: `${primary.color}33`,
+            color: primary.color,
+            padding: "4px 10px",
+            borderRadius: 12,
+            fontSize: 10,
+            fontWeight: 600,
+          }}
+        >
+          &rarr; {primary.name}
+        </span>
+        {goesToSecondary && (
+          <span
+            style={{
+              background: `${secondary.color}33`,
+              color: secondary.color,
+              padding: "4px 10px",
+              borderRadius: 12,
+              fontSize: 10,
+              fontWeight: 600,
+            }}
+          >
+            &rarr; {secondary.name}
+          </span>
+        )}
+      </div>
+
+      {/* Code */}
+      <div
+        style={{
+          fontFamily: "SF Mono, Menlo, monospace",
+          fontSize: 12,
+          lineHeight: 1.7,
+          background: "#16161e",
+          padding: 14,
+          borderRadius: 8,
+          maxHeight: 300,
+          overflowY: "auto",
+        }}
+      >
+        {snippet ? (
+          snippet.code.map((line, i) => {
+            let color = "#ABB2BF";
+            if (line.trim().startsWith("//")) color = "#5C6370";
+            else if (line.includes("func ") || line.includes("var ") || line.includes("let ")) color = "#C678DD";
+            else if (line.includes(".track(") || line.includes(".setUserId") || line.includes(".changeUser")) color = "#61AFEF";
+            return <div key={i} style={{ color, whiteSpace: "pre" }}>{line}</div>;
+          })
+        ) : (
+          <>
+            <div style={{ color: "#ABB2BF" }}>
+              <span style={{ color: "#61AFEF" }}>analytics</span>.
+              <span style={{ color: "#E5C07B" }}>track</span>(
+            </div>
+            <div style={{ color: "#ABB2BF" }}>
+              {"    "}event: <span style={{ color: "#98C379" }}>"{event.event}"</span>,
+            </div>
+            <div style={{ color: "#ABB2BF" }}>{"    "}properties: [</div>
+            {Object.entries(event.properties || {}).map(([key, value], i) => (
+              <div key={i} style={{ color: "#ABB2BF" }}>
+                {"        "}
+                <span style={{ color: "#98C379" }}>"{key}"</span>:{" "}
+                <span style={{ color: "#D19A66" }}>
+                  {typeof value === "string"
+                    ? `"${value.slice(0, 30)}${value.length > 30 ? "..." : ""}"`
+                    : JSON.stringify(value)}
+                </span>
+                ,
+              </div>
+            ))}
+            <div style={{ color: "#ABB2BF" }}>{"    "}]</div>
+            <div style={{ color: "#ABB2BF" }}>)</div>
+          </>
+        )}
+      </div>
+
+      {/* User info */}
+      <div
+        style={{
+          marginTop: 12,
+          paddingTop: 10,
+          borderTop: "1px solid #333",
+          color: "#5C6370",
+          fontSize: 11,
+          fontFamily: "SF Mono, monospace",
+        }}
+      >
+        {event.userId
+          ? `userId: "${event.userId}"`
+          : `deviceId: "${event.deviceId || "unknown"}"`}
+      </div>
+    </div>
+  );
+};
+
+// ── Helpers ─────────────────────────────────────────────────────────────────
+
+function getEventCategory(eventName: string): string {
+  return config.eventCategories[eventName.toLowerCase()] || "Analytics";
+}
+
+function shouldGoToSecondary(eventName: string): boolean {
+  const normalized = eventName.toLowerCase().replace(/[_\s]/g, "");
+  return config.secondaryServiceEvents.some(
+    (e) => normalized.includes(e.toLowerCase().replace(/[_\s]/g, ""))
+  );
+}
+
+export { getEventCategory, shouldGoToSecondary };
+export type { AnalyticsEvent };

package/template/src/components/ServiceLogo.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  spring,
+  interpolate,
+  Img,
+  staticFile,
+} from "remotion";
+import { config } from "../demo.config";
+
+/** Built-in Amplitude-style SVG logo */
+const AmplitudeSvg: React.FC<{ size: number; color: string }> = ({
+  size,
+  color,
+}) => (
+  <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
+    <rect width="100" height="100" rx="20" fill={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>
+);
+
+/** Renders the logo for a service (SVG built-in or image from public/) */
+export const ServiceLogoImg: React.FC<{
+  service: (typeof config.services)[number];
+  size?: number;
+}> = ({ service, size = 60 }) => {
+  if (service.logo === "svg") {
+    return <AmplitudeSvg size={size} color={service.color} />;
+  }
+  return (
+    <Img
+      src={staticFile(service.logo)}
+      style={{ width: size, height: size, objectFit: "contain" }}
+    />
+  );
+};
+
+/** Service logo card used in Remotion scenes (with spring animation) */
+export const ServiceLogoCard: React.FC<{
+  service: (typeof config.services)[number];
+  x: number;
+  y: number;
+  delay: number;
+  isActive?: boolean;
+}> = ({ service, x, y, delay, isActive = false }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const appear = spring({
+    frame: frame - delay,
+    fps,
+    config: { damping: 40, stiffness: 100 },
+  });
+  const pulse = isActive ? 1 + Math.sin(frame * 0.3) * 0.05 : 1;
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: x,
+        top: y,
+        transform: `scale(${Math.max(0, appear) * pulse})`,
+        opacity: Math.max(
+          0,
+          interpolate(frame - delay, [0, 15], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          })
+        ),
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 10,
+      }}
+    >
+      <div
+        style={{
+          borderRadius: 20,
+          boxShadow: isActive
+            ? `0 0 40px ${service.color}`
+            : "0 10px 40px rgba(0,0,0,0.4)",
+        }}
+      >
+        <ServiceLogoImg service={service} size={70} />
+      </div>
+      <div
+        style={{
+          color: "white",
+          fontSize: 16,
+          fontWeight: "600",
+          fontFamily: "system-ui",
+        }}
+      >
+        {service.name}
+      </div>
+    </div>
+  );
+};

package/template/src/components/TouchRipple.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { interpolate } from "remotion";
+
+export const TouchRipple: React.FC<{
+  x: number;
+  y: number;
+  frame: number;
+  startFrame: number;
+}> = ({ x, y, frame, startFrame }) => {
+  const localFrame = frame - startFrame;
+  if (localFrame < 0 || localFrame > 30) return null;
+
+  const scale1 = interpolate(localFrame, [0, 20], [0, 2], {
+    extrapolateRight: "clamp",
+  });
+  const opacity1 = interpolate(localFrame, [0, 20], [0.6, 0], {
+    extrapolateRight: "clamp",
+  });
+  const dotScale = interpolate(localFrame, [0, 5, 15], [0, 1, 0], {
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <>
+      <div
+        style={{
+          position: "absolute",
+          left: x - 30,
+          top: y - 30,
+          width: 60,
+          height: 60,
+          borderRadius: "50%",
+          border: "2px solid rgba(255,255,255,0.8)",
+          transform: `scale(${scale1})`,
+          opacity: opacity1,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          left: x - 8,
+          top: y - 8,
+          width: 16,
+          height: 16,
+          borderRadius: "50%",
+          background: "rgba(255,255,255,0.9)",
+          transform: `scale(${dotScale})`,
+        }}
+      />
+    </>
+  );
+};

package/template/src/components/TravelingBall.tsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from "react";
+
+interface TravelingEvent {
+  id: number;
+  event: string;
+  progress: number;
+  target: string;
+  direction: "toService" | "toPhone";
+  userId: string | null;
+  deviceId: string;
+  properties: Record<string, any>;
+  timestamp: string;
+}
+
+/** Animated ball that travels along an SVG path in the live demo */
+export const TravelingBall: React.FC<{
+  event: TravelingEvent;
+  pathRef: React.RefObject<SVGPathElement>;
+  onClick: (e: React.MouseEvent, event: TravelingEvent) => void;
+  color: string;
+}> = ({ event, pathRef, onClick, color }) => {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    if (!pathRef.current) return;
+    const path = pathRef.current;
+    const length = path.getTotalLength();
+    const point = path.getPointAtLength(length * event.progress);
+    setPosition({ x: point.x, y: point.y });
+  }, [event.progress, pathRef]);
+
+  return (
+    <g
+      style={{ cursor: "pointer", pointerEvents: "all" }}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick(e as any, event);
+      }}
+    >
+      <circle cx={position.x} cy={position.y} r={40} fill="transparent" style={{ cursor: "pointer" }} />
+      <circle cx={position.x} cy={position.y} r={24} fill={color} opacity={0.25}
+        style={{ animation: "pulse 1s ease-in-out infinite", transformOrigin: `${position.x}px ${position.y}px` }} />
+      <circle cx={position.x} cy={position.y} r={14} fill={color}
+        style={{ animation: "ballGlow 1.5s ease-in-out infinite", transformOrigin: `${position.x}px ${position.y}px` }} />
+      <circle cx={position.x - 3} cy={position.y - 3} r={4} fill="white" opacity={0.6} />
+    </g>
+  );
+};
+
+export type { TravelingEvent };