@principal-ai/logo-component 0.1.6 → 0.1.7

package/dist/OpenTypeTextReveal.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 type ChaosMode = "none" | "fragmented";
 type ChartPattern = "latency" | "cpu" | "noise";
+type DotDistribution = "even" | "endpoints" | "random";
 interface OpenTypeTextRevealProps {
     /** The text to display */
     text: string;
@@ -26,6 +27,14 @@ interface OpenTypeTextRevealProps {
     chartTransitionDuration?: number;
     /** Telemetry pattern style for the chart */
     chartPattern?: ChartPattern;
+    /** Pixels of path length per dot (lower = more dots). Default: 30 */
+    dotsPerPathUnit?: number;
+    /** Minimum dots per contour. Default: 1 */
+    minDotsPerContour?: number;
+    /** Maximum dots per contour (0 = unlimited). Default: 0 */
+    maxDotsPerContour?: number;
+    /** How dots are distributed along each contour. Default: "even" */
+    dotDistribution?: DotDistribution;
     chaosMode?: ChaosMode;
     chaosDuration?: number;
     dotsDuration?: number;
@@ -34,6 +43,8 @@ interface OpenTypeTextRevealProps {
     particlesPerPath?: number;
     particleRadius?: number;
     color?: string;
+    /** Colors for each word (space-separated). Falls back to `color` if not specified. */
+    wordColors?: string[];
     particleColor?: string;
     strokeWidth?: number;
     opacity?: number;

package/dist/OpenTypeTextReveal.js

@@ -219,7 +219,69 @@ function splitPathIntoContours(d) {
     }
     return contours;
 }
-const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600, height = 150, centerText = true, showChartIntro, chartDuration = 1.5, chartLineFadeDuration = 0.5, chartPauseDuration = 0.3, chartTransitionDuration = 0.8, chartPattern = "latency", chaosMode = "none", chaosDuration = 2, dotsDuration = 1.5, flowDuration = 2, flowDelay = 0.3, particlesPerPath = 1, particleRadius = 2, color = "currentColor", particleColor, strokeWidth = 1.5, opacity = 0.9, showGlow = true, fadeAfterAssembly = true, fadeOpacity = 0.5, loop = true, loopDelay = 1, }) => {
+/**
+ * Sample points along an SVG path using browser's native getPointAtLength
+ */
+function samplePointsAlongPath(d, numPoints, distribution, seed) {
+    if (numPoints <= 0)
+        return [];
+    // SSR fallback: estimate points without DOM
+    if (typeof document === 'undefined') {
+        const endpoints = getPathEndpoints(d);
+        const points = [];
+        for (let i = 0; i < numPoints; i++) {
+            const t = numPoints === 1 ? 0 : i / (numPoints - 1);
+            points.push({
+                x: endpoints.start.x + (endpoints.end.x - endpoints.start.x) * t,
+                y: endpoints.start.y + (endpoints.end.y - endpoints.start.y) * t,
+            });
+        }
+        return points;
+    }
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', d);
+    const totalLength = path.getTotalLength();
+    if (totalLength === 0) {
+        const endpoints = getPathEndpoints(d);
+        return [endpoints.start];
+    }
+    // Generate normalized positions (0-1) based on distribution
+    const positions = [];
+    switch (distribution) {
+        case "even":
+            for (let i = 0; i < numPoints; i++) {
+                positions.push(numPoints === 1 ? 0 : i / (numPoints - 1));
+            }
+            break;
+        case "endpoints":
+            // Concentrate more points near 0 and 1
+            for (let i = 0; i < numPoints; i++) {
+                const t = numPoints === 1 ? 0 : i / (numPoints - 1);
+                // Apply curve to cluster at ends: more samples near 0 and 1
+                const weighted = t < 0.5
+                    ? 0.5 * Math.pow(2 * t, 0.5)
+                    : 1 - 0.5 * Math.pow(2 * (1 - t), 0.5);
+                positions.push(weighted);
+            }
+            break;
+        case "random": {
+            const random = seededRandom(seed);
+            for (let i = 0; i < numPoints; i++) {
+                positions.push(random());
+            }
+            positions.sort((a, b) => a - b); // Sort for visual consistency
+            break;
+        }
+    }
+    // Convert positions to actual points
+    const points = [];
+    for (const t of positions) {
+        const point = path.getPointAtLength(t * totalLength);
+        points.push({ x: point.x, y: point.y });
+    }
+    return points;
+}
+const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600, height = 150, centerText = true, showChartIntro, chartDuration = 1.5, chartLineFadeDuration = 0.5, chartPauseDuration = 0.3, chartTransitionDuration = 0.8, chartPattern = "latency", dotsPerPathUnit = 30, minDotsPerContour = 1, maxDotsPerContour = 0, dotDistribution = "even", chaosMode = "none", chaosDuration = 2, dotsDuration = 1.5, flowDuration = 2, flowDelay = 0.3, particlesPerPath = 1, particleRadius = 2, color = "currentColor", wordColors, particleColor, strokeWidth = 1.5, 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 = `otr${globalIdCounter++}`;
@@ -252,28 +314,48 @@ const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600, height
             cancelled = true;
         };
     }, [fontUrl]);
