@principal-ai/logo-component 0.1.5 → 0.1.6

package/dist/TelemetryReveal.js

@@ -0,0 +1,185 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TelemetryReveal = void 0;
+const react_1 = __importStar(require("react"));
+const presets_1 = require("./presets");
+let globalIdCounter = 0;
+/**
+ * Estimates path length from simple SVG path data (M/L commands).
+ */
+function estimatePathLength(d) {
+    const coords = d.match(/-?\d+\.?\d*/g);
+    if (!coords || coords.length < 4)
+        return 100;
+    let totalLength = 0;
+    for (let i = 2; i < coords.length; i += 2) {
+        const x1 = parseFloat(coords[i - 2]);
+        const y1 = parseFloat(coords[i - 1]);
+        const x2 = parseFloat(coords[i]);
+        const y2 = parseFloat(coords[i + 1]);
+        totalLength += Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+    }
+    return totalLength || 100;
+}
+/**
+ * Parse start and end points from path data (M x1,y1 L x2,y2)
+ */
+function getPathEndpoints(d) {
+    const coords = d.match(/-?\d+\.?\d*/g);
+    if (!coords || coords.length < 4) {
+        return { start: { x: 0, y: 0 }, end: { x: 0, y: 0 } };
+    }
+    return {
+        start: { x: parseFloat(coords[0]), y: parseFloat(coords[1]) },
+        end: { x: parseFloat(coords[coords.length - 2]), y: parseFloat(coords[coords.length - 1]) },
+    };
+}
+/**
+ * Seeded random for consistent chaos patterns
+ */
+function seededRandom(seed) {
+    return () => {
+        seed = (seed * 1103515245 + 12345) & 0x7fffffff;
+        return seed / 0x7fffffff;
+    };
+}
+const TelemetryReveal = ({ width = 200, height = 200, paths: customPaths, preset = "network", viewBox, chaosMode = "none", chaosDuration = 3, dotsDuration = 2, flowDuration = 2, flowDelay = 0.3, particlesPerPath = 2, particleRadius = 3, color = "currentColor", particleColor, strokeWidth = 2, opacity = 0.9, showGlow = true, fadeAfterAssembly = true, fadeOpacity = 0.5, loop = true, loopDelay = 1, }) => {
+    const idRef = (0, react_1.useRef)(null);
+    if (idRef.current === null) {
+        idRef.current = `tr${globalIdCounter++}`;
+    }
+    const uniqueId = idRef.current;
+    const finalParticleColor = particleColor || color;
+    const isFragmented = chaosMode === "fragmented";
+    // Loop via remount
+    const [cycle, setCycle] = (0, react_1.useState)(0);
+    // Resolve paths from custom or preset
+    const resolvedPaths = (0, react_1.useMemo)(() => {
+        if (customPaths)
+            return customPaths;
+        const presetConfig = presets_1.TELEMETRY_PRESETS[preset];
+        return (presetConfig === null || presetConfig === void 0 ? void 0 : presetConfig.paths) || [];
+    }, [customPaths, preset]);
+    // Resolve viewBox
+    const resolvedViewBox = (0, react_1.useMemo)(() => {
+        var _a;
+        if (viewBox)
+            return viewBox;
+        if (!customPaths && ((_a = presets_1.TELEMETRY_PRESETS[preset]) === null || _a === void 0 ? void 0 : _a.viewBox)) {
+            return presets_1.TELEMETRY_PRESETS[preset].viewBox;
+        }
+        return "0 0 200 200";
+    }, [viewBox, customPaths, preset]);
+    // Calculate path lengths and endpoints
+    const pathData = (0, react_1.useMemo)(() => {
+        return resolvedPaths.map((p) => ({
+            length: estimatePathLength(p.d),
+            endpoints: getPathEndpoints(p.d),
+        }));
+    }, [resolvedPaths]);
+    // Generate offsets for fragmented mode
+    const fragmentOffsets = (0, react_1.useMemo)(() => {
+        const random = seededRandom(42);
+        return resolvedPaths.map(() => ({
+            x: (random() - 0.5) * 80,
+            y: (random() - 0.5) * 80,
+        }));
+    }, [resolvedPaths]);
+    // Timing calculations
+    // In fragmented mode: dots appear, extend to lines, then assemble
+    // Phase 1: Dots appear one at a time (dotsDuration / 2)
+    // Phase 2: Lines draw one at a time (dotsDuration / 2)
+    // Phase 3: Lines move to final position one at a time (chaosDuration)
+    // Phase 4: Particles flow
+    const numPaths = resolvedPaths.length || 1;
+    const perItemDotsDuration = (dotsDuration * 0.5) / numPaths;
+    const perItemLinesDuration = (dotsDuration * 0.5) / numPaths;
+    const perItemAssemblyDuration = chaosDuration / numPaths;
+    const dotsPhaseEnd = dotsDuration * 0.5;
+    const linesPhaseEnd = dotsDuration;
+    const assemblyEndTime = isFragmented ? dotsDuration + chaosDuration : 0;
+    const flowBeginTime = assemblyEndTime + flowDelay;
+    // Total animation duration (last particle finishes at flowBeginTime + flowDuration)
+    const totalDuration = flowBeginTime + flowDuration;
+    // Remount-based loop
+    (0, react_1.useEffect)(() => {
+        if (!loop)
+            return;
+        const timeout = setTimeout(() => {
+            setCycle((c) => c + 1);
+        }, (totalDuration + loopDelay) * 1000);
+        return () => clearTimeout(timeout);
+    }, [loop, totalDuration, loopDelay, cycle]);
+    return (react_1.default.createElement("svg", { key: cycle, width: width, height: height, viewBox: resolvedViewBox, xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
+        react_1.default.createElement("defs", null,
+            showGlow && (react_1.default.createElement("filter", { id: `glow-${uniqueId}`, x: "-50%", y: "-50%", width: "200%", height: "200%" },
+                react_1.default.createElement("feGaussianBlur", { stdDeviation: "2", result: "blur" }),
+                react_1.default.createElement("feMerge", null,
+                    react_1.default.createElement("feMergeNode", { in: "blur" }),
+                    react_1.default.createElement("feMergeNode", { in: "SourceGraphic" })))),
+            react_1.default.createElement("radialGradient", { id: `particleGradient-${uniqueId}`, cx: "50%", cy: "50%", r: "50%" },
+                react_1.default.createElement("stop", { offset: "0%", style: { stopColor: finalParticleColor, stopOpacity: 1 } }),
+                react_1.default.createElement("stop", { offset: "100%", style: { stopColor: finalParticleColor, stopOpacity: 0.3 } }))),
+        react_1.default.createElement("g", { className: "telemetry-paths" }, resolvedPaths.map((path, index) => {
+            const offset = fragmentOffsets[index];
+            const { length: pathLength, endpoints } = pathData[index] || { length: 100, endpoints: { start: { x: 0, y: 0 }, end: { x: 0, y: 0 } } };
+            const dotRadius = strokeWidth / 2;
+            return (react_1.default.createElement("g", { key: path.id || `path-${index}`, transform: isFragmented ? `translate(${offset.x}, ${offset.y})` : undefined },
+                isFragmented && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("circle", { cx: endpoints.start.x, cy: endpoints.start.y, r: dotRadius, fill: color, opacity: "0" },
+                        react_1.default.createElement("animate", { attributeName: "opacity", from: "0", to: "1", dur: "0.15s", begin: `${index * perItemDotsDuration}s`, fill: "freeze" }),
+                        react_1.default.createElement("animate", { attributeName: "opacity", from: "1", to: "0", dur: "0.2s", begin: `${dotsPhaseEnd + (index + 1) * perItemLinesDuration}s`, fill: "freeze" })),
+                    react_1.default.createElement("circle", { cx: endpoints.end.x, cy: endpoints.end.y, r: dotRadius, fill: color, opacity: "0" },
+                        react_1.default.createElement("animate", { attributeName: "opacity", from: "0", to: "1", dur: "0.15s", begin: `${index * perItemDotsDuration}s`, fill: "freeze" }),
+                        react_1.default.createElement("animate", { attributeName: "opacity", from: "1", to: "0", dur: "0.2s", begin: `${dotsPhaseEnd + (index + 1) * perItemLinesDuration}s`, fill: "freeze" })))),
+                react_1.default.createElement("path", { d: path.d, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", opacity: isFragmented ? 0 : 1, strokeDasharray: isFragmented ? pathLength : undefined, strokeDashoffset: isFragmented ? pathLength : undefined },
+                    isFragmented && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("animate", { attributeName: "opacity", values: `0;1;1;${fadeAfterAssembly ? fadeOpacity : 1}`, keyTimes: "0;0.1;0.9;1", dur: `${perItemLinesDuration + chaosDuration}s`, begin: `${dotsPhaseEnd + index * perItemLinesDuration}s`, fill: "freeze" }),
+                        react_1.default.createElement("animate", { attributeName: "stroke-dashoffset", from: pathLength, to: "0", dur: `${perItemLinesDuration}s`, begin: `${dotsPhaseEnd + index * perItemLinesDuration}s`, fill: "freeze", calcMode: "spline", keySplines: "0.4 0 0.2 1", keyTimes: "0;1" }))),
+                    !isFragmented && fadeAfterAssembly && (react_1.default.createElement("animate", { attributeName: "opacity", from: "1", to: fadeOpacity, dur: "0.5s", begin: `${flowBeginTime}s`, fill: "freeze" }))),
+                isFragmented && (react_1.default.createElement("animateTransform", { attributeName: "transform", type: "translate", from: `${offset.x} ${offset.y}`, to: "0 0", dur: `${perItemAssemblyDuration}s`, begin: `${linesPhaseEnd + index * perItemAssemblyDuration}s`, fill: "freeze", calcMode: "spline", keySplines: "0.33 0 0.2 1", keyTimes: "0;1" }))));
+        })),
+        react_1.default.createElement("g", { className: "telemetry-particles", filter: showGlow ? `url(#glow-${uniqueId})` : undefined }, resolvedPaths.flatMap((path, pathIndex) => {
+            return Array.from({ length: particlesPerPath }).map((_, particleIndex) => {
+                const particleDelay = (particleIndex / particlesPerPath) * flowDuration;
+                const beginTime = flowBeginTime + particleDelay;
+                return (react_1.default.createElement("circle", { key: `particle-${pathIndex}-${particleIndex}`, r: particleRadius, fill: `url(#particleGradient-${uniqueId})`, opacity: "0" },
+                    react_1.default.createElement("animateMotion", { dur: `${flowDuration}s`, begin: `${beginTime}s`, fill: "freeze", path: path.d }),
+                    react_1.default.createElement("animate", { attributeName: "opacity", values: "0;1;1;0", keyTimes: "0;0.1;0.9;1", dur: `${flowDuration}s`, begin: `${beginTime}s`, fill: "freeze" })));
+            });
+        }))));
+};
+exports.TelemetryReveal = TelemetryReveal;

