Data Flow Pipes

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6const FONT_FAMILY =
7  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
8 
9export interface DataFlowNode {
10  id: string;
11  x: number;
12  y: number;
13  label?: string;
14}
15 
16export interface DataFlowEdge {
17  from: string;
18  to: string;
19  startFrame?: number;
20}
21 
22export interface DataFlowPipesProps {
23  nodes?: DataFlowNode[];
24  edges?: DataFlowEdge[];
25  pipeColor?: string;
26  pulseColor?: string;
27  pulseLength?: number;
28  pulseDuration?: number;
29  background?: string;
30  nodeColor?: string;
31  textColor?: string;
32  speed?: number;
33  fps?: number;
34  durationInFrames?: number;
35  width?: number;
36  height?: number;
37  className?: string;
38}
39 
40const DEFAULT_NODES: DataFlowNode[] = [
41  { id: "client", label: "Client", x: 140, y: 360 },
42  { id: "api", label: "API", x: 460, y: 200 },
43  { id: "queue", label: "Queue", x: 460, y: 520 },
44  { id: "db", label: "Database", x: 820, y: 360 },
45  { id: "cdn", label: "CDN", x: 1140, y: 200 },
46  { id: "log", label: "Logs", x: 1140, y: 520 },
47];
48 
49const DEFAULT_EDGES: DataFlowEdge[] = [
50  { from: "client", startFrame: 0, to: "api" },
51  { from: "client", startFrame: 12, to: "queue" },
52  { from: "api", startFrame: 24, to: "db" },
53  { from: "queue", startFrame: 36, to: "db" },
54  { from: "db", startFrame: 48, to: "cdn" },
55  { from: "db", startFrame: 56, to: "log" },
56];
57 
58const bezierPath = (
59  a: { x: number; y: number },
60  b: { x: number; y: number }
61) => {
62  const handle = Math.max(60, Math.abs(b.x - a.x) * 0.5);
63  return `M ${a.x} ${a.y} C ${a.x + handle} ${a.y}, ${b.x - handle} ${b.y}, ${b.x} ${b.y}`;
64};
65 
66const bezierLength = (
67  a: { x: number; y: number },
68  b: { x: number; y: number }
69) => {
70  const handle = Math.max(60, Math.abs(b.x - a.x) * 0.5);
71  let len = 0;
72  let prev = a;
73  for (let i = 1; i <= 32; i += 1) {
74    const t = i / 32;
75    const u = 1 - t;
76    const p = {
77      x:
78        u * u * u * a.x +
79        3 * u * u * t * (a.x + handle) +
80        3 * u * t * t * (b.x - handle) +
81        t * t * t * b.x,
82      y:
83        u * u * u * a.y +
84        3 * u * u * t * a.y +
85        3 * u * t * t * b.y +
86        t * t * t * b.y,
87    };
88    len += Math.hypot(p.x - prev.x, p.y - prev.y);
89    prev = p;
90  }
91  return len;
92};
93 
94export const DataFlowPipes = ({
95  nodes = DEFAULT_NODES,
96  edges = DEFAULT_EDGES,
97  pipeColor = "#1f1f23",
98  pulseColor = "#22d3ee",
99  pulseLength = 60,
100  pulseDuration = 36,
101// … truncated