-    // Generate paths from font
-    const { paths, textWidth, textHeight } = (0, react_1.useMemo)(() => {
+    // Generate paths from font, tracking word indices
+    const { paths, textWidth, textHeight, wordCount } = (0, react_1.useMemo)(() => {
         if (!font) {
-            return { paths: [], textWidth: 0, textHeight: fontSize };
+            return { paths: [], textWidth: 0, textHeight: fontSize, wordCount: 0 };
         }
-        // Get the path for the text
-        const textPath = font.getPath(text, 0, fontSize, fontSize);
-        const pathData = textPath.toPathData(2); // 2 decimal places
-        // Split into individual contours (each letter shape)
-        const contours = splitPathIntoContours(pathData);
-        const pathInfos = contours.map((d, index) => ({
-            d,
-            id: `contour-${index}`,
-            length: estimatePathLength(d),
-            endpoints: getPathEndpoints(d),
-        }));
-        // Calculate bounds
-        const bbox = textPath.getBoundingBox();
+        // Split text into words and generate paths per word
+        const words = text.split(/\s+/).filter(w => w.length > 0);
+        const pathInfos = [];
+        let currentX = 0;
+        let contourIndex = 0;
+        // Track overall bounds
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        words.forEach((word, wordIndex) => {
+            // Get path for this word
+            const wordPath = font.getPath(word, currentX, fontSize, fontSize);
+            const pathData = wordPath.toPathData(2);
+            const contours = splitPathIntoContours(pathData);
+            // Add contours with word index
+            contours.forEach((d) => {
+                pathInfos.push({
+                    d,
+                    id: `contour-${contourIndex++}`,
+                    length: estimatePathLength(d),
+                    endpoints: getPathEndpoints(d),
+                    wordIndex,
+                });
+            });
+            // Update bounds
+            const bbox = wordPath.getBoundingBox();
+            minX = Math.min(minX, bbox.x1);
+            minY = Math.min(minY, bbox.y1);
+            maxX = Math.max(maxX, bbox.x2);
+            maxY = Math.max(maxY, bbox.y2);
+            // Advance X position for next word (add space width)
+            const spaceWidth = font.getAdvanceWidth(' ', fontSize);
+            currentX = bbox.x2 + spaceWidth;
+        });
         return {
             paths: pathInfos,
-            textWidth: bbox.x2 - bbox.x1,
-            textHeight: bbox.y2 - bbox.y1,
+            textWidth: maxX - minX,
+            textHeight: maxY - minY,
+            wordCount: words.length,
         };
     }, [font, text, fontSize]);
     // Calculate centering offset
@@ -294,17 +376,71 @@ const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600, height
             y: (random() - 0.5) * 100,
         }));
     }, [resolvedPaths]);
