Data Flow Pipes

1"use client";
2 
3import { interpolate, useCurrentFrame } from "remotion";
4 
5export interface DataFlowNode {
6  id: string;
7  x: number;
8  y: number;
9  label?: string;
10}
11 
12export interface DataFlowEdge {
13  from: string;
14  to: string;
15  /** Frame when the pulse on this edge starts. */
16  startFrame?: number;
17}
18 
19export interface DataFlowPipesProps {
20  nodes?: DataFlowNode[];
21  edges?: DataFlowEdge[];
22  pipeColor?: string;
23  pulseColor?: string;
24  pulseLength?: number;
25  pulseDuration?: number;
26  nodeColor?: string;
27  textColor?: string;
28  speed?: number;
29  className?: string;
30}
31 
32const FONT_FAMILY =
33  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
34 
35const DEFAULT_NODES: DataFlowNode[] = [
36  { id: "client", x: 140, y: 360, label: "Client" },
37  { id: "api", x: 460, y: 200, label: "API" },
38  { id: "queue", x: 460, y: 520, label: "Queue" },
39  { id: "db", x: 820, y: 360, label: "Database" },
40  { id: "cdn", x: 1140, y: 200, label: "CDN" },
41  { id: "log", x: 1140, y: 520, label: "Logs" },
42];
43 
44const DEFAULT_EDGES: DataFlowEdge[] = [
45  { from: "client", to: "api", startFrame: 0 },
46  { from: "client", to: "queue", startFrame: 12 },
47  { from: "api", to: "db", startFrame: 24 },
48  { from: "queue", to: "db", startFrame: 36 },
49  { from: "db", to: "cdn", startFrame: 48 },
50  { from: "db", to: "log", startFrame: 56 },
51];
52 
53/**
54 * Build a smooth cubic bezier path string between two points. The control
55 * points are pulled toward the midpoint and offset perpendicular for natural
56 * routing — straight lines look like circuit traces, curves look like data.
57 */
58function bezierPath(a: { x: number; y: number }, b: { x: number; y: number }) {
59  const dx = b.x - a.x;
60  const _dy = b.y - a.y;
61  // Stronger horizontal handles → routes look like API/DB diagrams.
62  const handle = Math.max(60, Math.abs(dx) * 0.5);
63  const c1x = a.x + handle;
64  const c1y = a.y;
65  const c2x = b.x - handle;
66  const c2y = b.y;
67  return `M ${a.x} ${a.y} C ${c1x} ${c1y}, ${c2x} ${c2y}, ${b.x} ${b.y}`;
68}
69 
70/**
71 * Approximate arc length of a cubic bezier by sampling. Gives a stable number
72 * to drive `strokeDashoffset` against — purely numeric, no DOM `getTotalLength`.
73 */
74function bezierLength(
75  a: { x: number; y: number },
76  b: { x: number; y: number },
77) {
78  const handle = Math.max(60, Math.abs(b.x - a.x) * 0.5);
79  const c1 = { x: a.x + handle, y: a.y };
80  const c2 = { x: b.x - handle, y: b.y };
81  let len = 0;
82  let prev = a;
83  const steps = 32;
84  for (let i = 1; i <= steps; i++) {
85// … truncated