@principal-ai/logo-component 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +66 -0
- package/dist/Logo.d.ts +10 -0
- package/dist/Logo.js +93 -0
- package/dist/esm/Logo.js +86 -0
- package/dist/esm/index.js +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +1 -0
- package/dist/index.js +5 -0
- package/package.json +40 -0
package/README.md
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
# Logo Component
|
|
2
|
+
|
|
3
|
+
An animated wireframe sphere logo component for React.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @principal-ai/logo-component
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { Logo } from '@principal-ai/logo-component';
|
|
15
|
+
|
|
16
|
+
function App() {
|
|
17
|
+
return (
|
|
18
|
+
<Logo
|
|
19
|
+
width={150}
|
|
20
|
+
height={150}
|
|
21
|
+
color="currentColor"
|
|
22
|
+
particleColor="#00ff00"
|
|
23
|
+
opacity={0.9}
|
|
24
|
+
/>
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Props
|
|
30
|
+
|
|
31
|
+
- `width` (number, default: 150): Width of the logo in pixels
|
|
32
|
+
- `height` (number, default: 150): Height of the logo in pixels
|
|
33
|
+
- `color` (string, default: "currentColor"): Color of the wireframe lines
|
|
34
|
+
- `particleColor` (string, optional): Color of the animated particles (defaults to `color`)
|
|
35
|
+
- `opacity` (number, default: 0.9): Overall opacity of the logo
|
|
36
|
+
|
|
37
|
+
## Exporting PNG icons
|
|
38
|
+
|
|
39
|
+
Use the provided script to render the SVG at a high resolution and optionally convert it to a PNG. The script will always write an SVG, and if [`sharp`](https://sharp.pixelplumbing.com/) is installed it will also generate a PNG while keeping transparency intact.
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
# Install sharp once if you plan to generate PNGs
|
|
43
|
+
npm install sharp
|
|
44
|
+
|
|
45
|
+
# Export a 1024x1024 icon (SVG + PNG) to the exports/ directory
|
|
46
|
+
npm run export-icon
|
|
47
|
+
|
|
48
|
+
# Customize the export (e.g. different size, colors, or SVG only)
|
|
49
|
+
npm run export-icon -- --size=512 --color=#ff00ff --svg-only
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Available flags
|
|
53
|
+
|
|
54
|
+
- `--size <number>` – Output width and height in pixels (default: `1024`).
|
|
55
|
+
- `--color <hex>` – Stroke color for the wireframe (default: `#00ffff`).
|
|
56
|
+
- `--particle-color <hex>` – Particle color (defaults to `--color`).
|
|
57
|
+
- `--opacity <0-1>` – Overrides the root SVG opacity (default: `1`).
|
|
58
|
+
- `--output <path>` – Destination directory (default: `exports`).
|
|
59
|
+
- `--name <string>` – Base file name used for the exports (default: `logo`).
|
|
60
|
+
- `--svg-only` – Skip PNG generation, useful if `sharp` is not installed.
|
|
61
|
+
- `--background <hex|transparent>` – Fill color to apply behind the icon when rasterizing.
|
|
62
|
+
- `--density-multiplier <number>` – Multiplies the rasterization density before resizing (default: `2`).
|
|
63
|
+
|
|
64
|
+
## License
|
|
65
|
+
|
|
66
|
+
MIT
|
package/dist/Logo.d.ts
ADDED
package/dist/Logo.js
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.Logo = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, opacity = 0.9, }) => {
|
|
9
|
+
const finalParticleColor = particleColor || color;
|
|
10
|
+
return (react_1.default.createElement("svg", { width: width, height: height, viewBox: "0 0 200 200", xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
|
|
11
|
+
react_1.default.createElement("defs", null,
|
|
12
|
+
react_1.default.createElement("radialGradient", { id: "sphereGlow", cx: "50%", cy: "50%", r: "50%" },
|
|
13
|
+
react_1.default.createElement("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.3 } }),
|
|
14
|
+
react_1.default.createElement("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })),
|
|
15
|
+
react_1.default.createElement("radialGradient", { id: "centerPulse", cx: "50%", cy: "50%", r: "50%" },
|
|
16
|
+
react_1.default.createElement("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.8 } },
|
|
17
|
+
react_1.default.createElement("animate", { attributeName: "stop-opacity", values: "0.8;0.3;0.8", dur: "2s", repeatCount: "indefinite" })),
|
|
18
|
+
react_1.default.createElement("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } }))),
|
|
19
|
+
react_1.default.createElement("circle", { cx: "100", cy: "100", r: "80", fill: "url(#sphereGlow)", opacity: "0.5" }),
|
|
20
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "33", cy: "100", opacity: "0" },
|
|
21
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "1s", path: "M 33,100 A 67,27 0 0,0 167,100 A 67,27 0 0,0 33,100" }),
|
|
22
|
+
react_1.default.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "1s", repeatCount: "indefinite" })),
|
|
23
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "33", cy: "100", opacity: "0" },
|
|
24
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "2s", path: "M 33,100 A 67,40 0 0,0 167,100 A 67,40 0 0,0 33,100" }),
|
|
25
|
+
react_1.default.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "2s", repeatCount: "indefinite" })),
|
|
26
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "33", cy: "100", opacity: "0" },
|
|
27
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3s", path: "M 33,100 A 67,53 0 0,0 167,100 A 67,53 0 0,0 33,100" }),
|
|
28
|
+
react_1.default.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "3s", repeatCount: "indefinite" })),
|
|
29
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "33", opacity: "0" },
|
|
30
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "1.5s", path: "M 100,33 A 27,67 0 0,0 100,167 A 27,67 0 0,0 100,33" }),
|
|
31
|
+
react_1.default.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "1.5s", repeatCount: "indefinite" })),
|
|
32
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "33", opacity: "0" },
|
|
33
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "2.5s", path: "M 100,33 A 40,67 0 0,0 100,167 A 40,67 0 0,0 100,33" }),
|
|
34
|
+
react_1.default.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "2.5s", repeatCount: "indefinite" })),
|
|
35
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "33", opacity: "0" },
|
|
36
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3.5s", path: "M 100,33 A 53,67 0 0,0 100,167 A 53,67 0 0,0 100,33" }),
|
|
37
|
+
react_1.default.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "3.5s", repeatCount: "indefinite" })),
|
|
38
|
+
react_1.default.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
39
|
+
react_1.default.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
40
|
+
react_1.default.createElement("circle", { cx: "93", cy: "95", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
41
|
+
react_1.default.createElement("circle", { cx: "93", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
42
|
+
react_1.default.createElement("circle", { cx: "93", cy: "105", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
43
|
+
react_1.default.createElement("circle", { cx: "93", cy: "110", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
44
|
+
react_1.default.createElement("circle", { cx: "93", cy: "115", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
45
|
+
react_1.default.createElement("circle", { cx: "98", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
46
|
+
react_1.default.createElement("circle", { cx: "103", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
47
|
+
react_1.default.createElement("circle", { cx: "108", cy: "90", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
48
|
+
react_1.default.createElement("circle", { cx: "108", cy: "95", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
49
|
+
react_1.default.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
50
|
+
react_1.default.createElement("circle", { cx: "98", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
51
|
+
react_1.default.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.9" }),
|
|
52
|
+
react_1.default.createElement("path", { d: "M 33,100 A 67,13 0 0,1 73,88.1", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
53
|
+
react_1.default.createElement("path", { d: "M 127,88.1 A 67,13 0 0,1 167,100", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
54
|
+
react_1.default.createElement("path", { d: "M 33,100 A 67,13 0 0,0 73,111.9", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
55
|
+
react_1.default.createElement("path", { d: "M 127,111.9 A 67,13 0 0,0 167,100", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
56
|
+
react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "27", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
57
|
+
react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
58
|
+
react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "53", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
59
|
+
react_1.default.createElement("path", { d: "M 100,33 A 13,67 0 0,0 87,73", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
60
|
+
react_1.default.createElement("path", { d: "M 113,73 A 13,67 0 0,0 100,33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
61
|
+
react_1.default.createElement("path", { d: "M 100,167 A 13,67 0 0,1 87,127", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
62
|
+
react_1.default.createElement("path", { d: "M 113,127 A 13,67 0 0,1 100,167", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
63
|
+
react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "27", ry: "67", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
64
|
+
react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "40", ry: "67", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
65
|
+
react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "53", ry: "67", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
66
|
+
react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.6", transform: "rotate(30 100 100)" }),
|
|
67
|
+
react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.6", transform: "rotate(60 100 100)" }),
|
|
68
|
+
react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.6", transform: "rotate(120 100 100)" }),
|
|
69
|
+
react_1.default.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.6", transform: "rotate(150 100 100)" }),
|
|
70
|
+
react_1.default.createElement("line", { x1: "33", y1: "100", x2: "73", y2: "100", stroke: color, strokeWidth: "1.5", opacity: "0.8" }),
|
|
71
|
+
react_1.default.createElement("line", { x1: "127", y1: "100", x2: "167", y2: "100", stroke: color, strokeWidth: "1.5", opacity: "0.8" }),
|
|
72
|
+
react_1.default.createElement("line", { x1: "100", y1: "33", x2: "100", y2: "73", stroke: color, strokeWidth: "1.5", opacity: "0.8" }),
|
|
73
|
+
react_1.default.createElement("line", { x1: "100", y1: "127", x2: "100", y2: "167", stroke: color, strokeWidth: "1.5", opacity: "0.8" }),
|
|
74
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "33", cy: "100", opacity: "0" },
|
|
75
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "1s", path: "M 33,100 A 67,27 0 0,0 167,100 A 67,27 0 0,0 33,100" }),
|
|
76
|
+
react_1.default.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "1s", repeatCount: "indefinite" })),
|
|
77
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "33", cy: "100", opacity: "0" },
|
|
78
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "2s", path: "M 33,100 A 67,40 0 0,0 167,100 A 67,40 0 0,0 33,100" }),
|
|
79
|
+
react_1.default.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "2s", repeatCount: "indefinite" })),
|
|
80
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "33", cy: "100", opacity: "0" },
|
|
81
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3s", path: "M 33,100 A 67,53 0 0,0 167,100 A 67,53 0 0,0 33,100" }),
|
|
82
|
+
react_1.default.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "3s", repeatCount: "indefinite" })),
|
|
83
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "33", opacity: "0" },
|
|
84
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "1.5s", path: "M 100,33 A 27,67 0 0,0 100,167 A 27,67 0 0,0 100,33" }),
|
|
85
|
+
react_1.default.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "1.5s", repeatCount: "indefinite" })),
|
|
86
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "33", opacity: "0" },
|
|
87
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "2.5s", path: "M 100,33 A 40,67 0 0,0 100,167 A 40,67 0 0,0 100,33" }),
|
|
88
|
+
react_1.default.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "2.5s", repeatCount: "indefinite" })),
|
|
89
|
+
react_1.default.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "33", opacity: "0" },
|
|
90
|
+
react_1.default.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3.5s", path: "M 100,33 A 53,67 0 0,0 100,167 A 53,67 0 0,0 100,33" }),
|
|
91
|
+
react_1.default.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "3.5s", repeatCount: "indefinite" }))));
|
|
92
|
+
};
|
|
93
|
+
exports.Logo = Logo;
|
package/dist/esm/Logo.js
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export const Logo = ({ width = 150, height = 150, color = "currentColor", particleColor, opacity = 0.9, }) => {
|
|
3
|
+
const finalParticleColor = particleColor || color;
|
|
4
|
+
return (React.createElement("svg", { width: width, height: height, viewBox: "0 0 200 200", xmlns: "http://www.w3.org/2000/svg", style: { opacity } },
|
|
5
|
+
React.createElement("defs", null,
|
|
6
|
+
React.createElement("radialGradient", { id: "sphereGlow", cx: "50%", cy: "50%", r: "50%" },
|
|
7
|
+
React.createElement("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.3 } }),
|
|
8
|
+
React.createElement("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })),
|
|
9
|
+
React.createElement("radialGradient", { id: "centerPulse", cx: "50%", cy: "50%", r: "50%" },
|
|
10
|
+
React.createElement("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.8 } },
|
|
11
|
+
React.createElement("animate", { attributeName: "stop-opacity", values: "0.8;0.3;0.8", dur: "2s", repeatCount: "indefinite" })),
|
|
12
|
+
React.createElement("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } }))),
|
|
13
|
+
React.createElement("circle", { cx: "100", cy: "100", r: "80", fill: "url(#sphereGlow)", opacity: "0.5" }),
|
|
14
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "33", cy: "100", opacity: "0" },
|
|
15
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "1s", path: "M 33,100 A 67,27 0 0,0 167,100 A 67,27 0 0,0 33,100" }),
|
|
16
|
+
React.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "1s", repeatCount: "indefinite" })),
|
|
17
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "33", cy: "100", opacity: "0" },
|
|
18
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "2s", path: "M 33,100 A 67,40 0 0,0 167,100 A 67,40 0 0,0 33,100" }),
|
|
19
|
+
React.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "2s", repeatCount: "indefinite" })),
|
|
20
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "33", cy: "100", opacity: "0" },
|
|
21
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3s", path: "M 33,100 A 67,53 0 0,0 167,100 A 67,53 0 0,0 33,100" }),
|
|
22
|
+
React.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "3s", repeatCount: "indefinite" })),
|
|
23
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "33", opacity: "0" },
|
|
24
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "1.5s", path: "M 100,33 A 27,67 0 0,0 100,167 A 27,67 0 0,0 100,33" }),
|
|
25
|
+
React.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "1.5s", repeatCount: "indefinite" })),
|
|
26
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "33", opacity: "0" },
|
|
27
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "2.5s", path: "M 100,33 A 40,67 0 0,0 100,167 A 40,67 0 0,0 100,33" }),
|
|
28
|
+
React.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "2.5s", repeatCount: "indefinite" })),
|
|
29
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "33", opacity: "0" },
|
|
30
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3.5s", path: "M 100,33 A 53,67 0 0,0 100,167 A 53,67 0 0,0 100,33" }),
|
|
31
|
+
React.createElement("animate", { attributeName: "opacity", values: "0;1;0.5;0;0", keyTimes: "0;0.2;0.4;0.5;1", dur: "8s", begin: "3.5s", repeatCount: "indefinite" })),
|
|
32
|
+
React.createElement("circle", { cx: "93", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
33
|
+
React.createElement("circle", { cx: "93", cy: "90", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
34
|
+
React.createElement("circle", { cx: "93", cy: "95", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
35
|
+
React.createElement("circle", { cx: "93", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
36
|
+
React.createElement("circle", { cx: "93", cy: "105", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
37
|
+
React.createElement("circle", { cx: "93", cy: "110", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
38
|
+
React.createElement("circle", { cx: "93", cy: "115", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
39
|
+
React.createElement("circle", { cx: "98", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
40
|
+
React.createElement("circle", { cx: "103", cy: "85", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
41
|
+
React.createElement("circle", { cx: "108", cy: "90", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
42
|
+
React.createElement("circle", { cx: "108", cy: "95", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
43
|
+
React.createElement("circle", { cx: "103", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
44
|
+
React.createElement("circle", { cx: "98", cy: "100", r: "2", fill: finalParticleColor, opacity: "0.9" }),
|
|
45
|
+
React.createElement("circle", { cx: "100", cy: "100", r: "67", fill: "none", stroke: color, strokeWidth: "1.5", opacity: "0.9" }),
|
|
46
|
+
React.createElement("path", { d: "M 33,100 A 67,13 0 0,1 73,88.1", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
47
|
+
React.createElement("path", { d: "M 127,88.1 A 67,13 0 0,1 167,100", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
48
|
+
React.createElement("path", { d: "M 33,100 A 67,13 0 0,0 73,111.9", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
49
|
+
React.createElement("path", { d: "M 127,111.9 A 67,13 0 0,0 167,100", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
50
|
+
React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "27", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
51
|
+
React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "40", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
52
|
+
React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "53", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
53
|
+
React.createElement("path", { d: "M 100,33 A 13,67 0 0,0 87,73", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
54
|
+
React.createElement("path", { d: "M 113,73 A 13,67 0 0,0 100,33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
55
|
+
React.createElement("path", { d: "M 100,167 A 13,67 0 0,1 87,127", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
56
|
+
React.createElement("path", { d: "M 113,127 A 13,67 0 0,1 100,167", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
57
|
+
React.createElement("ellipse", { cx: "100", cy: "100", rx: "27", ry: "67", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
58
|
+
React.createElement("ellipse", { cx: "100", cy: "100", rx: "40", ry: "67", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
59
|
+
React.createElement("ellipse", { cx: "100", cy: "100", rx: "53", ry: "67", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.7" }),
|
|
60
|
+
React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.6", transform: "rotate(30 100 100)" }),
|
|
61
|
+
React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.6", transform: "rotate(60 100 100)" }),
|
|
62
|
+
React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.6", transform: "rotate(120 100 100)" }),
|
|
63
|
+
React.createElement("ellipse", { cx: "100", cy: "100", rx: "67", ry: "33", fill: "none", stroke: color, strokeWidth: "1", opacity: "0.6", transform: "rotate(150 100 100)" }),
|
|
64
|
+
React.createElement("line", { x1: "33", y1: "100", x2: "73", y2: "100", stroke: color, strokeWidth: "1.5", opacity: "0.8" }),
|
|
65
|
+
React.createElement("line", { x1: "127", y1: "100", x2: "167", y2: "100", stroke: color, strokeWidth: "1.5", opacity: "0.8" }),
|
|
66
|
+
React.createElement("line", { x1: "100", y1: "33", x2: "100", y2: "73", stroke: color, strokeWidth: "1.5", opacity: "0.8" }),
|
|
67
|
+
React.createElement("line", { x1: "100", y1: "127", x2: "100", y2: "167", stroke: color, strokeWidth: "1.5", opacity: "0.8" }),
|
|
68
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "33", cy: "100", opacity: "0" },
|
|
69
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "1s", path: "M 33,100 A 67,27 0 0,0 167,100 A 67,27 0 0,0 33,100" }),
|
|
70
|
+
React.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "1s", repeatCount: "indefinite" })),
|
|
71
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "33", cy: "100", opacity: "0" },
|
|
72
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "2s", path: "M 33,100 A 67,40 0 0,0 167,100 A 67,40 0 0,0 33,100" }),
|
|
73
|
+
React.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "2s", repeatCount: "indefinite" })),
|
|
74
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "33", cy: "100", opacity: "0" },
|
|
75
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3s", path: "M 33,100 A 67,53 0 0,0 167,100 A 67,53 0 0,0 33,100" }),
|
|
76
|
+
React.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "3s", repeatCount: "indefinite" })),
|
|
77
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "33", opacity: "0" },
|
|
78
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "1.5s", path: "M 100,33 A 27,67 0 0,0 100,167 A 27,67 0 0,0 100,33" }),
|
|
79
|
+
React.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "1.5s", repeatCount: "indefinite" })),
|
|
80
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "33", opacity: "0" },
|
|
81
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "2.5s", path: "M 100,33 A 40,67 0 0,0 100,167 A 40,67 0 0,0 100,33" }),
|
|
82
|
+
React.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "2.5s", repeatCount: "indefinite" })),
|
|
83
|
+
React.createElement("circle", { r: "2.5", fill: finalParticleColor, cx: "100", cy: "33", opacity: "0" },
|
|
84
|
+
React.createElement("animateMotion", { dur: "8s", repeatCount: "indefinite", begin: "3.5s", path: "M 100,33 A 53,67 0 0,0 100,167 A 53,67 0 0,0 100,33" }),
|
|
85
|
+
React.createElement("animate", { attributeName: "opacity", values: "0;0;0.5;1;1;0.5;0", keyTimes: "0;0.5;0.6;0.75;0.9;0.95;1", dur: "8s", begin: "3.5s", repeatCount: "indefinite" }))));
|
|
86
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Logo } from './Logo';
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Logo } from './Logo';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Logo } from './Logo';
|
package/dist/index.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@principal-ai/logo-component",
|
|
3
|
+
"version": "0.1.2",
|
|
4
|
+
"description": "Animated wireframe sphere logo component",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.esm.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist"
|
|
10
|
+
],
|
|
11
|
+
"scripts": {
|
|
12
|
+
"build": "rm -rf dist && tsc && tsc --project tsconfig.esm.json && cp dist/esm/index.js dist/index.esm.js",
|
|
13
|
+
"prepublishOnly": "npm run build",
|
|
14
|
+
"storybook": "storybook dev -p 6006",
|
|
15
|
+
"build-storybook": "storybook build",
|
|
16
|
+
"export-icon": "node scripts/export-icon.js"
|
|
17
|
+
},
|
|
18
|
+
"keywords": [
|
|
19
|
+
"react",
|
|
20
|
+
"logo",
|
|
21
|
+
"component",
|
|
22
|
+
"svg",
|
|
23
|
+
"animated"
|
|
24
|
+
],
|
|
25
|
+
"peerDependencies": {
|
|
26
|
+
"react": "^18.0.0 || ^19.0.0"
|
|
27
|
+
},
|
|
28
|
+
"devDependencies": {
|
|
29
|
+
"@storybook/addon-essentials": "^8.6.14",
|
|
30
|
+
"@storybook/blocks": "^8.6.14",
|
|
31
|
+
"@storybook/react": "^8.6.14",
|
|
32
|
+
"@storybook/react-vite": "^8.6.14",
|
|
33
|
+
"@types/react": "^19.1.12",
|
|
34
|
+
"@vitejs/plugin-react": "^4.7.0",
|
|
35
|
+
"react": "^19.1.1",
|
|
36
|
+
"storybook": "^8.6.14",
|
|
37
|
+
"typescript": "^5",
|
|
38
|
+
"vite": "^5.4.20"
|
|
39
|
+
}
|
|
40
|
+
}
|