-    // Generate chart positions for the intro animation
+    // Calculate dots per contour based on path length
+    const dotsPerContour = (0, react_1.useMemo)(() => {
+        return resolvedPaths.map(path => {
+            const rawCount = Math.round(path.length / dotsPerPathUnit);
+            const bounded = maxDotsPerContour > 0
+                ? Math.min(rawCount, maxDotsPerContour)
+                : rawCount;
+            return Math.max(minDotsPerContour, bounded);
+        });
+    }, [resolvedPaths, dotsPerPathUnit, minDotsPerContour, maxDotsPerContour]);
+    const totalDots = (0, react_1.useMemo)(() => {
+        return dotsPerContour.reduce((a, b) => a + b, 0);
+    }, [dotsPerContour]);
+    // Count dots per word for chart generation
+    const dotsPerWord = (0, react_1.useMemo)(() => {
+        const counts = [];
+        resolvedPaths.forEach((path, contourIndex) => {
+            const wordIdx = path.wordIndex;
+            while (counts.length <= wordIdx)
+                counts.push(0);
+            counts[wordIdx] += dotsPerContour[contourIndex];
+        });
+        return counts;
+    }, [resolvedPaths, dotsPerContour]);
+    // Generate chart positions per word - each word gets its own full-width line
     const chartPositions = (0, react_1.useMemo)(() => {
         if (!shouldShowChartIntro)
             return [];
-        return generateChartPositions(resolvedPaths.length, width, height, chartPattern, 123);
-    }, [shouldShowChartIntro, resolvedPaths.length, width, height, chartPattern]);
-    // Target positions for dots after chart phase
-    // Always go to final letter positions (path start points)
+        const allPositions = [];
+        dotsPerWord.forEach((numDots, wordIndex) => {
+            if (numDots === 0)
+                return;
+            // Each word gets its own time-series spanning the full width
+            // Use different seed per word for variation
+            const wordPositions = generateChartPositions(numDots, width, height, chartPattern, 123 + wordIndex * 1000);
+            wordPositions.forEach(pos => {
+                allPositions.push(Object.assign(Object.assign({}, pos), { wordIndex }));
+            });
+        });
+        return allPositions;
+    }, [shouldShowChartIntro, dotsPerWord, width, height, chartPattern]);
+    // Target positions for dots after chart phase - sampled along each contour
     const dotTargetPositions = (0, react_1.useMemo)(() => {
-        return resolvedPaths.map((path) => path.endpoints.start);
-    }, [resolvedPaths]);
+        // Group by word first to match chart positions order
+        const positionsByWord = [];
+        resolvedPaths.forEach((path, contourIndex) => {
+            const wordIdx = path.wordIndex;
+            while (positionsByWord.length <= wordIdx)
+                positionsByWord.push([]);
+            const numDots = dotsPerContour[contourIndex];
+            const sampledPoints = samplePointsAlongPath(path.d, numDots, dotDistribution, contourIndex * 1000);
+            sampledPoints.forEach(point => {
+                positionsByWord[wordIdx].push(Object.assign(Object.assign({}, point), { contourIndex, wordIndex: wordIdx }));
+            });
+        });
+        // Flatten in word order to match chartPositions
+        return positionsByWord.flat();
+    }, [resolvedPaths, dotsPerContour, dotDistribution]);
+    // Helper to get color for a word index
+    const getWordColor = (wordIndex) => {
+        if (wordColors && wordColors.length > 0) {
+            return wordColors[wordIndex % wordColors.length];
+        }
+        return color;
+    };
     // Chart intro timing
     const chartPhaseEndTime = shouldShowChartIntro
         ? chartDuration + chartLineFadeDuration + chartPauseDuration + chartTransitionDuration