package/dist/TextReveal.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+type ChaosMode = "none" | "fragmented";
+interface TextRevealProps {
+    /** The text to display */
+    text: string;
+    /** Width of the SVG container */
+    width?: number;
+    /** Height of the SVG container */
+    height?: number;
+    /** Scale factor for the text (default 1) */
+    scale?: number;
+    /** Letter spacing in units (default 4) */
+    letterSpacing?: number;
+    /** Center the text in the container */
+    centerText?: boolean;
+    chaosMode?: ChaosMode;
+    chaosDuration?: number;
+    dotsDuration?: number;
+    flowDuration?: number;
+    flowDelay?: number;
+    particlesPerPath?: number;
+    particleRadius?: number;
+    color?: string;
+    particleColor?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    showGlow?: boolean;
+    fadeAfterAssembly?: boolean;
+    fadeOpacity?: number;
+    loop?: boolean;
+    loopDelay?: number;
+}
+export declare const TextReveal: React.FC<TextRevealProps>;
+export {};

package/dist/TextReveal.js

@@ -0,0 +1,196 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextReveal = void 0;
+const react_1 = __importStar(require("react"));
+const strokeCharacters_1 = require("./strokeCharacters");
+let globalIdCounter = 0;
+/**
+ * Estimates path length from SVG path data.
+ */
+function estimatePathLength(d) {
+    const coords = d.match(/-?\d+\.?\d*/g);
+    if (!coords || coords.length < 4)
+        return 100;
+    let totalLength = 0;
+    for (let i = 2; i < coords.length; i += 2) {
+        const x1 = parseFloat(coords[i - 2]);
+        const y1 = parseFloat(coords[i - 1]);
+        const x2 = parseFloat(coords[i]);
+        const y2 = parseFloat(coords[i + 1]);
+        totalLength += Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+    }
+    return totalLength || 100;
+}
+/**
+ * Parse start and end points from path data
+ */
+function getPathEndpoints(d) {
+    const coords = d.match(/-?\d+\.?\d*/g);
+    if (!coords || coords.length < 4) {
+        return { start: { x: 0, y: 0 }, end: { x: 0, y: 0 } };
+    }
+    return {
+        start: { x: parseFloat(coords[0]), y: parseFloat(coords[1]) },
+        end: { x: parseFloat(coords[coords.length - 2]), y: parseFloat(coords[coords.length - 1]) },
+    };
+}
+/**
+ * Seeded random for consistent chaos patterns
+ */
+function seededRandom(seed) {
+    return () => {
+        seed = (seed * 1103515245 + 12345) & 0x7fffffff;
+        return seed / 0x7fffffff;
+    };
+}
+const TextReveal = ({ text, width = 400, height = 100, scale = 1, letterSpacing = 4, centerText = true, chaosMode = "none", chaosDuration = 2, dotsDuration = 1.5, flowDuration = 2, flowDelay = 0.3, particlesPerPath = 1, particleRadius = 2.5, color = "currentColor", particleColor, strokeWidth = 2, opacity = 0.9, showGlow = true, fadeAfterAssembly = true, fadeOpacity = 0.5, loop = true, loopDelay = 1, }) => {
+    const idRef = (0, react_1.useRef)(null);
+    if (idRef.current === null) {
+        idRef.current = `txr${globalIdCounter++}`;
+    }
+    const uniqueId = idRef.current;
+    const finalParticleColor = particleColor || color;
+    const isFragmented = chaosMode === "fragmented";
+    // Loop via remount
+    const [cycle, setCycle] = (0, react_1.useState)(0);
+    // Layout the text into paths
+    const { paths: layoutPaths, width: textWidth, height: textHeight } = (0, react_1.useMemo)(() => {
+        return (0, strokeCharacters_1.layoutText)(text, { letterSpacing, scale });
+    }, [text, letterSpacing, scale]);
+    // Calculate centering offset
+    const offsetX = centerText ? (width - textWidth) / 2 : 0;
+    const offsetY = centerText ? (height - textHeight) / 2 : 0;
+    // Apply offset to paths
+    const resolvedPaths = (0, react_1.useMemo)(() => {
+        return layoutPaths.map((path) => (Object.assign(Object.assign({}, path), { d: offsetPath(path.d, offsetX, offsetY) })));
+    }, [layoutPaths, offsetX, offsetY]);
+    // Calculate path data
+    const pathData = (0, react_1.useMemo)(() => {
+        return resolvedPaths.map((p) => ({
+            length: estimatePathLength(p.d),
+            endpoints: getPathEndpoints(p.d),
+        }));
+    }, [resolvedPaths]);
+    // Generate offsets for fragmented mode
+    const fragmentOffsets = (0, react_1.useMemo)(() => {
+        const random = seededRandom(42);
+        return resolvedPaths.map(() => ({
+            x: (random() - 0.5) * 120,
+            y: (random() - 0.5) * 80,
+        }));
+    }, [resolvedPaths]);
+    // Timing calculations
+    const numPaths = resolvedPaths.length || 1;
+    const perItemDotsDuration = (dotsDuration * 0.5) / numPaths;
+    const perItemLinesDuration = (dotsDuration * 0.5) / numPaths;
+    const perItemAssemblyDuration = chaosDuration / numPaths;
+    const dotsPhaseEnd = dotsDuration * 0.5;
+    const linesPhaseEnd = dotsDuration;
+    const assemblyEndTime = isFragmented ? dotsDuration + chaosDuration : 0;
+    const flowBeginTime = assemblyEndTime + flowDelay;
+    // Total animation duration
+    const totalDuration = flowBeginTime + flowDuration;
+    // Remount-based loop
+    (0, react_1.useEffect)(() => {
+        if (!loop)
+            return;
+        const timeout = setTimeout(() => {
+            setCycle((c) => c + 1);
+        }, (totalDuration + loopDelay) * 1000);
+        return () => clearTimeout(timeout);
+    }, [loop, totalDuration, loopDelay, cycle]);
+    // Calculate viewBox to fit content
+    const viewBox = `0 0 ${width} ${height}`;
+    return (react_1.default.createElement("svg", { key: cycle, width: width, height: height, viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
+        react_1.default.createElement("defs", null,
+            showGlow && (react_1.default.createElement("filter", { id: `glow-${uniqueId}`, x: "-50%", y: "-50%", width: "200%", height: "200%" },
+                react_1.default.createElement("feGaussianBlur", { stdDeviation: "2", result: "blur" }),
+                react_1.default.createElement("feMerge", null,
+                    react_1.default.createElement("feMergeNode", { in: "blur" }),
+                    react_1.default.createElement("feMergeNode", { in: "SourceGraphic" })))),
+            react_1.default.createElement("radialGradient", { id: `particleGradient-${uniqueId}`, cx: "50%", cy: "50%", r: "50%" },
+                react_1.default.createElement("stop", { offset: "0%", style: { stopColor: finalParticleColor, stopOpacity: 1 } }),
+                react_1.default.createElement("stop", { offset: "100%", style: { stopColor: finalParticleColor, stopOpacity: 0.3 } }))),
+        react_1.default.createElement("g", { className: "text-paths" }, resolvedPaths.map((path, index) => {
+            const offset = fragmentOffsets[index];
+            const { length: pathLength, endpoints } = pathData[index] || {
+                length: 100,
+                endpoints: { start: { x: 0, y: 0 }, end: { x: 0, y: 0 } },
+            };
+            const dotRadius = strokeWidth / 2;
+            return (react_1.default.createElement("g", { key: path.id, transform: isFragmented ? `translate(${offset.x}, ${offset.y})` : undefined },
+                isFragmented && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("circle", { cx: endpoints.start.x, cy: endpoints.start.y, r: dotRadius, fill: color, opacity: "0" },
+                        react_1.default.createElement("animate", { attributeName: "opacity", from: "0", to: "1", dur: "0.15s", begin: `${index * perItemDotsDuration}s`, fill: "freeze" }),
+                        react_1.default.createElement("animate", { attributeName: "opacity", from: "1", to: "0", dur: "0.2s", begin: `${dotsPhaseEnd + (index + 1) * perItemLinesDuration}s`, fill: "freeze" })),
+                    react_1.default.createElement("circle", { cx: endpoints.end.x, cy: endpoints.end.y, r: dotRadius, fill: color, opacity: "0" },
+                        react_1.default.createElement("animate", { attributeName: "opacity", from: "0", to: "1", dur: "0.15s", begin: `${index * perItemDotsDuration}s`, fill: "freeze" }),
+                        react_1.default.createElement("animate", { attributeName: "opacity", from: "1", to: "0", dur: "0.2s", begin: `${dotsPhaseEnd + (index + 1) * perItemLinesDuration}s`, fill: "freeze" })))),
+                react_1.default.createElement("path", { d: path.d, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", opacity: isFragmented ? 0 : 1, strokeDasharray: isFragmented ? pathLength : undefined, strokeDashoffset: isFragmented ? pathLength : undefined },
+                    isFragmented && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("animate", { attributeName: "opacity", values: `0;1;1;${fadeAfterAssembly ? fadeOpacity : 1}`, keyTimes: "0;0.1;0.9;1", dur: `${perItemLinesDuration + chaosDuration}s`, begin: `${dotsPhaseEnd + index * perItemLinesDuration}s`, fill: "freeze" }),
+                        react_1.default.createElement("animate", { attributeName: "stroke-dashoffset", from: pathLength, to: "0", dur: `${perItemLinesDuration}s`, begin: `${dotsPhaseEnd + index * perItemLinesDuration}s`, fill: "freeze", calcMode: "spline", keySplines: "0.4 0 0.2 1", keyTimes: "0;1" }))),
+                    !isFragmented && fadeAfterAssembly && (react_1.default.createElement("animate", { attributeName: "opacity", from: "1", to: fadeOpacity, dur: "0.5s", begin: `${flowBeginTime}s`, fill: "freeze" }))),
+                isFragmented && (react_1.default.createElement("animateTransform", { attributeName: "transform", type: "translate", from: `${offset.x} ${offset.y}`, to: "0 0", dur: `${perItemAssemblyDuration}s`, begin: `${linesPhaseEnd + index * perItemAssemblyDuration}s`, fill: "freeze", calcMode: "spline", keySplines: "0.33 0 0.2 1", keyTimes: "0;1" }))));
+        })),
+        react_1.default.createElement("g", { className: "text-particles", filter: showGlow ? `url(#glow-${uniqueId})` : undefined }, resolvedPaths.flatMap((path, pathIndex) => {
+            return Array.from({ length: particlesPerPath }).map((_, particleIndex) => {
+                const particleDelay = (particleIndex / particlesPerPath) * flowDuration;
+                const beginTime = flowBeginTime + particleDelay;
+                return (react_1.default.createElement("circle", { key: `particle-${pathIndex}-${particleIndex}`, r: particleRadius, fill: `url(#particleGradient-${uniqueId})`, opacity: "0" },
+                    react_1.default.createElement("animateMotion", { dur: `${flowDuration}s`, begin: `${beginTime}s`, fill: "freeze", path: path.d }),
+                    react_1.default.createElement("animate", { attributeName: "opacity", values: "0;1;1;0", keyTimes: "0;0.1;0.9;1", dur: `${flowDuration}s`, begin: `${beginTime}s`, fill: "freeze" })));
+            });
+        }))));
+};
+exports.TextReveal = TextReveal;
+/**
+ * Offset all coordinates in a path by the given amounts
+ */
+function offsetPath(d, offsetX, offsetY) {
+    let coordIndex = 0;
+    return d.replace(/-?\d+\.?\d*/g, (match) => {
+        const num = parseFloat(match);
+        const isY = coordIndex % 2 === 1;
+        coordIndex++;
+        if (isY) {
+            return String(num + offsetY);
+        }
+        else {
+            return String(num + offsetX);
+        }
+    });
+}