@principal-ai/logo-component 0.1.7 → 0.1.9

package/dist/OpenTypeTextReveal.d.ts

@@ -53,6 +53,8 @@ interface OpenTypeTextRevealProps {
     fadeOpacity?: number;
     loop?: boolean;
     loopDelay?: number;
+    /** Delay before the animation starts (in seconds). Default: 0 */
+    animationDelay?: number;
 }
 export declare const OpenTypeTextReveal: React.FC<OpenTypeTextRevealProps>;
 export {};

package/dist/OpenTypeTextReveal.js

@@ -281,7 +281,7 @@ function samplePointsAlongPath(d, numPoints, distribution, seed) {
     }
     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 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, animationDelay = 0, }) => {
     const idRef = (0, react_1.useRef)(null);
     if (idRef.current === null) {
         idRef.current = `otr${globalIdCounter++}`;
@@ -441,10 +441,10 @@ const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600, height
         }
         return color;
     };
-    // Chart intro timing
-    const chartPhaseEndTime = shouldShowChartIntro
+    // Chart intro timing (add animationDelay to offset entire sequence)
+    const chartPhaseEndTime = animationDelay + (shouldShowChartIntro
         ? chartDuration + chartLineFadeDuration + chartPauseDuration + chartTransitionDuration
-        : 0;
+        : 0);
     // Timing calculations (offset by chart phase if present)
     const numPaths = resolvedPaths.length || 1;
     const perItemDotsDuration = (dotsDuration * 0.5) / numPaths;
@@ -475,8 +475,7 @@ const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600, height
                 error)));
     }
     if (!font) {
-        return (react_1.default.createElement("svg", { width: width, height: height },
-            react_1.default.createElement("text", { x: 10, y: 30, fill: color, fontSize: 14 }, "Loading font...")));
+        return null;
     }
     return (react_1.default.createElement("svg", { key: cycle, width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
         react_1.default.createElement("defs", null,
@@ -499,16 +498,16 @@ const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600, height
                     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" }))));
+                    react_1.default.createElement("animate", { attributeName: "opacity", from: "0", to: "0.6", dur: "0.3s", begin: `${animationDelay}s`, fill: "freeze" }),
+                    react_1.default.createElement("animate", { attributeName: "opacity", from: "0.6", to: "0", dur: `${chartLineFadeDuration}s`, begin: `${animationDelay + chartDuration}s`, fill: "freeze" }))));
             })(),
             chartPositions.map((chartPos, index) => {
                 const targetPos = dotTargetPositions[index];
                 if (!targetPos)
                     return null;
                 const dotRadius = strokeWidth;
-                const dotAppearDelay = (index / chartPositions.length) * 0.5; // Stagger appearance
-                const transitionBegin = chartDuration + chartLineFadeDuration + chartPauseDuration;
+                const dotAppearDelay = animationDelay + (index / chartPositions.length) * 0.5; // Stagger appearance
+                const transitionBegin = animationDelay + chartDuration + chartLineFadeDuration + chartPauseDuration;
                 // Fade out when this dot's contour starts drawing
                 const contourDrawBegin = dotsPhaseEnd + (targetPos.contourIndex + 1) * perItemLinesDuration;
                 const dotColor = getWordColor(chartPos.wordIndex);

package/dist/esm/OpenTypeTextReveal.js

@@ -242,7 +242,7 @@ function samplePointsAlongPath(d, numPoints, distribution, seed) {
     }
     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, }) => {
+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, animationDelay = 0, }) => {
     const idRef = useRef(null);
     if (idRef.current === null) {
         idRef.current = `otr${globalIdCounter++}`;
@@ -402,10 +402,10 @@ export const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600,
         }
         return color;
     };
-    // Chart intro timing
-    const chartPhaseEndTime = shouldShowChartIntro
+    // Chart intro timing (add animationDelay to offset entire sequence)
+    const chartPhaseEndTime = animationDelay + (shouldShowChartIntro
         ? chartDuration + chartLineFadeDuration + chartPauseDuration + chartTransitionDuration
-        : 0;
+        : 0);
     // Timing calculations (offset by chart phase if present)
     const numPaths = resolvedPaths.length || 1;
     const perItemDotsDuration = (dotsDuration * 0.5) / numPaths;
@@ -436,8 +436,7 @@ export const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600,
                 error)));
     }
     if (!font) {
-        return (React.createElement("svg", { width: width, height: height },
-            React.createElement("text", { x: 10, y: 30, fill: color, fontSize: 14 }, "Loading font...")));
+        return null;
     }
     return (React.createElement("svg", { key: cycle, width: width, height: height, viewBox: `0 0 ${width} ${height}`, xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
         React.createElement("defs", null,
@@ -460,16 +459,16 @@ export const OpenTypeTextReveal = ({ text, fontUrl, fontSize = 72, width = 600,
                     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" }))));
+                    React.createElement("animate", { attributeName: "opacity", from: "0", to: "0.6", dur: "0.3s", begin: `${animationDelay}s`, fill: "freeze" }),
+                    React.createElement("animate", { attributeName: "opacity", from: "0.6", to: "0", dur: `${chartLineFadeDuration}s`, begin: `${animationDelay + chartDuration}s`, fill: "freeze" }))));
             })(),
             chartPositions.map((chartPos, index) => {
                 const targetPos = dotTargetPositions[index];
                 if (!targetPos)
                     return null;
                 const dotRadius = strokeWidth;
-                const dotAppearDelay = (index / chartPositions.length) * 0.5; // Stagger appearance
-                const transitionBegin = chartDuration + chartLineFadeDuration + chartPauseDuration;
+                const dotAppearDelay = animationDelay + (index / chartPositions.length) * 0.5; // Stagger appearance
+                const transitionBegin = animationDelay + chartDuration + chartLineFadeDuration + chartPauseDuration;
                 // Fade out when this dot's contour starts drawing
                 const contourDrawBegin = dotsPhaseEnd + (targetPos.contourIndex + 1) * perItemLinesDuration;
                 const dotColor = getWordColor(chartPos.wordIndex);

package/package.json

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