@@ -353,9 +489,19 @@ const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600, height
                 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 } }))),
         shouldShowChartIntro && chartPositions.length > 0 && (react_1.default.createElement("g", { className: "chart-intro" },
-            react_1.default.createElement("polyline", { points: chartPositions.map(p => `${p.x},${p.y}`).join(' '), fill: "none", stroke: color, strokeWidth: strokeWidth * 0.75, strokeLinecap: "round", strokeLinejoin: "round", opacity: "0" },
-                react_1.default.createElement("animate", { attributeName: "opacity", from: "0", to: "0.6", dur: "0.3s", begin: "0s", fill: "freeze" }),
-                react_1.default.createElement("animate", { attributeName: "opacity", from: "0.6", to: "0", dur: `${chartLineFadeDuration}s`, begin: `${chartDuration}s`, fill: "freeze" })),
+            (() => {
+                // Group chart positions by word (chartPositions now has wordIndex)
+                const positionsByWord = new Map();
+                chartPositions.forEach((pos) => {
+                    if (!positionsByWord.has(pos.wordIndex)) {
+                        positionsByWord.set(pos.wordIndex, []);
+                    }
+                    positionsByWord.get(pos.wordIndex).push({ x: pos.x, y: pos.y });
+                });
+                return Array.from(positionsByWord.entries()).map(([wordIndex, positions]) => (react_1.default.createElement("polyline", { key: `chart-line-${wordIndex}`, points: positions.map(p => `${p.x},${p.y}`).join(' '), fill: "none", stroke: getWordColor(wordIndex), strokeWidth: strokeWidth * 0.75, strokeLinecap: "round", strokeLinejoin: "round", opacity: "0" },
+                    react_1.default.createElement("animate", { attributeName: "opacity", from: "0", to: "0.6", dur: "0.3s", begin: "0s", fill: "freeze" }),
+                    react_1.default.createElement("animate", { attributeName: "opacity", from: "0.6", to: "0", dur: `${chartLineFadeDuration}s`, begin: `${chartDuration}s`, fill: "freeze" }))));
+            })(),
             chartPositions.map((chartPos, index) => {
                 const targetPos = dotTargetPositions[index];
                 if (!targetPos)
@@ -363,20 +509,24 @@ const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600, height
                 const dotRadius = strokeWidth;
                 const dotAppearDelay = (index / chartPositions.length) * 0.5; // Stagger appearance
                 const transitionBegin = chartDuration + chartLineFadeDuration + chartPauseDuration;
-                return (react_1.default.createElement("circle", { key: `chart-dot-${index}`, cx: chartPos.x, cy: chartPos.y, r: dotRadius, fill: color, opacity: "0" },
+                // Fade out when this dot's contour starts drawing
+                const contourDrawBegin = dotsPhaseEnd + (targetPos.contourIndex + 1) * perItemLinesDuration;
+                const dotColor = getWordColor(chartPos.wordIndex);
+                return (react_1.default.createElement("circle", { key: `chart-dot-${index}`, cx: chartPos.x, cy: chartPos.y, r: dotRadius, fill: dotColor, opacity: "0" },
                     react_1.default.createElement("animate", { attributeName: "opacity", from: "0", to: "1", dur: "0.15s", begin: `${dotAppearDelay}s`, fill: "freeze" }),
                     react_1.default.createElement("animate", { attributeName: "cx", from: chartPos.x, to: targetPos.x, dur: `${chartTransitionDuration}s`, begin: `${transitionBegin}s`, fill: "freeze", calcMode: "spline", keySplines: "0.4 0 0.2 1", keyTimes: "0;1" }),
                     react_1.default.createElement("animate", { attributeName: "cy", from: chartPos.y, to: targetPos.y, dur: `${chartTransitionDuration}s`, begin: `${transitionBegin}s`, fill: "freeze", calcMode: "spline", keySplines: "0.4 0 0.2 1", keyTimes: "0;1" }),
-                    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("animate", { attributeName: "opacity", from: "1", to: "0", dur: "0.2s", begin: `${contourDrawBegin}s`, fill: "freeze" })));
             }))),
         react_1.default.createElement("g", { className: "opentype-paths" }, resolvedPaths.map((path, index) => {
             const offset = fragmentOffsets[index];
             const dotRadius = strokeWidth / 2;
+            const pathColor = getWordColor(path.wordIndex);
             // Skip fragment offset when chart intro handles the transition
             const useFragmentOffset = isFragmented && !shouldShowChartIntro;
             return (react_1.default.createElement("g", { key: path.id, transform: useFragmentOffset ? `translate(${offset.x}, ${offset.y})` : undefined },
                 isFragmented && !shouldShowChartIntro && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("circle", { cx: path.endpoints.start.x, cy: path.endpoints.start.y, r: dotRadius, fill: color, opacity: "0" },
+                    react_1.default.createElement("circle", { cx: path.endpoints.start.x, cy: path.endpoints.start.y, r: dotRadius, fill: pathColor, opacity: "0" },
                         react_1.default.createElement("animate", { attributeName: "opacity", from: "0", to: "1", dur: "0.15s", begin: `${chartPhaseEndTime + 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" })))),
                 (() => {
@@ -385,7 +535,7 @@ const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600, height
                     const drawDuration = shouldShowChartIntro && !isFragmented
                         ? perItemLinesDuration
                         : perItemLinesDuration + chaosDuration;
-                    return (react_1.default.createElement("path", { d: path.d, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", opacity: shouldDrawLines ? 0 : 1, strokeDasharray: shouldDrawLines ? path.length : undefined, strokeDashoffset: shouldDrawLines ? path.length : undefined },
+                    return (react_1.default.createElement("path", { d: path.d, fill: "none", stroke: pathColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", opacity: shouldDrawLines ? 0 : 1, strokeDasharray: shouldDrawLines ? path.length : undefined, strokeDashoffset: shouldDrawLines ? path.length : undefined },
                         shouldDrawLines && (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: `${drawDuration}s`, begin: `${dotsPhaseEnd + index * perItemLinesDuration}s`, fill: "freeze" }),
                             react_1.default.createElement("animate", { attributeName: "stroke-dashoffset", from: path.length, to: "0", dur: `${perItemLinesDuration}s`, begin: `${dotsPhaseEnd + index * perItemLinesDuration}s`, fill: "freeze", calcMode: "spline", keySplines: "0.4 0 0.2 1", keyTimes: "0;1" }))),

package/dist/esm/OpenTypeTextReveal.js

@@ -180,7 +180,69 @@ function splitPathIntoContours(d) {
     }
     return contours;
 }
-export const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600, height = 150, centerText = true, showChartIntro, chartDuration = 1.5, chartLineFadeDuration = 0.5, chartPauseDuration = 0.3, chartTransitionDuration = 0.8, chartPattern = "latency", chaosMode = "none", chaosDuration = 2, dotsDuration = 1.5, flowDuration = 2, flowDelay = 0.3, particlesPerPath = 1, particleRadius = 2, color = "currentColor", particleColor, strokeWidth = 1.5, opacity = 0.9, showGlow = true, fadeAfterAssembly = true, fadeOpacity = 0.5, loop = true, loopDelay = 1, }) => {
+/**
+ * Sample points along an SVG path using browser's native getPointAtLength
+ */
+function samplePointsAlongPath(d, numPoints, distribution, seed) {
+    if (numPoints <= 0)
+        return [];
+    // SSR fallback: estimate points without DOM
+    if (typeof document === 'undefined') {
+        const endpoints = getPathEndpoints(d);
+        const points = [];
+        for (let i = 0; i < numPoints; i++) {
+            const t = numPoints === 1 ? 0 : i / (numPoints - 1);
+            points.push({
+                x: endpoints.start.x + (endpoints.end.x - endpoints.start.x) * t,
+                y: endpoints.start.y + (endpoints.end.y - endpoints.start.y) * t,
+            });
+        }
+        return points;
+    }
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', d);
+    const totalLength = path.getTotalLength();
+    if (totalLength === 0) {
+        const endpoints = getPathEndpoints(d);
+        return [endpoints.start];
+    }
+    // Generate normalized positions (0-1) based on distribution
+    const positions = [];
+    switch (distribution) {
+        case "even":
+            for (let i = 0; i < numPoints; i++) {
+                positions.push(numPoints === 1 ? 0 : i / (numPoints - 1));
+            }
+            break;
+        case "endpoints":
+            // Concentrate more points near 0 and 1
+            for (let i = 0; i < numPoints; i++) {
+                const t = numPoints === 1 ? 0 : i / (numPoints - 1);
+                // Apply curve to cluster at ends: more samples near 0 and 1
+                const weighted = t < 0.5
+                    ? 0.5 * Math.pow(2 * t, 0.5)
+                    : 1 - 0.5 * Math.pow(2 * (1 - t), 0.5);
+                positions.push(weighted);
+            }
+            break;
+        case "random": {
+            const random = seededRandom(seed);
+            for (let i = 0; i < numPoints; i++) {
+                positions.push(random());
+            }
+            positions.sort((a, b) => a - b); // Sort for visual consistency
+            break;
+        }
+    }
+    // Convert positions to actual points
+    const points = [];
+    for (const t of positions) {
+        const point = path.getPointAtLength(t * totalLength);
+        points.push({ x: point.x, y: point.y });
+    }
+    return points;
+}
+export const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600, height = 150, centerText = true, showChartIntro, chartDuration = 1.5, chartLineFadeDuration = 0.5, chartPauseDuration = 0.3, chartTransitionDuration = 0.8, chartPattern = "latency", dotsPerPathUnit = 30, minDotsPerContour = 1, maxDotsPerContour = 0, dotDistribution = "even", chaosMode = "none", chaosDuration = 2, dotsDuration = 1.5, flowDuration = 2, flowDelay = 0.3, particlesPerPath = 1, particleRadius = 2, color = "currentColor", wordColors, particleColor, strokeWidth = 1.5, opacity = 0.9, showGlow = true, fadeAfterAssembly = true, fadeOpacity = 0.5, loop = true, loopDelay = 1, }) => {
     const idRef = useRef(null);
     if (idRef.current === null) {
         idRef.current = `otr${globalIdCounter++}`;
@@ -213,28 +275,48 @@ export const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600,
             cancelled = true;
         };
     }, [fontUrl]);
-    // Generate paths from font
-    const { paths, textWidth, textHeight } = useMemo(() => {
+    // Generate paths from font, tracking word indices
+    const { paths, textWidth, textHeight, wordCount } = useMemo(() => {
         if (!font) {
-            return { paths: [], textWidth: 0, textHeight: fontSize };
+            return { paths: [], textWidth: 0, textHeight: fontSize, wordCount: 0 };
         }
-        // Get the path for the text
-        const textPath = font.getPath(text, 0, fontSize, fontSize);
-        const pathData = textPath.toPathData(2); // 2 decimal places
-        // Split into individual contours (each letter shape)
-        const contours = splitPathIntoContours(pathData);
-        const pathInfos = contours.map((d, index) => ({
-            d,
-            id: `contour-${index}`,
-            length: estimatePathLength(d),
-            endpoints: getPathEndpoints(d),
-        }));
-        // Calculate bounds
-        const bbox = textPath.getBoundingBox();
+        // Split text into words and generate paths per word
+        const words = text.split(/\s+/).filter(w => w.length > 0);
+        const pathInfos = [];
+        let currentX = 0;
+        let contourIndex = 0;
+        // Track overall bounds
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        words.forEach((word, wordIndex) => {
+            // Get path for this word
+            const wordPath = font.getPath(word, currentX, fontSize, fontSize);
+            const pathData = wordPath.toPathData(2);
+            const contours = splitPathIntoContours(pathData);
+            // Add contours with word index
+            contours.forEach((d) => {
+                pathInfos.push({
+                    d,
+                    id: `contour-${contourIndex++}`,
+                    length: estimatePathLength(d),
+                    endpoints: getPathEndpoints(d),
+                    wordIndex,
+                });
+            });
+            // Update bounds
+            const bbox = wordPath.getBoundingBox();
+            minX = Math.min(minX, bbox.x1);
+            minY = Math.min(minY, bbox.y1);
+            maxX = Math.max(maxX, bbox.x2);
+            maxY = Math.max(maxY, bbox.y2);
+            // Advance X position for next word (add space width)
+            const spaceWidth = font.getAdvanceWidth(' ', fontSize);
+            currentX = bbox.x2 + spaceWidth;
+        });
         return {
             paths: pathInfos,
-            textWidth: bbox.x2 - bbox.x1,
-            textHeight: bbox.y2 - bbox.y1,
+            textWidth: maxX - minX,
+            textHeight: maxY - minY,
+            wordCount: words.length,
         };
     }, [font, text, fontSize]);
     // Calculate centering offset
@@ -255,17 +337,71 @@ export const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600,
             y: (random() - 0.5) * 100,
         }));
     }, [resolvedPaths]);
-    // Generate chart positions for the intro animation
+    // Calculate dots per contour based on path length
+    const dotsPerContour = useMemo(() => {
+        return resolvedPaths.map(path => {
+            const rawCount = Math.round(path.length / dotsPerPathUnit);
+            const bounded = maxDotsPerContour > 0
+                ? Math.min(rawCount, maxDotsPerContour)
+                : rawCount;
+            return Math.max(minDotsPerContour, bounded);
+        });
+    }, [resolvedPaths, dotsPerPathUnit, minDotsPerContour, maxDotsPerContour]);
+    const totalDots = useMemo(() => {
+        return dotsPerContour.reduce((a, b) => a + b, 0);
+    }, [dotsPerContour]);
+    // Count dots per word for chart generation
+    const dotsPerWord = useMemo(() => {
+        const counts = [];
+        resolvedPaths.forEach((path, contourIndex) => {
+            const wordIdx = path.wordIndex;
+            while (counts.length <= wordIdx)
+                counts.push(0);
+            counts[wordIdx] += dotsPerContour[contourIndex];
+        });
+        return counts;
+    }, [resolvedPaths, dotsPerContour]);
+    // Generate chart positions per word - each word gets its own full-width line
     const chartPositions = useMemo(() => {
         if (!shouldShowChartIntro)
             return [];
-        return generateChartPositions(resolvedPaths.length, width, height, chartPattern, 123);
-    }, [shouldShowChartIntro, resolvedPaths.length, width, height, chartPattern]);
-    // Target positions for dots after chart phase
-    // Always go to final letter positions (path start points)
+        const allPositions = [];
+        dotsPerWord.forEach((numDots, wordIndex) => {
+            if (numDots === 0)
+                return;
+            // Each word gets its own time-series spanning the full width
+            // Use different seed per word for variation
+            const wordPositions = generateChartPositions(numDots, width, height, chartPattern, 123 + wordIndex * 1000);
+            wordPositions.forEach(pos => {
+                allPositions.push(Object.assign(Object.assign({}, pos), { wordIndex }));
+            });
+        });
+        return allPositions;
+    }, [shouldShowChartIntro, dotsPerWord, width, height, chartPattern]);
+    // Target positions for dots after chart phase - sampled along each contour
     const dotTargetPositions = useMemo(() => {
-        return resolvedPaths.map((path) => path.endpoints.start);
-    }, [resolvedPaths]);
+        // Group by word first to match chart positions order
+        const positionsByWord = [];
+        resolvedPaths.forEach((path, contourIndex) => {
+            const wordIdx = path.wordIndex;
+            while (positionsByWord.length <= wordIdx)
+                positionsByWord.push([]);
+            const numDots = dotsPerContour[contourIndex];
+            const sampledPoints = samplePointsAlongPath(path.d, numDots, dotDistribution, contourIndex * 1000);
+            sampledPoints.forEach(point => {
+                positionsByWord[wordIdx].push(Object.assign(Object.assign({}, point), { contourIndex, wordIndex: wordIdx }));
+            });
+        });
+        // Flatten in word order to match chartPositions
+        return positionsByWord.flat();
+    }, [resolvedPaths, dotsPerContour, dotDistribution]);
+    // Helper to get color for a word index
+    const getWordColor = (wordIndex) => {
+        if (wordColors && wordColors.length > 0) {
+            return wordColors[wordIndex % wordColors.length];
+        }
+        return color;
+    };
     // Chart intro timing
     const chartPhaseEndTime = shouldShowChartIntro
         ? chartDuration + chartLineFadeDuration + chartPauseDuration + chartTransitionDuration
@@ -314,9 +450,19 @@ export const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600,
                 React.createElement("stop", { offset: "0%", style: { stopColor: finalParticleColor, stopOpacity: 1 } }),
                 React.createElement("stop", { offset: "100%", style: { stopColor: finalParticleColor, stopOpacity: 0.3 } }))),
         shouldShowChartIntro && chartPositions.length > 0 && (React.createElement("g", { className: "chart-intro" },
-            React.createElement("polyline", { points: chartPositions.map(p => `${p.x},${p.y}`).join(' '), fill: "none", stroke: color, strokeWidth: strokeWidth * 0.75, strokeLinecap: "round", strokeLinejoin: "round", opacity: "0" },
-                React.createElement("animate", { attributeName: "opacity", from: "0", to: "0.6", dur: "0.3s", begin: "0s", fill: "freeze" }),
-                React.createElement("animate", { attributeName: "opacity", from: "0.6", to: "0", dur: `${chartLineFadeDuration}s`, begin: `${chartDuration}s`, fill: "freeze" })),
+            (() => {
+                // Group chart positions by word (chartPositions now has wordIndex)
+                const positionsByWord = new Map();
+                chartPositions.forEach((pos) => {
+                    if (!positionsByWord.has(pos.wordIndex)) {
+                        positionsByWord.set(pos.wordIndex, []);
+                    }
+                    positionsByWord.get(pos.wordIndex).push({ x: pos.x, y: pos.y });
+                });
+                return Array.from(positionsByWord.entries()).map(([wordIndex, positions]) => (React.createElement("polyline", { key: `chart-line-${wordIndex}`, points: positions.map(p => `${p.x},${p.y}`).join(' '), fill: "none", stroke: getWordColor(wordIndex), strokeWidth: strokeWidth * 0.75, strokeLinecap: "round", strokeLinejoin: "round", opacity: "0" },
+                    React.createElement("animate", { attributeName: "opacity", from: "0", to: "0.6", dur: "0.3s", begin: "0s", fill: "freeze" }),
+                    React.createElement("animate", { attributeName: "opacity", from: "0.6", to: "0", dur: `${chartLineFadeDuration}s`, begin: `${chartDuration}s`, fill: "freeze" }))));
+            })(),
             chartPositions.map((chartPos, index) => {
                 const targetPos = dotTargetPositions[index];
                 if (!targetPos)
@@ -324,20 +470,24 @@ export const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600,
                 const dotRadius = strokeWidth;
                 const dotAppearDelay = (index / chartPositions.length) * 0.5; // Stagger appearance
                 const transitionBegin = chartDuration + chartLineFadeDuration + chartPauseDuration;
-                return (React.createElement("circle", { key: `chart-dot-${index}`, cx: chartPos.x, cy: chartPos.y, r: dotRadius, fill: color, opacity: "0" },
+                // Fade out when this dot's contour starts drawing
+                const contourDrawBegin = dotsPhaseEnd + (targetPos.contourIndex + 1) * perItemLinesDuration;
+                const dotColor = getWordColor(chartPos.wordIndex);
+                return (React.createElement("circle", { key: `chart-dot-${index}`, cx: chartPos.x, cy: chartPos.y, r: dotRadius, fill: dotColor, opacity: "0" },
                     React.createElement("animate", { attributeName: "opacity", from: "0", to: "1", dur: "0.15s", begin: `${dotAppearDelay}s`, fill: "freeze" }),
                     React.createElement("animate", { attributeName: "cx", from: chartPos.x, to: targetPos.x, dur: `${chartTransitionDuration}s`, begin: `${transitionBegin}s`, fill: "freeze", calcMode: "spline", keySplines: "0.4 0 0.2 1", keyTimes: "0;1" }),
                     React.createElement("animate", { attributeName: "cy", from: chartPos.y, to: targetPos.y, dur: `${chartTransitionDuration}s`, begin: `${transitionBegin}s`, fill: "freeze", calcMode: "spline", keySplines: "0.4 0 0.2 1", keyTimes: "0;1" }),
-                    React.createElement("animate", { attributeName: "opacity", from: "1", to: "0", dur: "0.2s", begin: `${dotsPhaseEnd + (index + 1) * perItemLinesDuration}s`, fill: "freeze" })));
+                    React.createElement("animate", { attributeName: "opacity", from: "1", to: "0", dur: "0.2s", begin: `${contourDrawBegin}s`, fill: "freeze" })));
             }))),
         React.createElement("g", { className: "opentype-paths" }, resolvedPaths.map((path, index) => {
             const offset = fragmentOffsets[index];
             const dotRadius = strokeWidth / 2;
+            const pathColor = getWordColor(path.wordIndex);
             // Skip fragment offset when chart intro handles the transition
             const useFragmentOffset = isFragmented && !shouldShowChartIntro;
             return (React.createElement("g", { key: path.id, transform: useFragmentOffset ? `translate(${offset.x}, ${offset.y})` : undefined },
                 isFragmented && !shouldShowChartIntro && (React.createElement(React.Fragment, null,
-                    React.createElement("circle", { cx: path.endpoints.start.x, cy: path.endpoints.start.y, r: dotRadius, fill: color, opacity: "0" },
+                    React.createElement("circle", { cx: path.endpoints.start.x, cy: path.endpoints.start.y, r: dotRadius, fill: pathColor, opacity: "0" },
                         React.createElement("animate", { attributeName: "opacity", from: "0", to: "1", dur: "0.15s", begin: `${chartPhaseEndTime + index * perItemDotsDuration}s`, fill: "freeze" }),
                         React.createElement("animate", { attributeName: "opacity", from: "1", to: "0", dur: "0.2s", begin: `${dotsPhaseEnd + (index + 1) * perItemLinesDuration}s`, fill: "freeze" })))),
                 (() => {
@@ -346,7 +496,7 @@ export const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600,
                     const drawDuration = shouldShowChartIntro && !isFragmented
                         ? perItemLinesDuration
                         : perItemLinesDuration + chaosDuration;
-                    return (React.createElement("path", { d: path.d, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", opacity: shouldDrawLines ? 0 : 1, strokeDasharray: shouldDrawLines ? path.length : undefined, strokeDashoffset: shouldDrawLines ? path.length : undefined },
+                    return (React.createElement("path", { d: path.d, fill: "none", stroke: pathColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", opacity: shouldDrawLines ? 0 : 1, strokeDasharray: shouldDrawLines ? path.length : undefined, strokeDashoffset: shouldDrawLines ? path.length : undefined },
                         shouldDrawLines && (React.createElement(React.Fragment, null,
                             React.createElement("animate", { attributeName: "opacity", values: `0;1;1;${fadeAfterAssembly ? fadeOpacity : 1}`, keyTimes: "0;0.1;0.9;1", dur: `${drawDuration}s`, begin: `${dotsPhaseEnd + index * perItemLinesDuration}s`, fill: "freeze" }),
                             React.createElement("animate", { attributeName: "stroke-dashoffset", from: path.length, to: "0", dur: `${perItemLinesDuration}s`, begin: `${dotsPhaseEnd + index * perItemLinesDuration}s`, fill: "freeze", calcMode: "spline", keySplines: "0.4 0 0.2 1", keyTimes: "0;1" }))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/logo-component",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Animated wireframe sphere logo component",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",