@nice2dev/icons 1.3.16 → 1.3.18

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.
Files changed (55) hide show
  1. package/CHANGELOG.md +47 -0
  2. package/README.md +21 -1
  3. package/dist/cjs/animationControls.js +10 -5
  4. package/dist/cjs/animationSpeed.js +102 -0
  5. package/dist/cjs/createIcon.js +68 -24
  6. package/dist/cjs/iconStyles.js +1171 -1081
  7. package/dist/cjs/icons/actions.js +2 -2
  8. package/dist/cjs/icons/brand.js +4 -747
  9. package/dist/cjs/icons/business.js +59 -23
  10. package/dist/cjs/icons/files.js +54 -54
  11. package/dist/cjs/icons/food.js +75 -557
  12. package/dist/cjs/icons/fun.js +51 -33
  13. package/dist/cjs/icons/index.js +0 -7
  14. package/dist/cjs/icons/navigation.js +26 -7
  15. package/dist/cjs/icons/omniverk.js +17 -244
  16. package/dist/cjs/icons/science.js +63 -170
  17. package/dist/cjs/icons/sports.js +45 -137
  18. package/dist/cjs/index.js +0 -7
  19. package/dist/cjs/reducedMotion.js +30 -0
  20. package/dist/cjs/smilAnimations.js +16 -3
  21. package/dist/cjs/utilities.js +4 -25
  22. package/dist/esm/animationControls.js +10 -5
  23. package/dist/esm/animationSpeed.js +102 -0
  24. package/dist/esm/createIcon.js +69 -25
  25. package/dist/esm/iconStyles.js +1171 -1081
  26. package/dist/esm/icons/actions.js +2 -2
  27. package/dist/esm/icons/brand.js +5 -748
  28. package/dist/esm/icons/business.js +59 -23
  29. package/dist/esm/icons/files.js +54 -54
  30. package/dist/esm/icons/food.js +74 -556
  31. package/dist/esm/icons/fun.js +51 -33
  32. package/dist/esm/icons/index.js +3 -10
  33. package/dist/esm/icons/navigation.js +26 -7
  34. package/dist/esm/icons/omniverk.js +17 -244
  35. package/dist/esm/icons/science.js +63 -170
  36. package/dist/esm/icons/sports.js +45 -137
  37. package/dist/esm/index.js +3 -10
  38. package/dist/esm/nicetodev-icons.css +1 -1
  39. package/dist/esm/reducedMotion.js +30 -0
  40. package/dist/esm/smilAnimations.js +16 -3
  41. package/dist/esm/utilities.js +5 -26
  42. package/dist/types/animationSpeed.d.ts +28 -0
  43. package/dist/types/createIcon.d.ts +6 -0
  44. package/dist/types/iconStyles.d.ts +12 -1
  45. package/dist/types/icons/brand.d.ts +0 -4
  46. package/dist/types/icons/food.d.ts +0 -3
  47. package/dist/types/icons/index.d.ts +3 -3
  48. package/dist/types/icons/omniverk.d.ts +0 -3
  49. package/dist/types/icons/science.d.ts +1 -1
  50. package/dist/types/reducedMotion.d.ts +6 -0
  51. package/dist/types/smilAnimations.d.ts +10 -2
  52. package/dist/types/types.d.ts +26 -0
  53. package/dist/types/utilities.d.ts +2 -2
  54. package/package.json +2 -2
  55. package/dist/cjs/nicetodev-icons.css +0 -1
package/dist/esm/iconStyles.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
2
  import { forwardRef, useId } from "react";
3
+ import { motionTree, durationScale } from "./animationSpeed.js";
4
+ import { useStillMotion } from "./reducedMotion.js";
3
5
  const wrapperBase = {
4
6
  position: "relative",
5
7
  display: "inline-flex",
@@ -16,7 +18,9 @@ const NtdIconFloral = /* @__PURE__ */ Object.assign(
16
18
  ({
17
19
  children,
18
20
  animate = true,
19
- duration = 2,
21
+ duration: durationProp,
22
+ animationSpeed,
23
+ reducedMotion,
20
24
  intensity = "normal",
21
25
  vineColor = "#22c55e",
22
26
  petalColor = "#f472b6",
@@ -24,6 +28,8 @@ const NtdIconFloral = /* @__PURE__ */ Object.assign(
24
28
  className,
25
29
  style
26
30
  }, ref) => {
31
+ const still = useStillMotion(reducedMotion);
32
+ const duration = durationProp ?? 2;
27
33
  const lc = leafColor ?? vineColor;
28
34
  const dur = `${duration}s`;
29
35
  const halfDur = `${duration * 0.5}s`;
@@ -64,137 +70,141 @@ const NtdIconFloral = /* @__PURE__ */ Object.assign(
64
70
  ] : []
65
71
  ];
66
72
  const dashLen = 250;
67
- return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
68
- children,
69
- /* @__PURE__ */ jsxs(
70
- "svg",
71
- {
72
- viewBox: "0 0 100 100",
73
- style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%" },
74
- "aria-hidden": true,
75
- children: [
76
- [vine1, vine2, ...showExtra ? [vine3, vine4] : []].map((d, i) => /* @__PURE__ */ jsx(
77
- "path",
78
- {
79
- d,
80
- fill: "none",
81
- stroke: vineColor,
82
- strokeWidth: i < 2 ? 1.5 : 1,
83
- strokeLinecap: "round",
84
- opacity: i < 2 ? 0.85 : 0.55,
85
- ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
86
- children: animate && /* @__PURE__ */ jsx(
87
- "animate",
88
- {
89
- attributeName: "stroke-dashoffset",
90
- from: `${dashLen}`,
91
- to: "0",
92
- dur,
93
- fill: "freeze",
94
- begin: i < 2 ? "0s" : `${duration * 0.3}s`
95
- }
96
- )
97
- },
98
- `v${i}`
99
- )),
100
- allLeaves.map((l, i) => /* @__PURE__ */ jsx("g", { transform: `translate(${l.x},${l.y}) rotate(${l.a})`, children: /* @__PURE__ */ jsxs("g", { opacity: animate ? 0 : 0.8, children: [
101
- /* @__PURE__ */ jsx("path", { d: leafD, fill: lc }),
102
- /* @__PURE__ */ jsx(
103
- "line",
104
- {
105
- x1: 0,
106
- y1: -3,
107
- x2: 0,
108
- y2: 2.5,
109
- stroke: lc,
110
- strokeWidth: "0.4",
111
- opacity: 0.4
112
- }
113
- ),
114
- animate && /* @__PURE__ */ jsxs(Fragment, { children: [
115
- /* @__PURE__ */ jsx(
116
- "animate",
117
- {
118
- attributeName: "opacity",
119
- from: "0",
120
- to: "0.8",
121
- dur: halfDur,
122
- begin: bloomAt,
123
- fill: "freeze"
124
- }
125
- ),
126
- /* @__PURE__ */ jsx(
127
- "animateTransform",
128
- {
129
- attributeName: "transform",
130
- type: "scale",
131
- values: "0 0;1 1",
132
- keyTimes: "0;1",
133
- keySplines: "0.34 1 0.64 1",
134
- calcMode: "spline",
135
- dur: halfDur,
136
- begin: bloomAt,
137
- fill: "freeze"
138
- }
139
- )
140
- ] })
141
- ] }) }, `l${i}`)),
142
- flowerPositions.map((f, fi) => /* @__PURE__ */ jsxs("g", { opacity: animate ? 0 : 1, children: [
143
- petalOffsets.map(([ox, oy], pi) => /* @__PURE__ */ jsx(
144
- "circle",
73
+ return motionTree(
74
+ /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
75
+ children,
76
+ /* @__PURE__ */ jsxs(
77
+ "svg",
78
+ {
79
+ viewBox: "0 0 100 100",
80
+ style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%" },
81
+ "aria-hidden": true,
82
+ children: [
83
+ [vine1, vine2, ...showExtra ? [vine3, vine4] : []].map((d, i) => /* @__PURE__ */ jsx(
84
+ "path",
145
85
  {
146
- cx: f.x + ox * f.r,
147
- cy: f.y + oy * f.r,
148
- r: f.r * 0.5,
149
- fill: petalColor,
150
- opacity: 0.85
86
+ d,
87
+ fill: "none",
88
+ stroke: vineColor,
89
+ strokeWidth: i < 2 ? 1.5 : 1,
90
+ strokeLinecap: "round",
91
+ opacity: i < 2 ? 0.85 : 0.55,
92
+ ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
93
+ children: animate && /* @__PURE__ */ jsx(
94
+ "animate",
95
+ {
96
+ attributeName: "stroke-dashoffset",
97
+ from: `${dashLen}`,
98
+ to: "0",
99
+ dur,
100
+ fill: "freeze",
101
+ begin: i < 2 ? "0s" : `${duration * 0.3}s`
102
+ }
103
+ )
151
104
  },
152
- pi
105
+ `v${i}`
153
106
  )),
154
- /* @__PURE__ */ jsx("circle", { cx: f.x, cy: f.y, r: f.r * 0.3, fill: "#fde047" }),
155
- animate && /* @__PURE__ */ jsxs(Fragment, { children: [
107
+ allLeaves.map((l, i) => /* @__PURE__ */ jsx("g", { transform: `translate(${l.x},${l.y}) rotate(${l.a})`, children: /* @__PURE__ */ jsxs("g", { opacity: animate ? 0 : 0.8, children: [
108
+ /* @__PURE__ */ jsx("path", { d: leafD, fill: lc }),
156
109
  /* @__PURE__ */ jsx(
157
- "animate",
110
+ "line",
158
111
  {
159
- attributeName: "opacity",
160
- from: "0",
161
- to: "1",
162
- dur: halfDur,
163
- begin: flowerAt,
164
- fill: "freeze"
112
+ x1: 0,
113
+ y1: -3,
114
+ x2: 0,
115
+ y2: 2.5,
116
+ stroke: lc,
117
+ strokeWidth: "0.4",
118
+ opacity: 0.4
165
119
  }
166
120
  ),
167
- /* @__PURE__ */ jsx(
168
- "animateTransform",
121
+ animate && /* @__PURE__ */ jsxs(Fragment, { children: [
122
+ /* @__PURE__ */ jsx(
123
+ "animate",
124
+ {
125
+ attributeName: "opacity",
126
+ from: "0",
127
+ to: "0.8",
128
+ dur: halfDur,
129
+ begin: bloomAt,
130
+ fill: "freeze"
131
+ }
132
+ ),
133
+ /* @__PURE__ */ jsx(
134
+ "animateTransform",
135
+ {
136
+ attributeName: "transform",
137
+ type: "scale",
138
+ values: "0 0;1 1",
139
+ keyTimes: "0;1",
140
+ keySplines: "0.34 1 0.64 1",
141
+ calcMode: "spline",
142
+ dur: halfDur,
143
+ begin: bloomAt,
144
+ fill: "freeze"
145
+ }
146
+ )
147
+ ] })
148
+ ] }) }, `l${i}`)),
149
+ flowerPositions.map((f, fi) => /* @__PURE__ */ jsxs("g", { opacity: animate ? 0 : 1, children: [
150
+ petalOffsets.map(([ox, oy], pi) => /* @__PURE__ */ jsx(
151
+ "circle",
169
152
  {
170
- attributeName: "transform",
171
- type: "scale",
172
- values: "0.3 0.3;1 1",
173
- keyTimes: "0;1",
174
- keySplines: "0.34 1 0.64 1",
175
- calcMode: "spline",
176
- dur: halfDur,
177
- begin: flowerAt,
178
- fill: "freeze"
179
- }
180
- )
181
- ] })
182
- ] }, `f${fi}`)),
183
- animate && /* @__PURE__ */ jsx(
184
- "animateTransform",
185
- {
186
- attributeName: "transform",
187
- type: "rotate",
188
- values: "0 50 50;1 50 50;-1 50 50;0 50 50",
189
- dur: "4s",
190
- repeatCount: "indefinite",
191
- begin: `${duration}s`
192
- }
193
- )
194
- ]
195
- }
196
- )
197
- ] });
153
+ cx: f.x + ox * f.r,
154
+ cy: f.y + oy * f.r,
155
+ r: f.r * 0.5,
156
+ fill: petalColor,
157
+ opacity: 0.85
158
+ },
159
+ pi
160
+ )),
161
+ /* @__PURE__ */ jsx("circle", { cx: f.x, cy: f.y, r: f.r * 0.3, fill: "#fde047" }),
162
+ animate && /* @__PURE__ */ jsxs(Fragment, { children: [
163
+ /* @__PURE__ */ jsx(
164
+ "animate",
165
+ {
166
+ attributeName: "opacity",
167
+ from: "0",
168
+ to: "1",
169
+ dur: halfDur,
170
+ begin: flowerAt,
171
+ fill: "freeze"
172
+ }
173
+ ),
174
+ /* @__PURE__ */ jsx(
175
+ "animateTransform",
176
+ {
177
+ attributeName: "transform",
178
+ type: "scale",
179
+ values: "0.3 0.3;1 1",
180
+ keyTimes: "0;1",
181
+ keySplines: "0.34 1 0.64 1",
182
+ calcMode: "spline",
183
+ dur: halfDur,
184
+ begin: flowerAt,
185
+ fill: "freeze"
186
+ }
187
+ )
188
+ ] })
189
+ ] }, `f${fi}`)),
190
+ animate && /* @__PURE__ */ jsx(
191
+ "animateTransform",
192
+ {
193
+ attributeName: "transform",
194
+ type: "rotate",
195
+ values: "0 50 50;1 50 50;-1 50 50;0 50 50",
196
+ dur: "4s",
197
+ repeatCount: "indefinite",
198
+ begin: `${duration}s`
199
+ }
200
+ )
201
+ ]
202
+ }
203
+ )
204
+ ] }),
205
+ durationScale(durationProp !== void 0, animationSpeed),
206
+ still
207
+ );
198
208
  }
199
209
  ),
200
210
  { displayName: "NtdIconFloral" }
@@ -204,13 +214,17 @@ const NtdIconFestive = /* @__PURE__ */ Object.assign(
204
214
  ({
205
215
  children,
206
216
  animate = true,
207
- duration = 1.5,
217
+ duration: durationProp,
218
+ animationSpeed,
219
+ reducedMotion,
208
220
  intensity = "normal",
209
221
  colors,
210
222
  sparkleColor = "#fbbf24",
211
223
  className,
212
224
  style
213
225
  }, ref) => {
226
+ const still = useStillMotion(reducedMotion);
227
+ const duration = durationProp ?? 1.5;
214
228
  const cols = colors ?? ["#ef4444", "#f59e0b", "#22c55e", "#3b82f6", "#a855f7", "#ec4899"];
215
229
  const dur = `${duration * 0.6}s`;
216
230
  const baseConfetti = [
@@ -260,122 +274,126 @@ const NtdIconFestive = /* @__PURE__ */ Object.assign(
260
274
  { cx: 97, cy: 45, r: 1.1 }
261
275
  ] : []
262
276
  ];
263
- return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
264
- children,
265
- /* @__PURE__ */ jsxs(
266
- "svg",
267
- {
268
- viewBox: "0 0 100 100",
269
- style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%" },
270
- "aria-hidden": true,
271
- children: [
272
- allConfetti.map((c, i) => {
273
- const delay = `${(i * 0.07).toFixed(2)}s`;
274
- const col = cols[c.ci % cols.length];
275
- return /* @__PURE__ */ jsx("g", { transform: "translate(50,50)", children: /* @__PURE__ */ jsxs("g", { opacity: animate ? 0 : 0.85, children: [
276
- /* @__PURE__ */ jsx(
277
- "rect",
278
- {
279
- x: c.x - 50 - 1.5,
280
- y: c.y - 50 - 3,
281
- width: 3,
282
- height: 6,
283
- rx: 0.5,
284
- fill: col,
285
- transform: `rotate(${c.r} ${c.x - 50} ${c.y - 50})`
286
- }
287
- ),
288
- animate && /* @__PURE__ */ jsxs(Fragment, { children: [
277
+ return motionTree(
278
+ /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
279
+ children,
280
+ /* @__PURE__ */ jsxs(
281
+ "svg",
282
+ {
283
+ viewBox: "0 0 100 100",
284
+ style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%" },
285
+ "aria-hidden": true,
286
+ children: [
287
+ allConfetti.map((c, i) => {
288
+ const delay = `${(i * 0.07).toFixed(2)}s`;
289
+ const col = cols[c.ci % cols.length];
290
+ return /* @__PURE__ */ jsx("g", { transform: "translate(50,50)", children: /* @__PURE__ */ jsxs("g", { opacity: animate ? 0 : 0.85, children: [
289
291
  /* @__PURE__ */ jsx(
290
- "animate",
292
+ "rect",
291
293
  {
292
- attributeName: "opacity",
293
- from: "0",
294
- to: "0.85",
295
- dur: "0.4s",
296
- begin: delay,
297
- fill: "freeze"
294
+ x: c.x - 50 - 1.5,
295
+ y: c.y - 50 - 3,
296
+ width: 3,
297
+ height: 6,
298
+ rx: 0.5,
299
+ fill: col,
300
+ transform: `rotate(${c.r} ${c.x - 50} ${c.y - 50})`
298
301
  }
299
302
  ),
300
- /* @__PURE__ */ jsx(
301
- "animateTransform",
302
- {
303
- attributeName: "transform",
304
- type: "scale",
305
- values: "0 0;1 1",
306
- keyTimes: "0;1",
307
- keySplines: "0.34 1 0.64 1",
308
- calcMode: "spline",
309
- dur,
310
- begin: delay,
311
- fill: "freeze"
312
- }
313
- )
314
- ] })
315
- ] }) }, `c${i}`);
316
- }),
317
- stars.map((s, i) => /* @__PURE__ */ jsxs("g", { transform: `translate(${s.x},${s.y}) scale(${s.s})`, children: [
318
- /* @__PURE__ */ jsx("path", { d: starD, fill: sparkleColor, opacity: animate ? 0 : 0.9, children: animate && /* @__PURE__ */ jsx(
319
- "animate",
320
- {
321
- attributeName: "opacity",
322
- from: "0",
323
- to: "0.9",
324
- dur: "0.5s",
325
- begin: `${(i * 0.15 + 0.3).toFixed(2)}s`,
326
- fill: "freeze"
327
- }
328
- ) }),
329
- animate && /* @__PURE__ */ jsx(
330
- "animateTransform",
303
+ animate && /* @__PURE__ */ jsxs(Fragment, { children: [
304
+ /* @__PURE__ */ jsx(
305
+ "animate",
306
+ {
307
+ attributeName: "opacity",
308
+ from: "0",
309
+ to: "0.85",
310
+ dur: "0.4s",
311
+ begin: delay,
312
+ fill: "freeze"
313
+ }
314
+ ),
315
+ /* @__PURE__ */ jsx(
316
+ "animateTransform",
317
+ {
318
+ attributeName: "transform",
319
+ type: "scale",
320
+ values: "0 0;1 1",
321
+ keyTimes: "0;1",
322
+ keySplines: "0.34 1 0.64 1",
323
+ calcMode: "spline",
324
+ dur,
325
+ begin: delay,
326
+ fill: "freeze"
327
+ }
328
+ )
329
+ ] })
330
+ ] }) }, `c${i}`);
331
+ }),
332
+ stars.map((s, i) => /* @__PURE__ */ jsxs("g", { transform: `translate(${s.x},${s.y}) scale(${s.s})`, children: [
333
+ /* @__PURE__ */ jsx("path", { d: starD, fill: sparkleColor, opacity: animate ? 0 : 0.9, children: animate && /* @__PURE__ */ jsx(
334
+ "animate",
335
+ {
336
+ attributeName: "opacity",
337
+ from: "0",
338
+ to: "0.9",
339
+ dur: "0.5s",
340
+ begin: `${(i * 0.15 + 0.3).toFixed(2)}s`,
341
+ fill: "freeze"
342
+ }
343
+ ) }),
344
+ animate && /* @__PURE__ */ jsx(
345
+ "animateTransform",
346
+ {
347
+ attributeName: "transform",
348
+ type: "scale",
349
+ values: `${s.s};${s.s * 1.3};${s.s}`,
350
+ dur: "1.5s",
351
+ repeatCount: "indefinite",
352
+ begin: `${duration + 0.5}s`
353
+ }
354
+ )
355
+ ] }, `s${i}`)),
356
+ sparkles.map((sp, i) => /* @__PURE__ */ jsx(
357
+ "circle",
331
358
  {
332
- attributeName: "transform",
333
- type: "scale",
334
- values: `${s.s};${s.s * 1.3};${s.s}`,
335
- dur: "1.5s",
336
- repeatCount: "indefinite",
337
- begin: `${duration + 0.5}s`
338
- }
339
- )
340
- ] }, `s${i}`)),
341
- sparkles.map((sp, i) => /* @__PURE__ */ jsx(
342
- "circle",
343
- {
344
- cx: sp.cx,
345
- cy: sp.cy,
346
- r: sp.r,
347
- fill: sparkleColor,
348
- opacity: animate ? 0 : 0.7,
349
- children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
350
- /* @__PURE__ */ jsx(
351
- "animate",
352
- {
353
- attributeName: "opacity",
354
- from: "0",
355
- to: "0.7",
356
- dur: "0.3s",
357
- begin: `${(duration * 0.4 + i * 0.08).toFixed(2)}s`,
358
- fill: "freeze"
359
- }
360
- ),
361
- /* @__PURE__ */ jsx(
362
- "animate",
363
- {
364
- attributeName: "opacity",
365
- values: "0.3;0.9;0.3",
366
- dur: `${1 + i * 0.3}s`,
367
- repeatCount: "indefinite",
368
- begin: `${duration}s`
369
- }
370
- )
371
- ] })
372
- },
373
- `sp${i}`
374
- ))
375
- ]
376
- }
377
- )
378
- ] });
359
+ cx: sp.cx,
360
+ cy: sp.cy,
361
+ r: sp.r,
362
+ fill: sparkleColor,
363
+ opacity: animate ? 0 : 0.7,
364
+ children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
365
+ /* @__PURE__ */ jsx(
366
+ "animate",
367
+ {
368
+ attributeName: "opacity",
369
+ from: "0",
370
+ to: "0.7",
371
+ dur: "0.3s",
372
+ begin: `${(duration * 0.4 + i * 0.08).toFixed(2)}s`,
373
+ fill: "freeze"
374
+ }
375
+ ),
376
+ /* @__PURE__ */ jsx(
377
+ "animate",
378
+ {
379
+ attributeName: "opacity",
380
+ values: "0.3;0.9;0.3",
381
+ dur: `${1 + i * 0.3}s`,
382
+ repeatCount: "indefinite",
383
+ begin: `${duration}s`
384
+ }
385
+ )
386
+ ] })
387
+ },
388
+ `sp${i}`
389
+ ))
390
+ ]
391
+ }
392
+ )
393
+ ] }),
394
+ durationScale(durationProp !== void 0, animationSpeed),
395
+ still
396
+ );
379
397
  }
380
398
  ),
381
399
  { displayName: "NtdIconFestive" }
@@ -385,7 +403,9 @@ const NtdIconNeon = /* @__PURE__ */ Object.assign(
385
403
  ({
386
404
  children,
387
405
  animate = true,
388
- duration = 4,
406
+ duration: durationProp,
407
+ animationSpeed,
408
+ reducedMotion,
389
409
  intensity = "normal",
390
410
  glowColor = "#0ff",
391
411
  secondaryGlow,
@@ -393,6 +413,8 @@ const NtdIconNeon = /* @__PURE__ */ Object.assign(
393
413
  className,
394
414
  style
395
415
  }, ref) => {
416
+ const still = useStillMotion(reducedMotion);
417
+ const duration = durationProp ?? 4;
396
418
  const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
397
419
  const glow2 = secondaryGlow ?? glowColor;
398
420
  const blur = intensity === "dense" ? 8 : intensity === "subtle" ? 3 : 5;
@@ -405,25 +427,29 @@ const NtdIconNeon = /* @__PURE__ */ Object.assign(
405
427
  ].filter(Boolean).join(" ");
406
428
  const dimFilter = `drop-shadow(0 0 ${blur * 0.2}px ${glowColor})`;
407
429
  const animName = `ntd_neon_${uid}`;
408
- return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
409
- animate && flicker && /* @__PURE__ */ jsx("style", { children: `
430
+ return motionTree(
431
+ /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
432
+ animate && flicker && /* @__PURE__ */ jsx("style", { children: `
410
433
  @keyframes ${animName} {
411
434
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; filter: ${filterValue}; }
412
435
  20%, 24%, 55% { opacity: 0.5; filter: ${dimFilter}; }
413
436
  }
414
437
  ` }),
415
- /* @__PURE__ */ jsx(
416
- "span",
417
- {
418
- style: {
419
- display: "inline-flex",
420
- filter: filterValue,
421
- ...animate && flicker ? { animation: `${animName} ${duration}s infinite` } : {}
422
- },
423
- children
424
- }
425
- )
426
- ] });
438
+ /* @__PURE__ */ jsx(
439
+ "span",
440
+ {
441
+ style: {
442
+ display: "inline-flex",
443
+ filter: filterValue,
444
+ ...animate && flicker ? { animation: `${animName} ${duration}s infinite` } : {}
445
+ },
446
+ children
447
+ }
448
+ )
449
+ ] }),
450
+ durationScale(durationProp !== void 0, animationSpeed),
451
+ still
452
+ );
427
453
  }
428
454
  ),
429
455
  { displayName: "NtdIconNeon" }
@@ -433,13 +459,17 @@ const NtdIconSketch = /* @__PURE__ */ Object.assign(
433
459
  ({
434
460
  children,
435
461
  animate = true,
436
- duration = 1.5,
462
+ duration: durationProp,
463
+ animationSpeed,
464
+ reducedMotion,
437
465
  intensity = "normal",
438
466
  strokeColor = "#374151",
439
467
  roughness = 2,
440
468
  className,
441
469
  style
442
470
  }, ref) => {
471
+ const still = useStillMotion(reducedMotion);
472
+ const duration = durationProp ?? 1.5;
443
473
  const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
444
474
  const filterId = `ntd_sketch_${uid}`;
445
475
  const dur = `${duration}s`;
@@ -455,112 +485,116 @@ const NtdIconSketch = /* @__PURE__ */ Object.assign(
455
485
  { x1: 10, y1: 12, x2: 16, y2: 10 },
456
486
  { x1: 84, y1: 12, x2: 90, y2: 10 }
457
487
  ];
458
- return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
459
- /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: filterId, children: [
460
- /* @__PURE__ */ jsx(
461
- "feTurbulence",
462
- {
463
- type: "turbulence",
464
- baseFrequency: 0.02 + roughness * 8e-3,
465
- numOctaves: 3,
466
- seed: 2,
467
- result: "noise"
468
- }
469
- ),
470
- /* @__PURE__ */ jsx(
471
- "feDisplacementMap",
488
+ return motionTree(
489
+ /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
490
+ /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: filterId, children: [
491
+ /* @__PURE__ */ jsx(
492
+ "feTurbulence",
493
+ {
494
+ type: "turbulence",
495
+ baseFrequency: 0.02 + roughness * 8e-3,
496
+ numOctaves: 3,
497
+ seed: 2,
498
+ result: "noise"
499
+ }
500
+ ),
501
+ /* @__PURE__ */ jsx(
502
+ "feDisplacementMap",
503
+ {
504
+ in: "SourceGraphic",
505
+ in2: "noise",
506
+ scale: roughness,
507
+ xChannelSelector: "R",
508
+ yChannelSelector: "G"
509
+ }
510
+ )
511
+ ] }) }) }),
512
+ /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", filter: `url(#${filterId})` }, children }),
513
+ /* @__PURE__ */ jsxs(
514
+ "svg",
472
515
  {
473
- in: "SourceGraphic",
474
- in2: "noise",
475
- scale: roughness,
476
- xChannelSelector: "R",
477
- yChannelSelector: "G"
516
+ viewBox: "0 0 100 100",
517
+ style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%" },
518
+ "aria-hidden": true,
519
+ children: [
520
+ /* @__PURE__ */ jsx(
521
+ "path",
522
+ {
523
+ d: scribbleMain,
524
+ fill: "none",
525
+ stroke: strokeColor,
526
+ strokeWidth: "1",
527
+ strokeLinecap: "round",
528
+ opacity: 0.5,
529
+ ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
530
+ children: animate && /* @__PURE__ */ jsx(
531
+ "animate",
532
+ {
533
+ attributeName: "stroke-dashoffset",
534
+ from: `${dashLen}`,
535
+ to: "0",
536
+ dur,
537
+ fill: "freeze"
538
+ }
539
+ )
540
+ }
541
+ ),
542
+ intensity !== "subtle" && scribbleExtra.slice(0, intensity === "dense" ? 2 : 1).map((d, i) => /* @__PURE__ */ jsx(
543
+ "path",
544
+ {
545
+ d,
546
+ fill: "none",
547
+ stroke: strokeColor,
548
+ strokeWidth: "0.8",
549
+ strokeLinecap: "round",
550
+ opacity: 0.35,
551
+ ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
552
+ children: animate && /* @__PURE__ */ jsx(
553
+ "animate",
554
+ {
555
+ attributeName: "stroke-dashoffset",
556
+ from: `${dashLen}`,
557
+ to: "0",
558
+ dur,
559
+ fill: "freeze",
560
+ begin: `${0.3 + i * 0.2}s`
561
+ }
562
+ )
563
+ },
564
+ `se${i}`
565
+ )),
566
+ hatchPositions.slice(0, hatchCount).map((p, i) => /* @__PURE__ */ jsx(
567
+ "line",
568
+ {
569
+ x1: p.x1,
570
+ y1: p.y1,
571
+ x2: p.x2,
572
+ y2: p.y2,
573
+ stroke: strokeColor,
574
+ strokeWidth: "0.6",
575
+ strokeLinecap: "round",
576
+ opacity: animate ? 0 : 0.3,
577
+ children: animate && /* @__PURE__ */ jsx(
578
+ "animate",
579
+ {
580
+ attributeName: "opacity",
581
+ from: "0",
582
+ to: "0.3",
583
+ dur: "0.3s",
584
+ begin: `${duration * 0.7 + i * 0.1}s`,
585
+ fill: "freeze"
586
+ }
587
+ )
588
+ },
589
+ `h${i}`
590
+ ))
591
+ ]
478
592
  }
479
593
  )
480
- ] }) }) }),
481
- /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", filter: `url(#${filterId})` }, children }),
482
- /* @__PURE__ */ jsxs(
483
- "svg",
484
- {
485
- viewBox: "0 0 100 100",
486
- style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%" },
487
- "aria-hidden": true,
488
- children: [
489
- /* @__PURE__ */ jsx(
490
- "path",
491
- {
492
- d: scribbleMain,
493
- fill: "none",
494
- stroke: strokeColor,
495
- strokeWidth: "1",
496
- strokeLinecap: "round",
497
- opacity: 0.5,
498
- ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
499
- children: animate && /* @__PURE__ */ jsx(
500
- "animate",
501
- {
502
- attributeName: "stroke-dashoffset",
503
- from: `${dashLen}`,
504
- to: "0",
505
- dur,
506
- fill: "freeze"
507
- }
508
- )
509
- }
510
- ),
511
- intensity !== "subtle" && scribbleExtra.slice(0, intensity === "dense" ? 2 : 1).map((d, i) => /* @__PURE__ */ jsx(
512
- "path",
513
- {
514
- d,
515
- fill: "none",
516
- stroke: strokeColor,
517
- strokeWidth: "0.8",
518
- strokeLinecap: "round",
519
- opacity: 0.35,
520
- ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
521
- children: animate && /* @__PURE__ */ jsx(
522
- "animate",
523
- {
524
- attributeName: "stroke-dashoffset",
525
- from: `${dashLen}`,
526
- to: "0",
527
- dur,
528
- fill: "freeze",
529
- begin: `${0.3 + i * 0.2}s`
530
- }
531
- )
532
- },
533
- `se${i}`
534
- )),
535
- hatchPositions.slice(0, hatchCount).map((p, i) => /* @__PURE__ */ jsx(
536
- "line",
537
- {
538
- x1: p.x1,
539
- y1: p.y1,
540
- x2: p.x2,
541
- y2: p.y2,
542
- stroke: strokeColor,
543
- strokeWidth: "0.6",
544
- strokeLinecap: "round",
545
- opacity: animate ? 0 : 0.3,
546
- children: animate && /* @__PURE__ */ jsx(
547
- "animate",
548
- {
549
- attributeName: "opacity",
550
- from: "0",
551
- to: "0.3",
552
- dur: "0.3s",
553
- begin: `${duration * 0.7 + i * 0.1}s`,
554
- fill: "freeze"
555
- }
556
- )
557
- },
558
- `h${i}`
559
- ))
560
- ]
561
- }
562
- )
563
- ] });
594
+ ] }),
595
+ durationScale(durationProp !== void 0, animationSpeed),
596
+ still
597
+ );
564
598
  }
565
599
  ),
566
600
  { displayName: "NtdIconSketch" }
@@ -570,13 +604,17 @@ const NtdIconWatercolor = /* @__PURE__ */ Object.assign(
570
604
  ({
571
605
  children,
572
606
  animate = true,
573
- duration = 2,
607
+ duration: durationProp,
608
+ animationSpeed,
609
+ reducedMotion,
574
610
  intensity = "normal",
575
611
  tintColor = "#818cf8",
576
612
  bleedColor = "#f0abfc",
577
613
  className,
578
614
  style
579
615
  }, ref) => {
616
+ const still = useStillMotion(reducedMotion);
617
+ const duration = durationProp ?? 2;
580
618
  const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
581
619
  const filterId = `ntd_wc_${uid}`;
582
620
  const blobFilter = `${filterId}_blob`;
@@ -605,115 +643,119 @@ const NtdIconWatercolor = /* @__PURE__ */ Object.assign(
605
643
  { cx: 92, cy: 55, r: 1 }
606
644
  ] : []
607
645
  ];
608
- return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
609
- /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsxs("defs", { children: [
610
- /* @__PURE__ */ jsxs("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
611
- /* @__PURE__ */ jsx(
612
- "feTurbulence",
613
- {
614
- type: "fractalNoise",
615
- baseFrequency: "0.04",
616
- numOctaves: 4,
617
- seed: 5,
618
- result: "noise"
619
- }
620
- ),
621
- /* @__PURE__ */ jsx(
622
- "feDisplacementMap",
623
- {
624
- in: "SourceGraphic",
625
- in2: "noise",
626
- scale: 3,
627
- xChannelSelector: "R",
628
- yChannelSelector: "G",
629
- result: "displaced"
630
- }
631
- ),
632
- /* @__PURE__ */ jsx("feGaussianBlur", { in: "displaced", stdDeviation: "0.5" })
633
- ] }),
634
- /* @__PURE__ */ jsx("filter", { id: blobFilter, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "3" }) })
635
- ] }) }),
636
- /* @__PURE__ */ jsxs(
637
- "svg",
638
- {
639
- viewBox: "0 0 100 100",
640
- style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
641
- "aria-hidden": true,
642
- children: [
643
- splotches.map((s, i) => /* @__PURE__ */ jsx(
644
- "circle",
646
+ return motionTree(
647
+ /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
648
+ /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsxs("defs", { children: [
649
+ /* @__PURE__ */ jsxs("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
650
+ /* @__PURE__ */ jsx(
651
+ "feTurbulence",
645
652
  {
646
- cx: s.cx,
647
- cy: s.cy,
648
- r: animate ? 0 : s.r,
649
- fill: s.color,
650
- opacity: s.op,
651
- filter: `url(#${blobFilter})`,
652
- children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
653
- /* @__PURE__ */ jsx(
653
+ type: "fractalNoise",
654
+ baseFrequency: "0.04",
655
+ numOctaves: 4,
656
+ seed: 5,
657
+ result: "noise"
658
+ }
659
+ ),
660
+ /* @__PURE__ */ jsx(
661
+ "feDisplacementMap",
662
+ {
663
+ in: "SourceGraphic",
664
+ in2: "noise",
665
+ scale: 3,
666
+ xChannelSelector: "R",
667
+ yChannelSelector: "G",
668
+ result: "displaced"
669
+ }
670
+ ),
671
+ /* @__PURE__ */ jsx("feGaussianBlur", { in: "displaced", stdDeviation: "0.5" })
672
+ ] }),
673
+ /* @__PURE__ */ jsx("filter", { id: blobFilter, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "3" }) })
674
+ ] }) }),
675
+ /* @__PURE__ */ jsxs(
676
+ "svg",
677
+ {
678
+ viewBox: "0 0 100 100",
679
+ style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
680
+ "aria-hidden": true,
681
+ children: [
682
+ splotches.map((s, i) => /* @__PURE__ */ jsx(
683
+ "circle",
684
+ {
685
+ cx: s.cx,
686
+ cy: s.cy,
687
+ r: animate ? 0 : s.r,
688
+ fill: s.color,
689
+ opacity: s.op,
690
+ filter: `url(#${blobFilter})`,
691
+ children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
692
+ /* @__PURE__ */ jsx(
693
+ "animate",
694
+ {
695
+ attributeName: "r",
696
+ from: "0",
697
+ to: `${s.r}`,
698
+ dur: `${duration * 0.7}s`,
699
+ begin: `${(i * 0.15).toFixed(2)}s`,
700
+ fill: "freeze"
701
+ }
702
+ ),
703
+ /* @__PURE__ */ jsx(
704
+ "animate",
705
+ {
706
+ attributeName: "opacity",
707
+ values: `${s.op};${s.op * 1.3};${s.op}`,
708
+ dur: "3s",
709
+ begin: `${duration}s`,
710
+ repeatCount: "indefinite"
711
+ }
712
+ )
713
+ ] })
714
+ },
715
+ `sp${i}`
716
+ )),
717
+ splatters.map((d, i) => /* @__PURE__ */ jsx(
718
+ "circle",
719
+ {
720
+ cx: d.cx,
721
+ cy: d.cy,
722
+ r: d.r,
723
+ fill: i % 2 === 0 ? tintColor : bleedColor,
724
+ opacity: animate ? 0 : 0.3,
725
+ filter: `url(#${blobFilter})`,
726
+ children: animate && /* @__PURE__ */ jsx(
654
727
  "animate",
655
728
  {
656
- attributeName: "r",
729
+ attributeName: "opacity",
657
730
  from: "0",
658
- to: `${s.r}`,
659
- dur: `${duration * 0.7}s`,
660
- begin: `${(i * 0.15).toFixed(2)}s`,
731
+ to: "0.3",
732
+ dur: "0.3s",
733
+ begin: `${(duration * 0.5 + i * 0.1).toFixed(2)}s`,
661
734
  fill: "freeze"
662
735
  }
663
- ),
664
- /* @__PURE__ */ jsx(
665
- "animate",
666
- {
667
- attributeName: "opacity",
668
- values: `${s.op};${s.op * 1.3};${s.op}`,
669
- dur: "3s",
670
- begin: `${duration}s`,
671
- repeatCount: "indefinite"
672
- }
673
736
  )
674
- ] })
675
- },
676
- `sp${i}`
677
- )),
678
- splatters.map((d, i) => /* @__PURE__ */ jsx(
679
- "circle",
680
- {
681
- cx: d.cx,
682
- cy: d.cy,
683
- r: d.r,
684
- fill: i % 2 === 0 ? tintColor : bleedColor,
685
- opacity: animate ? 0 : 0.3,
686
- filter: `url(#${blobFilter})`,
687
- children: animate && /* @__PURE__ */ jsx(
688
- "animate",
689
- {
690
- attributeName: "opacity",
691
- from: "0",
692
- to: "0.3",
693
- dur: "0.3s",
694
- begin: `${(duration * 0.5 + i * 0.1).toFixed(2)}s`,
695
- fill: "freeze"
696
- }
697
- )
698
- },
699
- `dot${i}`
700
- ))
701
- ]
702
- }
703
- ),
704
- /* @__PURE__ */ jsx(
705
- "span",
706
- {
707
- style: {
708
- display: "inline-flex",
709
- filter: `url(#${filterId})`,
710
- position: "relative",
711
- zIndex: 1
712
- },
713
- children
714
- }
715
- )
716
- ] });
737
+ },
738
+ `dot${i}`
739
+ ))
740
+ ]
741
+ }
742
+ ),
743
+ /* @__PURE__ */ jsx(
744
+ "span",
745
+ {
746
+ style: {
747
+ display: "inline-flex",
748
+ filter: `url(#${filterId})`,
749
+ position: "relative",
750
+ zIndex: 1
751
+ },
752
+ children
753
+ }
754
+ )
755
+ ] }),
756
+ durationScale(durationProp !== void 0, animationSpeed),
757
+ still
758
+ );
717
759
  }
718
760
  ),
719
761
  { displayName: "NtdIconWatercolor" }
@@ -723,7 +765,9 @@ const NtdIconCosmic = /* @__PURE__ */ Object.assign(
723
765
  ({
724
766
  children,
725
767
  animate = true,
726
- duration = 2,
768
+ duration: durationProp,
769
+ animationSpeed,
770
+ reducedMotion,
727
771
  intensity = "normal",
728
772
  starColor = "#e2e8f0",
729
773
  nebulaColor = "#7c3aed",
@@ -731,6 +775,8 @@ const NtdIconCosmic = /* @__PURE__ */ Object.assign(
731
775
  className,
732
776
  style
733
777
  }, ref) => {
778
+ const still = useStillMotion(reducedMotion);
779
+ const duration = durationProp ?? 2;
734
780
  const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
735
781
  const nebulaFilter = `ntd_cosm_${uid}`;
736
782
  const baseStars = [
@@ -781,154 +827,158 @@ const NtdIconCosmic = /* @__PURE__ */ Object.assign(
781
827
  ] : []
782
828
  ];
783
829
  const lineLen = 80;
784
- return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
785
- /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: nebulaFilter, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }),
786
- /* @__PURE__ */ jsxs(
787
- "svg",
788
- {
789
- viewBox: "0 0 100 100",
790
- style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 0 },
791
- "aria-hidden": true,
792
- children: [
793
- nebulae.map((n, i) => /* @__PURE__ */ jsx(
794
- "circle",
795
- {
796
- cx: n.cx,
797
- cy: n.cy,
798
- r: n.r,
799
- fill: n.color,
800
- opacity: animate ? 0 : n.op,
801
- filter: `url(#${nebulaFilter})`,
802
- children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
803
- /* @__PURE__ */ jsx(
804
- "animate",
805
- {
806
- attributeName: "opacity",
807
- from: "0",
808
- to: `${n.op}`,
809
- dur: `${duration}s`,
810
- fill: "freeze"
811
- }
812
- ),
813
- /* @__PURE__ */ jsx(
814
- "animate",
815
- {
816
- attributeName: "opacity",
817
- values: `${n.op};${n.op * 1.5};${n.op}`,
818
- dur: "5s",
819
- repeatCount: "indefinite",
820
- begin: `${duration}s`
821
- }
822
- ),
823
- /* @__PURE__ */ jsx(
824
- "animate",
825
- {
826
- attributeName: "r",
827
- values: `${n.r};${n.r * 1.1};${n.r}`,
828
- dur: "6s",
829
- repeatCount: "indefinite",
830
- begin: `${duration}s`
831
- }
832
- )
833
- ] })
834
- },
835
- `nb${i}`
836
- )),
837
- constellations.map((c, i) => /* @__PURE__ */ jsx(
838
- "line",
839
- {
840
- x1: c.from[0],
841
- y1: c.from[1],
842
- x2: c.to[0],
843
- y2: c.to[1],
844
- stroke: starColor,
845
- strokeWidth: "0.3",
846
- opacity: 0.25,
847
- ...animate ? { strokeDasharray: lineLen, strokeDashoffset: lineLen } : {},
848
- children: animate && /* @__PURE__ */ jsx(
849
- "animate",
850
- {
851
- attributeName: "stroke-dashoffset",
852
- from: `${lineLen}`,
853
- to: "0",
854
- dur: `${duration * 0.8}s`,
855
- begin: `${(i * 0.2).toFixed(1)}s`,
856
- fill: "freeze"
857
- }
858
- )
859
- },
860
- `cl${i}`
861
- ))
862
- ]
863
- }
864
- ),
865
- /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children }),
866
- /* @__PURE__ */ jsxs(
867
- "svg",
868
- {
869
- viewBox: "0 0 100 100",
870
- style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 2 },
871
- "aria-hidden": true,
872
- children: [
873
- allStars.map((s, i) => /* @__PURE__ */ jsx(
874
- "circle",
875
- {
876
- cx: s.cx,
877
- cy: s.cy,
878
- r: s.r,
879
- fill: starColor,
880
- opacity: animate ? 0 : 0.8,
881
- children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
882
- /* @__PURE__ */ jsx(
830
+ return motionTree(
831
+ /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
832
+ /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: nebulaFilter, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }),
833
+ /* @__PURE__ */ jsxs(
834
+ "svg",
835
+ {
836
+ viewBox: "0 0 100 100",
837
+ style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 0 },
838
+ "aria-hidden": true,
839
+ children: [
840
+ nebulae.map((n, i) => /* @__PURE__ */ jsx(
841
+ "circle",
842
+ {
843
+ cx: n.cx,
844
+ cy: n.cy,
845
+ r: n.r,
846
+ fill: n.color,
847
+ opacity: animate ? 0 : n.op,
848
+ filter: `url(#${nebulaFilter})`,
849
+ children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
850
+ /* @__PURE__ */ jsx(
851
+ "animate",
852
+ {
853
+ attributeName: "opacity",
854
+ from: "0",
855
+ to: `${n.op}`,
856
+ dur: `${duration}s`,
857
+ fill: "freeze"
858
+ }
859
+ ),
860
+ /* @__PURE__ */ jsx(
861
+ "animate",
862
+ {
863
+ attributeName: "opacity",
864
+ values: `${n.op};${n.op * 1.5};${n.op}`,
865
+ dur: "5s",
866
+ repeatCount: "indefinite",
867
+ begin: `${duration}s`
868
+ }
869
+ ),
870
+ /* @__PURE__ */ jsx(
871
+ "animate",
872
+ {
873
+ attributeName: "r",
874
+ values: `${n.r};${n.r * 1.1};${n.r}`,
875
+ dur: "6s",
876
+ repeatCount: "indefinite",
877
+ begin: `${duration}s`
878
+ }
879
+ )
880
+ ] })
881
+ },
882
+ `nb${i}`
883
+ )),
884
+ constellations.map((c, i) => /* @__PURE__ */ jsx(
885
+ "line",
886
+ {
887
+ x1: c.from[0],
888
+ y1: c.from[1],
889
+ x2: c.to[0],
890
+ y2: c.to[1],
891
+ stroke: starColor,
892
+ strokeWidth: "0.3",
893
+ opacity: 0.25,
894
+ ...animate ? { strokeDasharray: lineLen, strokeDashoffset: lineLen } : {},
895
+ children: animate && /* @__PURE__ */ jsx(
883
896
  "animate",
884
897
  {
885
- attributeName: "opacity",
886
- from: "0",
887
- to: "0.8",
888
- dur: `${duration * 0.5}s`,
889
- begin: `${(i * 0.1).toFixed(2)}s`,
898
+ attributeName: "stroke-dashoffset",
899
+ from: `${lineLen}`,
900
+ to: "0",
901
+ dur: `${duration * 0.8}s`,
902
+ begin: `${(i * 0.2).toFixed(1)}s`,
890
903
  fill: "freeze"
891
904
  }
892
- ),
893
- /* @__PURE__ */ jsx(
894
- "animate",
895
- {
896
- attributeName: "opacity",
897
- values: "0.4;1;0.4",
898
- dur: `${1.5 + i % 4 * 0.4}s`,
899
- repeatCount: "indefinite",
900
- begin: `${duration}s`
901
- }
902
- ),
903
- /* @__PURE__ */ jsx(
904
- "animate",
905
- {
906
- attributeName: "r",
907
- values: `${s.r};${s.r * 1.4};${s.r}`,
908
- dur: `${2 + i % 3 * 0.5}s`,
909
- repeatCount: "indefinite",
910
- begin: `${duration}s`
911
- }
912
905
  )
913
- ] })
914
- },
915
- `st${i}`
916
- )),
917
- animate && /* @__PURE__ */ jsx(
918
- "animateTransform",
919
- {
920
- attributeName: "transform",
921
- type: "rotate",
922
- from: "0 50 50",
923
- to: "360 50 50",
924
- dur: "120s",
925
- repeatCount: "indefinite"
926
- }
927
- )
928
- ]
929
- }
930
- )
931
- ] });
906
+ },
907
+ `cl${i}`
908
+ ))
909
+ ]
910
+ }
911
+ ),
912
+ /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children }),
913
+ /* @__PURE__ */ jsxs(
914
+ "svg",
915
+ {
916
+ viewBox: "0 0 100 100",
917
+ style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 2 },
918
+ "aria-hidden": true,
919
+ children: [
920
+ allStars.map((s, i) => /* @__PURE__ */ jsx(
921
+ "circle",
922
+ {
923
+ cx: s.cx,
924
+ cy: s.cy,
925
+ r: s.r,
926
+ fill: starColor,
927
+ opacity: animate ? 0 : 0.8,
928
+ children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
929
+ /* @__PURE__ */ jsx(
930
+ "animate",
931
+ {
932
+ attributeName: "opacity",
933
+ from: "0",
934
+ to: "0.8",
935
+ dur: `${duration * 0.5}s`,
936
+ begin: `${(i * 0.1).toFixed(2)}s`,
937
+ fill: "freeze"
938
+ }
939
+ ),
940
+ /* @__PURE__ */ jsx(
941
+ "animate",
942
+ {
943
+ attributeName: "opacity",
944
+ values: "0.4;1;0.4",
945
+ dur: `${1.5 + i % 4 * 0.4}s`,
946
+ repeatCount: "indefinite",
947
+ begin: `${duration}s`
948
+ }
949
+ ),
950
+ /* @__PURE__ */ jsx(
951
+ "animate",
952
+ {
953
+ attributeName: "r",
954
+ values: `${s.r};${s.r * 1.4};${s.r}`,
955
+ dur: `${2 + i % 3 * 0.5}s`,
956
+ repeatCount: "indefinite",
957
+ begin: `${duration}s`
958
+ }
959
+ )
960
+ ] })
961
+ },
962
+ `st${i}`
963
+ )),
964
+ animate && /* @__PURE__ */ jsx(
965
+ "animateTransform",
966
+ {
967
+ attributeName: "transform",
968
+ type: "rotate",
969
+ from: "0 50 50",
970
+ to: "360 50 50",
971
+ dur: "120s",
972
+ repeatCount: "indefinite"
973
+ }
974
+ )
975
+ ]
976
+ }
977
+ )
978
+ ] }),
979
+ durationScale(durationProp !== void 0, animationSpeed),
980
+ still
981
+ );
932
982
  }
933
983
  ),
934
984
  { displayName: "NtdIconCosmic" }
@@ -938,7 +988,9 @@ const NtdIconSteampunk = /* @__PURE__ */ Object.assign(
938
988
  ({
939
989
  children,
940
990
  animate = true,
941
- duration = 3,
991
+ duration: durationProp,
992
+ animationSpeed,
993
+ reducedMotion,
942
994
  intensity = "normal",
943
995
  brassColor = "#b45309",
944
996
  pipeColor = "#78350f",
@@ -946,6 +998,8 @@ const NtdIconSteampunk = /* @__PURE__ */ Object.assign(
946
998
  className,
947
999
  style
948
1000
  }, ref) => {
1001
+ const still = useStillMotion(reducedMotion);
1002
+ const duration = durationProp ?? 3;
949
1003
  const makeGear = (cx, cy, r, teeth) => {
950
1004
  const inner = r * 0.68;
951
1005
  const step = Math.PI * 2 / teeth;
@@ -997,110 +1051,114 @@ const NtdIconSteampunk = /* @__PURE__ */ Object.assign(
997
1051
  { cx: 55, cy: -4, r: 2.2 },
998
1052
  { cx: 47, cy: -10, r: 1.6 }
999
1053
  ];
1000
- return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
1001
- /* @__PURE__ */ jsxs(
1002
- "svg",
1003
- {
1004
- viewBox: "0 0 100 100",
1005
- style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%", zIndex: 0 },
1006
- "aria-hidden": true,
1007
- children: [
1008
- pipes.map((p, i) => /* @__PURE__ */ jsx(
1009
- "path",
1010
- {
1011
- d: p.d,
1012
- stroke: pipeColor,
1013
- strokeWidth: p.w,
1014
- fill: "none",
1015
- strokeLinecap: "round",
1016
- opacity: 0.55
1017
- },
1018
- `pipe${i}`
1019
- )),
1020
- rivets.map((rv, i) => /* @__PURE__ */ jsx(
1021
- "circle",
1022
- {
1023
- cx: rv.cx,
1024
- cy: rv.cy,
1025
- r: 1.5,
1026
- fill: brassColor,
1027
- opacity: 0.7
1028
- },
1029
- `rv${i}`
1030
- ))
1031
- ]
1032
- }
1033
- ),
1034
- /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children }),
1035
- /* @__PURE__ */ jsxs(
1036
- "svg",
1037
- {
1038
- viewBox: "0 0 100 100",
1039
- style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%", zIndex: 2 },
1040
- "aria-hidden": true,
1041
- children: [
1042
- gears.map((g, i) => /* @__PURE__ */ jsxs("g", { children: [
1043
- /* @__PURE__ */ jsx("path", { d: makeGear(g.cx, g.cy, g.r, g.teeth), fill: brassColor, opacity: 0.78, children: animate && /* @__PURE__ */ jsx(
1044
- "animateTransform",
1054
+ return motionTree(
1055
+ /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
1056
+ /* @__PURE__ */ jsxs(
1057
+ "svg",
1058
+ {
1059
+ viewBox: "0 0 100 100",
1060
+ style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%", zIndex: 0 },
1061
+ "aria-hidden": true,
1062
+ children: [
1063
+ pipes.map((p, i) => /* @__PURE__ */ jsx(
1064
+ "path",
1045
1065
  {
1046
- attributeName: "transform",
1047
- type: "rotate",
1048
- from: `0 ${g.cx} ${g.cy}`,
1049
- to: `${g.dir * 360} ${g.cx} ${g.cy}`,
1050
- dur: `${duration * g.dm}s`,
1051
- repeatCount: "indefinite"
1052
- }
1053
- ) }),
1054
- /* @__PURE__ */ jsx("circle", { cx: g.cx, cy: g.cy, r: g.r * 0.3, fill: pipeColor, opacity: 0.85 }),
1055
- /* @__PURE__ */ jsx("circle", { cx: g.cx, cy: g.cy, r: g.r * 0.12, fill: brassColor, opacity: 0.6 })
1056
- ] }, `gear${i}`)),
1057
- animate && steamPuffs.map((sp, i) => /* @__PURE__ */ jsxs(
1058
- "circle",
1059
- {
1060
- cx: sp.cx,
1061
- cy: sp.cy,
1062
- r: sp.r,
1063
- fill: steamColor,
1064
- opacity: 0,
1065
- children: [
1066
- /* @__PURE__ */ jsx(
1067
- "animate",
1068
- {
1069
- attributeName: "opacity",
1070
- values: "0;0.45;0",
1071
- dur: "2.4s",
1072
- begin: `${i * 0.7}s`,
1073
- repeatCount: "indefinite"
1074
- }
1075
- ),
1076
- /* @__PURE__ */ jsx(
1077
- "animate",
1078
- {
1079
- attributeName: "cy",
1080
- values: `${sp.cy};${sp.cy - 12}`,
1081
- dur: "2.4s",
1082
- begin: `${i * 0.7}s`,
1083
- repeatCount: "indefinite"
1084
- }
1085
- ),
1086
- /* @__PURE__ */ jsx(
1087
- "animate",
1088
- {
1089
- attributeName: "r",
1090
- values: `${sp.r};${sp.r * 2.2}`,
1091
- dur: "2.4s",
1092
- begin: `${i * 0.7}s`,
1093
- repeatCount: "indefinite"
1094
- }
1095
- )
1096
- ]
1097
- },
1098
- `stm${i}`
1099
- ))
1100
- ]
1101
- }
1102
- )
1103
- ] });
1066
+ d: p.d,
1067
+ stroke: pipeColor,
1068
+ strokeWidth: p.w,
1069
+ fill: "none",
1070
+ strokeLinecap: "round",
1071
+ opacity: 0.55
1072
+ },
1073
+ `pipe${i}`
1074
+ )),
1075
+ rivets.map((rv, i) => /* @__PURE__ */ jsx(
1076
+ "circle",
1077
+ {
1078
+ cx: rv.cx,
1079
+ cy: rv.cy,
1080
+ r: 1.5,
1081
+ fill: brassColor,
1082
+ opacity: 0.7
1083
+ },
1084
+ `rv${i}`
1085
+ ))
1086
+ ]
1087
+ }
1088
+ ),
1089
+ /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children }),
1090
+ /* @__PURE__ */ jsxs(
1091
+ "svg",
1092
+ {
1093
+ viewBox: "0 0 100 100",
1094
+ style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%", zIndex: 2 },
1095
+ "aria-hidden": true,
1096
+ children: [
1097
+ gears.map((g, i) => /* @__PURE__ */ jsxs("g", { children: [
1098
+ /* @__PURE__ */ jsx("path", { d: makeGear(g.cx, g.cy, g.r, g.teeth), fill: brassColor, opacity: 0.78, children: animate && /* @__PURE__ */ jsx(
1099
+ "animateTransform",
1100
+ {
1101
+ attributeName: "transform",
1102
+ type: "rotate",
1103
+ from: `0 ${g.cx} ${g.cy}`,
1104
+ to: `${g.dir * 360} ${g.cx} ${g.cy}`,
1105
+ dur: `${duration * g.dm}s`,
1106
+ repeatCount: "indefinite"
1107
+ }
1108
+ ) }),
1109
+ /* @__PURE__ */ jsx("circle", { cx: g.cx, cy: g.cy, r: g.r * 0.3, fill: pipeColor, opacity: 0.85 }),
1110
+ /* @__PURE__ */ jsx("circle", { cx: g.cx, cy: g.cy, r: g.r * 0.12, fill: brassColor, opacity: 0.6 })
1111
+ ] }, `gear${i}`)),
1112
+ animate && steamPuffs.map((sp, i) => /* @__PURE__ */ jsxs(
1113
+ "circle",
1114
+ {
1115
+ cx: sp.cx,
1116
+ cy: sp.cy,
1117
+ r: sp.r,
1118
+ fill: steamColor,
1119
+ opacity: 0,
1120
+ children: [
1121
+ /* @__PURE__ */ jsx(
1122
+ "animate",
1123
+ {
1124
+ attributeName: "opacity",
1125
+ values: "0;0.45;0",
1126
+ dur: "2.4s",
1127
+ begin: `${i * 0.7}s`,
1128
+ repeatCount: "indefinite"
1129
+ }
1130
+ ),
1131
+ /* @__PURE__ */ jsx(
1132
+ "animate",
1133
+ {
1134
+ attributeName: "cy",
1135
+ values: `${sp.cy};${sp.cy - 12}`,
1136
+ dur: "2.4s",
1137
+ begin: `${i * 0.7}s`,
1138
+ repeatCount: "indefinite"
1139
+ }
1140
+ ),
1141
+ /* @__PURE__ */ jsx(
1142
+ "animate",
1143
+ {
1144
+ attributeName: "r",
1145
+ values: `${sp.r};${sp.r * 2.2}`,
1146
+ dur: "2.4s",
1147
+ begin: `${i * 0.7}s`,
1148
+ repeatCount: "indefinite"
1149
+ }
1150
+ )
1151
+ ]
1152
+ },
1153
+ `stm${i}`
1154
+ ))
1155
+ ]
1156
+ }
1157
+ )
1158
+ ] }),
1159
+ durationScale(durationProp !== void 0, animationSpeed),
1160
+ still
1161
+ );
1104
1162
  }
1105
1163
  ),
1106
1164
  { displayName: "NtdIconSteampunk" }
@@ -1110,13 +1168,17 @@ const NtdIconFrost = /* @__PURE__ */ Object.assign(
1110
1168
  ({
1111
1169
  children,
1112
1170
  animate = true,
1113
- duration = 2,
1171
+ duration: durationProp,
1172
+ animationSpeed,
1173
+ reducedMotion,
1114
1174
  intensity = "normal",
1115
1175
  crystalColor = "#bae6fd",
1116
1176
  glowColor = "#38bdf8",
1117
1177
  className,
1118
1178
  style
1119
1179
  }, ref) => {
1180
+ const still = useStillMotion(reducedMotion);
1181
+ const duration = durationProp ?? 2;
1120
1182
  const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
1121
1183
  const glowFilterId = `ntd_frost_${uid}`;
1122
1184
  const crystalDefs = [
@@ -1173,124 +1235,128 @@ const NtdIconFrost = /* @__PURE__ */ Object.assign(
1173
1235
  { cx: 14, cy: 96, r: 1 },
1174
1236
  { cx: 86, cy: 96, r: 1.1 }
1175
1237
  ];
1176
- return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
1177
- /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: glowFilterId, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "6" }) }) }) }),
1178
- /* @__PURE__ */ jsxs(
1179
- "svg",
1180
- {
1181
- viewBox: "0 0 100 100",
1182
- style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
1183
- "aria-hidden": true,
1184
- children: [
1185
- /* @__PURE__ */ jsx(
1186
- "circle",
1187
- {
1188
- cx: "50",
1189
- cy: "50",
1190
- r: "30",
1191
- fill: glowColor,
1192
- opacity: 0.07,
1193
- filter: `url(#${glowFilterId})`,
1194
- children: animate && /* @__PURE__ */ jsx(
1195
- "animate",
1196
- {
1197
- attributeName: "opacity",
1198
- values: "0.04;0.11;0.04",
1199
- dur: "4s",
1200
- repeatCount: "indefinite"
1201
- }
1202
- )
1203
- }
1204
- ),
1205
- allArms.map((arm, i) => /* @__PURE__ */ jsx(
1206
- "line",
1207
- {
1208
- x1: arm.x1,
1209
- y1: arm.y1,
1210
- x2: arm.x2,
1211
- y2: arm.y2,
1212
- stroke: crystalColor,
1213
- strokeWidth: "0.9",
1214
- strokeLinecap: "round",
1215
- opacity: animate ? 0 : 0.7,
1216
- children: animate && /* @__PURE__ */ jsx(
1217
- "animate",
1218
- {
1219
- attributeName: "opacity",
1220
- from: "0",
1221
- to: "0.7",
1222
- dur: `${duration * 0.4}s`,
1223
- begin: `${arm.delay.toFixed(2)}s`,
1224
- fill: "freeze"
1225
- }
1226
- )
1227
- },
1228
- `arm${i}`
1229
- )),
1230
- allTicks.map((tick, i) => /* @__PURE__ */ jsx(
1231
- "line",
1232
- {
1233
- x1: tick.x1,
1234
- y1: tick.y1,
1235
- x2: tick.x2,
1236
- y2: tick.y2,
1237
- stroke: crystalColor,
1238
- strokeWidth: "0.6",
1239
- strokeLinecap: "round",
1240
- opacity: animate ? 0 : 0.45,
1241
- children: animate && /* @__PURE__ */ jsx(
1242
- "animate",
1243
- {
1244
- attributeName: "opacity",
1245
- from: "0",
1246
- to: "0.45",
1247
- dur: `${duration * 0.3}s`,
1248
- begin: `${tick.delay.toFixed(2)}s`,
1249
- fill: "freeze"
1250
- }
1251
- )
1252
- },
1253
- `tick${i}`
1254
- )),
1255
- sparkles.slice(0, intensity === "subtle" ? 4 : 8).map((sp, i) => /* @__PURE__ */ jsx(
1256
- "circle",
1257
- {
1258
- cx: sp.cx,
1259
- cy: sp.cy,
1260
- r: sp.r,
1261
- fill: glowColor,
1262
- opacity: animate ? 0 : 0.8,
1263
- children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
1264
- /* @__PURE__ */ jsx(
1238
+ return motionTree(
1239
+ /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
1240
+ /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: glowFilterId, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "6" }) }) }) }),
1241
+ /* @__PURE__ */ jsxs(
1242
+ "svg",
1243
+ {
1244
+ viewBox: "0 0 100 100",
1245
+ style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
1246
+ "aria-hidden": true,
1247
+ children: [
1248
+ /* @__PURE__ */ jsx(
1249
+ "circle",
1250
+ {
1251
+ cx: "50",
1252
+ cy: "50",
1253
+ r: "30",
1254
+ fill: glowColor,
1255
+ opacity: 0.07,
1256
+ filter: `url(#${glowFilterId})`,
1257
+ children: animate && /* @__PURE__ */ jsx(
1258
+ "animate",
1259
+ {
1260
+ attributeName: "opacity",
1261
+ values: "0.04;0.11;0.04",
1262
+ dur: "4s",
1263
+ repeatCount: "indefinite"
1264
+ }
1265
+ )
1266
+ }
1267
+ ),
1268
+ allArms.map((arm, i) => /* @__PURE__ */ jsx(
1269
+ "line",
1270
+ {
1271
+ x1: arm.x1,
1272
+ y1: arm.y1,
1273
+ x2: arm.x2,
1274
+ y2: arm.y2,
1275
+ stroke: crystalColor,
1276
+ strokeWidth: "0.9",
1277
+ strokeLinecap: "round",
1278
+ opacity: animate ? 0 : 0.7,
1279
+ children: animate && /* @__PURE__ */ jsx(
1265
1280
  "animate",
1266
1281
  {
1267
1282
  attributeName: "opacity",
1268
1283
  from: "0",
1269
- to: "0.8",
1270
- dur: "0.35s",
1271
- begin: `${(duration * 0.65 + i * 0.08).toFixed(2)}s`,
1284
+ to: "0.7",
1285
+ dur: `${duration * 0.4}s`,
1286
+ begin: `${arm.delay.toFixed(2)}s`,
1272
1287
  fill: "freeze"
1273
1288
  }
1274
- ),
1275
- /* @__PURE__ */ jsx(
1289
+ )
1290
+ },
1291
+ `arm${i}`
1292
+ )),
1293
+ allTicks.map((tick, i) => /* @__PURE__ */ jsx(
1294
+ "line",
1295
+ {
1296
+ x1: tick.x1,
1297
+ y1: tick.y1,
1298
+ x2: tick.x2,
1299
+ y2: tick.y2,
1300
+ stroke: crystalColor,
1301
+ strokeWidth: "0.6",
1302
+ strokeLinecap: "round",
1303
+ opacity: animate ? 0 : 0.45,
1304
+ children: animate && /* @__PURE__ */ jsx(
1276
1305
  "animate",
1277
1306
  {
1278
1307
  attributeName: "opacity",
1279
- values: "0.3;1;0.3",
1280
- dur: `${1 + i * 0.2}s`,
1281
- repeatCount: "indefinite",
1282
- begin: `${duration}s`
1308
+ from: "0",
1309
+ to: "0.45",
1310
+ dur: `${duration * 0.3}s`,
1311
+ begin: `${tick.delay.toFixed(2)}s`,
1312
+ fill: "freeze"
1283
1313
  }
1284
1314
  )
1285
- ] })
1286
- },
1287
- `fsp${i}`
1288
- ))
1289
- ]
1290
- }
1291
- ),
1292
- /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
1293
- ] });
1315
+ },
1316
+ `tick${i}`
1317
+ )),
1318
+ sparkles.slice(0, intensity === "subtle" ? 4 : 8).map((sp, i) => /* @__PURE__ */ jsx(
1319
+ "circle",
1320
+ {
1321
+ cx: sp.cx,
1322
+ cy: sp.cy,
1323
+ r: sp.r,
1324
+ fill: glowColor,
1325
+ opacity: animate ? 0 : 0.8,
1326
+ children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
1327
+ /* @__PURE__ */ jsx(
1328
+ "animate",
1329
+ {
1330
+ attributeName: "opacity",
1331
+ from: "0",
1332
+ to: "0.8",
1333
+ dur: "0.35s",
1334
+ begin: `${(duration * 0.65 + i * 0.08).toFixed(2)}s`,
1335
+ fill: "freeze"
1336
+ }
1337
+ ),
1338
+ /* @__PURE__ */ jsx(
1339
+ "animate",
1340
+ {
1341
+ attributeName: "opacity",
1342
+ values: "0.3;1;0.3",
1343
+ dur: `${1 + i * 0.2}s`,
1344
+ repeatCount: "indefinite",
1345
+ begin: `${duration}s`
1346
+ }
1347
+ )
1348
+ ] })
1349
+ },
1350
+ `fsp${i}`
1351
+ ))
1352
+ ]
1353
+ }
1354
+ ),
1355
+ /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
1356
+ ] }),
1357
+ durationScale(durationProp !== void 0, animationSpeed),
1358
+ still
1359
+ );
1294
1360
  }
1295
1361
  ),
1296
1362
  { displayName: "NtdIconFrost" }
@@ -1300,7 +1366,9 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
1300
1366
  ({
1301
1367
  children,
1302
1368
  animate = true,
1303
- duration = 0.5,
1369
+ duration: durationProp,
1370
+ animationSpeed,
1371
+ reducedMotion,
1304
1372
  intensity = "normal",
1305
1373
  pixelColor = "#22d3ee",
1306
1374
  scanlineColor = "#000000",
@@ -1308,6 +1376,8 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
1308
1376
  className,
1309
1377
  style
1310
1378
  }, ref) => {
1379
+ const still = useStillMotion(reducedMotion);
1380
+ const duration = durationProp ?? 0.5;
1311
1381
  const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
1312
1382
  const scanAnimName = `ntd_pixel_scan_${uid}`;
1313
1383
  const glitchAnimName = `ntd_pixel_glitch_${uid}`;
@@ -1345,8 +1415,9 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
1345
1415
  { x: 48, y: 96 }
1346
1416
  ] : [];
1347
1417
  const allPixels = intensity === "subtle" ? basePixels.filter((_, i) => i % 2 === 0) : [...basePixels, ...extraPixels];
1348
- return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
1349
- animate && /* @__PURE__ */ jsx("style", { children: `
1418
+ return motionTree(
1419
+ /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
1420
+ animate && /* @__PURE__ */ jsx("style", { children: `
1350
1421
  @keyframes ${scanAnimName} {
1351
1422
  from { transform: translateY(-100%); }
1352
1423
  to { transform: translateY(200%); }
@@ -1358,74 +1429,77 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
1358
1429
  96% { transform: translate(-1px, 2px); clip-path: none; }
1359
1430
  }
1360
1431
  ` }),
1361
- /* @__PURE__ */ jsx(
1362
- "svg",
1363
- {
1364
- viewBox: "0 0 100 100",
1365
- style: { ...overlayBase, inset: "-5%", width: "110%", height: "110%", zIndex: 2 },
1366
- "aria-hidden": true,
1367
- children: allPixels.map((p, i) => /* @__PURE__ */ jsx(
1368
- "rect",
1369
- {
1370
- x: p.x,
1371
- y: p.y,
1372
- width: SZ - 0.5,
1373
- height: SZ - 0.5,
1374
- fill: pixelColor,
1375
- opacity: 0.75,
1376
- children: animate && /* @__PURE__ */ jsx(
1377
- "animate",
1378
- {
1379
- attributeName: "opacity",
1380
- values: "0.3;1;0.3",
1381
- dur: `${0.7 + i % 5 * 0.17}s`,
1382
- repeatCount: "indefinite",
1383
- begin: `${(i * 0.06 % 1).toFixed(2)}s`
1384
- }
1385
- )
1432
+ /* @__PURE__ */ jsx(
1433
+ "svg",
1434
+ {
1435
+ viewBox: "0 0 100 100",
1436
+ style: { ...overlayBase, inset: "-5%", width: "110%", height: "110%", zIndex: 2 },
1437
+ "aria-hidden": true,
1438
+ children: allPixels.map((p, i) => /* @__PURE__ */ jsx(
1439
+ "rect",
1440
+ {
1441
+ x: p.x,
1442
+ y: p.y,
1443
+ width: SZ - 0.5,
1444
+ height: SZ - 0.5,
1445
+ fill: pixelColor,
1446
+ opacity: 0.75,
1447
+ children: animate && /* @__PURE__ */ jsx(
1448
+ "animate",
1449
+ {
1450
+ attributeName: "opacity",
1451
+ values: "0.3;1;0.3",
1452
+ dur: `${0.7 + i % 5 * 0.17}s`,
1453
+ repeatCount: "indefinite",
1454
+ begin: `${(i * 0.06 % 1).toFixed(2)}s`
1455
+ }
1456
+ )
1457
+ },
1458
+ `px${i}`
1459
+ ))
1460
+ }
1461
+ ),
1462
+ /* @__PURE__ */ jsx(
1463
+ "span",
1464
+ {
1465
+ style: {
1466
+ display: "inline-flex",
1467
+ position: "relative",
1468
+ zIndex: 1,
1469
+ ...animate && glitchEffect ? { animation: `${glitchAnimName} 4s infinite` } : {}
1386
1470
  },
1387
- `px${i}`
1388
- ))
1389
- }
1390
- ),
1391
- /* @__PURE__ */ jsx(
1392
- "span",
1393
- {
1394
- style: {
1395
- display: "inline-flex",
1396
- position: "relative",
1397
- zIndex: 1,
1398
- ...animate && glitchEffect ? { animation: `${glitchAnimName} 4s infinite` } : {}
1399
- },
1400
- children
1401
- }
1402
- ),
1403
- animate && /* @__PURE__ */ jsx(
1404
- "span",
1405
- {
1406
- style: {
1407
- position: "absolute",
1408
- inset: 0,
1409
- overflow: "hidden",
1410
- pointerEvents: "none",
1411
- zIndex: 3,
1412
- background: `repeating-linear-gradient(0deg, transparent, transparent 3px, ${scanlineColor}1a 3px, ${scanlineColor}1a 4px)`
1413
- },
1414
- children: /* @__PURE__ */ jsx(
1415
- "span",
1416
- {
1417
- style: {
1418
- display: "block",
1419
- width: "100%",
1420
- height: "30%",
1421
- background: `linear-gradient(transparent, ${pixelColor}20, transparent)`,
1422
- animation: `${scanAnimName} ${duration + 2}s linear infinite`
1471
+ children
1472
+ }
1473
+ ),
1474
+ animate && /* @__PURE__ */ jsx(
1475
+ "span",
1476
+ {
1477
+ style: {
1478
+ position: "absolute",
1479
+ inset: 0,
1480
+ overflow: "hidden",
1481
+ pointerEvents: "none",
1482
+ zIndex: 3,
1483
+ background: `repeating-linear-gradient(0deg, transparent, transparent 3px, ${scanlineColor}1a 3px, ${scanlineColor}1a 4px)`
1484
+ },
1485
+ children: /* @__PURE__ */ jsx(
1486
+ "span",
1487
+ {
1488
+ style: {
1489
+ display: "block",
1490
+ width: "100%",
1491
+ height: "30%",
1492
+ background: `linear-gradient(transparent, ${pixelColor}20, transparent)`,
1493
+ animation: `${scanAnimName} ${duration + 2}s linear infinite`
1494
+ }
1423
1495
  }
1424
- }
1425
- )
1426
- }
1427
- )
1428
- ] });
1496
+ )
1497
+ }
1498
+ )
1499
+ ] }),
1500
+ durationScale(durationProp !== void 0, animationSpeed),
1501
+ still
1502
+ );
1429
1503
  }
1430
1504
  ),
1431
1505
  { displayName: "NtdIconPixel" }
@@ -1435,7 +1509,9 @@ const NtdIconOrganic = /* @__PURE__ */ Object.assign(
1435
1509
  ({
1436
1510
  children,
1437
1511
  animate = true,
1438
- duration = 3,
1512
+ duration: durationProp,
1513
+ animationSpeed,
1514
+ reducedMotion,
1439
1515
  intensity = "normal",
1440
1516
  cellColor = "#86efac",
1441
1517
  membraneColor = "#4ade80",
@@ -1443,6 +1519,8 @@ const NtdIconOrganic = /* @__PURE__ */ Object.assign(
1443
1519
  className,
1444
1520
  style
1445
1521
  }, ref) => {
1522
+ const still = useStillMotion(reducedMotion);
1523
+ const duration = durationProp ?? 3;
1446
1524
  const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
1447
1525
  const blobFilterId = `ntd_org_${uid}`;
1448
1526
  const cells = [
@@ -1472,125 +1550,129 @@ const NtdIconOrganic = /* @__PURE__ */ Object.assign(
1472
1550
  { cx: 60, cy: 95, r: 1.5 }
1473
1551
  ];
1474
1552
  const bubbleCount = intensity === "subtle" ? 2 : intensity === "dense" ? 6 : 4;
1475
- return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
1476
- /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: blobFilterId, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }),
1477
- /* @__PURE__ */ jsxs(
1478
- "svg",
1479
- {
1480
- viewBox: "0 0 100 100",
1481
- style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
1482
- "aria-hidden": true,
1483
- children: [
1484
- cells.map((c, i) => /* @__PURE__ */ jsx(
1485
- "circle",
1486
- {
1487
- cx: c.cx,
1488
- cy: c.cy,
1489
- r: c.r,
1490
- fill: c.color,
1491
- opacity: animate ? 0 : c.op,
1492
- filter: `url(#${blobFilterId})`,
1493
- children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
1494
- /* @__PURE__ */ jsx(
1495
- "animate",
1496
- {
1497
- attributeName: "opacity",
1498
- from: "0",
1499
- to: `${c.op}`,
1500
- dur: `${duration * 0.55}s`,
1501
- begin: `${(i * 0.2).toFixed(2)}s`,
1502
- fill: "freeze"
1503
- }
1504
- ),
1505
- /* @__PURE__ */ jsx(
1506
- "animate",
1507
- {
1508
- attributeName: "r",
1509
- values: `${c.r};${c.r * 1.3};${c.r}`,
1510
- dur: c.pd,
1511
- repeatCount: "indefinite",
1512
- begin: `${duration}s`
1513
- }
1514
- ),
1515
- /* @__PURE__ */ jsx(
1516
- "animate",
1517
- {
1518
- attributeName: "opacity",
1519
- values: `${c.op};${c.op * 1.7};${c.op}`,
1520
- dur: c.pd,
1521
- repeatCount: "indefinite",
1522
- begin: `${duration}s`
1523
- }
1524
- )
1525
- ] })
1526
- },
1527
- `oc${i}`
1528
- )),
1529
- intensity !== "subtle" && [
1530
- { cx: 8, cy: 8, r: 10 },
1531
- { cx: 92, cy: 92, r: 10 }
1532
- ].map((ring, i) => /* @__PURE__ */ jsx(
1533
- "circle",
1534
- {
1535
- cx: ring.cx,
1536
- cy: ring.cy,
1537
- r: ring.r,
1538
- fill: "none",
1539
- stroke: membraneColor,
1540
- strokeWidth: "0.7",
1541
- opacity: animate ? 0 : 0.35,
1542
- children: animate && /* @__PURE__ */ jsx(
1543
- "animate",
1544
- {
1545
- attributeName: "opacity",
1546
- from: "0",
1547
- to: "0.35",
1548
- dur: `${duration * 0.7}s`,
1549
- fill: "freeze"
1550
- }
1551
- )
1552
- },
1553
- `ring${i}`
1554
- )),
1555
- bubbles.slice(0, bubbleCount).map((b, i) => /* @__PURE__ */ jsx(
1556
- "circle",
1557
- {
1558
- cx: b.cx,
1559
- cy: b.cy,
1560
- r: b.r,
1561
- fill: nucleusColor,
1562
- opacity: animate ? 0 : 0.28,
1563
- children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
1564
- /* @__PURE__ */ jsx(
1553
+ return motionTree(
1554
+ /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
1555
+ /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: blobFilterId, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }),
1556
+ /* @__PURE__ */ jsxs(
1557
+ "svg",
1558
+ {
1559
+ viewBox: "0 0 100 100",
1560
+ style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
1561
+ "aria-hidden": true,
1562
+ children: [
1563
+ cells.map((c, i) => /* @__PURE__ */ jsx(
1564
+ "circle",
1565
+ {
1566
+ cx: c.cx,
1567
+ cy: c.cy,
1568
+ r: c.r,
1569
+ fill: c.color,
1570
+ opacity: animate ? 0 : c.op,
1571
+ filter: `url(#${blobFilterId})`,
1572
+ children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
1573
+ /* @__PURE__ */ jsx(
1574
+ "animate",
1575
+ {
1576
+ attributeName: "opacity",
1577
+ from: "0",
1578
+ to: `${c.op}`,
1579
+ dur: `${duration * 0.55}s`,
1580
+ begin: `${(i * 0.2).toFixed(2)}s`,
1581
+ fill: "freeze"
1582
+ }
1583
+ ),
1584
+ /* @__PURE__ */ jsx(
1585
+ "animate",
1586
+ {
1587
+ attributeName: "r",
1588
+ values: `${c.r};${c.r * 1.3};${c.r}`,
1589
+ dur: c.pd,
1590
+ repeatCount: "indefinite",
1591
+ begin: `${duration}s`
1592
+ }
1593
+ ),
1594
+ /* @__PURE__ */ jsx(
1595
+ "animate",
1596
+ {
1597
+ attributeName: "opacity",
1598
+ values: `${c.op};${c.op * 1.7};${c.op}`,
1599
+ dur: c.pd,
1600
+ repeatCount: "indefinite",
1601
+ begin: `${duration}s`
1602
+ }
1603
+ )
1604
+ ] })
1605
+ },
1606
+ `oc${i}`
1607
+ )),
1608
+ intensity !== "subtle" && [
1609
+ { cx: 8, cy: 8, r: 10 },
1610
+ { cx: 92, cy: 92, r: 10 }
1611
+ ].map((ring, i) => /* @__PURE__ */ jsx(
1612
+ "circle",
1613
+ {
1614
+ cx: ring.cx,
1615
+ cy: ring.cy,
1616
+ r: ring.r,
1617
+ fill: "none",
1618
+ stroke: membraneColor,
1619
+ strokeWidth: "0.7",
1620
+ opacity: animate ? 0 : 0.35,
1621
+ children: animate && /* @__PURE__ */ jsx(
1565
1622
  "animate",
1566
1623
  {
1567
1624
  attributeName: "opacity",
1568
1625
  from: "0",
1569
- to: "0.28",
1570
- dur: "0.5s",
1571
- begin: `${(duration * 0.65 + i * 0.18).toFixed(2)}s`,
1626
+ to: "0.35",
1627
+ dur: `${duration * 0.7}s`,
1572
1628
  fill: "freeze"
1573
1629
  }
1574
- ),
1575
- /* @__PURE__ */ jsx(
1576
- "animate",
1577
- {
1578
- attributeName: "cy",
1579
- values: `${b.cy};${b.cy - 5};${b.cy}`,
1580
- dur: `${2.2 + i * 0.45}s`,
1581
- repeatCount: "indefinite",
1582
- begin: `${duration}s`
1583
- }
1584
1630
  )
1585
- ] })
1586
- },
1587
- `ob${i}`
1588
- ))
1589
- ]
1590
- }
1591
- ),
1592
- /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
1593
- ] });
1631
+ },
1632
+ `ring${i}`
1633
+ )),
1634
+ bubbles.slice(0, bubbleCount).map((b, i) => /* @__PURE__ */ jsx(
1635
+ "circle",
1636
+ {
1637
+ cx: b.cx,
1638
+ cy: b.cy,
1639
+ r: b.r,
1640
+ fill: nucleusColor,
1641
+ opacity: animate ? 0 : 0.28,
1642
+ children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
1643
+ /* @__PURE__ */ jsx(
1644
+ "animate",
1645
+ {
1646
+ attributeName: "opacity",
1647
+ from: "0",
1648
+ to: "0.28",
1649
+ dur: "0.5s",
1650
+ begin: `${(duration * 0.65 + i * 0.18).toFixed(2)}s`,
1651
+ fill: "freeze"
1652
+ }
1653
+ ),
1654
+ /* @__PURE__ */ jsx(
1655
+ "animate",
1656
+ {
1657
+ attributeName: "cy",
1658
+ values: `${b.cy};${b.cy - 5};${b.cy}`,
1659
+ dur: `${2.2 + i * 0.45}s`,
1660
+ repeatCount: "indefinite",
1661
+ begin: `${duration}s`
1662
+ }
1663
+ )
1664
+ ] })
1665
+ },
1666
+ `ob${i}`
1667
+ ))
1668
+ ]
1669
+ }
1670
+ ),
1671
+ /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
1672
+ ] }),
1673
+ durationScale(durationProp !== void 0, animationSpeed),
1674
+ still
1675
+ );
1594
1676
  }
1595
1677
  ),
1596
1678
  { displayName: "NtdIconOrganic" }
@@ -1600,7 +1682,9 @@ const NtdIconGeometric = /* @__PURE__ */ Object.assign(
1600
1682
  ({
1601
1683
  children,
1602
1684
  animate = true,
1603
- duration = 8,
1685
+ duration: durationProp,
1686
+ animationSpeed,
1687
+ reducedMotion,
1604
1688
  intensity = "normal",
1605
1689
  primaryColor = "#6366f1",
1606
1690
  secondaryColor = "#8b5cf6",
@@ -1608,6 +1692,8 @@ const NtdIconGeometric = /* @__PURE__ */ Object.assign(
1608
1692
  className,
1609
1693
  style
1610
1694
  }, ref) => {
1695
+ const still = useStillMotion(reducedMotion);
1696
+ const duration = durationProp ?? 8;
1611
1697
  const makeTriangle = (cx, cy, r, rotDeg) => Array.from({ length: 3 }, (_, i) => {
1612
1698
  const a = (i * 120 - 90 + rotDeg) * Math.PI / 180;
1613
1699
  return `${(cx + r * Math.cos(a)).toFixed(2)},${(cy + r * Math.sin(a)).toFixed(2)}`;
@@ -1639,99 +1725,103 @@ const NtdIconGeometric = /* @__PURE__ */ Object.assign(
1639
1725
  ] : []
1640
1726
  ];
1641
1727
  const diamondPath = (cx, cy, s = 3) => `M${cx},${cy - s} L${cx + s},${cy} L${cx},${cy + s} L${cx - s},${cy}Z`;
1642
- return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
1643
- /* @__PURE__ */ jsxs(
1644
- "svg",
1645
- {
1646
- viewBox: "0 0 100 100",
1647
- style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 0 },
1648
- "aria-hidden": true,
1649
- children: [
1650
- rings.map((ring, i) => /* @__PURE__ */ jsx(
1651
- "circle",
1652
- {
1653
- cx: "50",
1654
- cy: "50",
1655
- r: ring.r,
1656
- fill: "none",
1657
- stroke: ring.color,
1658
- strokeWidth: "0.6",
1659
- strokeDasharray: ring.dash,
1660
- opacity: ring.op,
1661
- children: animate && /* @__PURE__ */ jsx(
1662
- "animateTransform",
1663
- {
1664
- attributeName: "transform",
1665
- type: "rotate",
1666
- from: "0 50 50",
1667
- to: `${ring.dir * 360} 50 50`,
1668
- dur: `${ring.dur}s`,
1669
- repeatCount: "indefinite"
1670
- }
1671
- )
1672
- },
1673
- `rng${i}`
1674
- )),
1675
- triangles.map((t, i) => /* @__PURE__ */ jsx(
1676
- "polygon",
1677
- {
1678
- points: makeTriangle(50, 50, t.r, t.rot),
1679
- fill: "none",
1680
- stroke: t.color,
1681
- strokeWidth: "0.5",
1682
- opacity: t.op,
1683
- children: animate && /* @__PURE__ */ jsx(
1684
- "animateTransform",
1685
- {
1686
- attributeName: "transform",
1687
- type: "rotate",
1688
- from: "0 50 50",
1689
- to: `${t.dir * 360} 50 50`,
1690
- dur: `${t.dur}s`,
1691
- repeatCount: "indefinite"
1692
- }
1693
- )
1694
- },
1695
- `tri${i}`
1696
- )),
1697
- diamonds.map((d, i) => /* @__PURE__ */ jsx(
1698
- "path",
1699
- {
1700
- d: diamondPath(d.cx, d.cy),
1701
- fill: accentColor,
1702
- opacity: animate ? 0 : 0.5,
1703
- children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
1704
- /* @__PURE__ */ jsx(
1705
- "animate",
1728
+ return motionTree(
1729
+ /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
1730
+ /* @__PURE__ */ jsxs(
1731
+ "svg",
1732
+ {
1733
+ viewBox: "0 0 100 100",
1734
+ style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 0 },
1735
+ "aria-hidden": true,
1736
+ children: [
1737
+ rings.map((ring, i) => /* @__PURE__ */ jsx(
1738
+ "circle",
1739
+ {
1740
+ cx: "50",
1741
+ cy: "50",
1742
+ r: ring.r,
1743
+ fill: "none",
1744
+ stroke: ring.color,
1745
+ strokeWidth: "0.6",
1746
+ strokeDasharray: ring.dash,
1747
+ opacity: ring.op,
1748
+ children: animate && /* @__PURE__ */ jsx(
1749
+ "animateTransform",
1706
1750
  {
1707
- attributeName: "opacity",
1708
- from: "0",
1709
- to: "0.5",
1710
- dur: `${duration * 0.25}s`,
1711
- begin: `${(i * 0.09).toFixed(2)}s`,
1712
- fill: "freeze"
1751
+ attributeName: "transform",
1752
+ type: "rotate",
1753
+ from: "0 50 50",
1754
+ to: `${ring.dir * 360} 50 50`,
1755
+ dur: `${ring.dur}s`,
1756
+ repeatCount: "indefinite"
1713
1757
  }
1714
- ),
1715
- /* @__PURE__ */ jsx(
1758
+ )
1759
+ },
1760
+ `rng${i}`
1761
+ )),
1762
+ triangles.map((t, i) => /* @__PURE__ */ jsx(
1763
+ "polygon",
1764
+ {
1765
+ points: makeTriangle(50, 50, t.r, t.rot),
1766
+ fill: "none",
1767
+ stroke: t.color,
1768
+ strokeWidth: "0.5",
1769
+ opacity: t.op,
1770
+ children: animate && /* @__PURE__ */ jsx(
1716
1771
  "animateTransform",
1717
1772
  {
1718
1773
  attributeName: "transform",
1719
1774
  type: "rotate",
1720
- from: `0 ${d.cx} ${d.cy}`,
1721
- to: `360 ${d.cx} ${d.cy}`,
1722
- dur: `${3 + i * 0.6}s`,
1775
+ from: "0 50 50",
1776
+ to: `${t.dir * 360} 50 50`,
1777
+ dur: `${t.dur}s`,
1723
1778
  repeatCount: "indefinite"
1724
1779
  }
1725
1780
  )
1726
- ] })
1727
- },
1728
- `dm${i}`
1729
- ))
1730
- ]
1731
- }
1732
- ),
1733
- /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
1734
- ] });
1781
+ },
1782
+ `tri${i}`
1783
+ )),
1784
+ diamonds.map((d, i) => /* @__PURE__ */ jsx(
1785
+ "path",
1786
+ {
1787
+ d: diamondPath(d.cx, d.cy),
1788
+ fill: accentColor,
1789
+ opacity: animate ? 0 : 0.5,
1790
+ children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
1791
+ /* @__PURE__ */ jsx(
1792
+ "animate",
1793
+ {
1794
+ attributeName: "opacity",
1795
+ from: "0",
1796
+ to: "0.5",
1797
+ dur: `${duration * 0.25}s`,
1798
+ begin: `${(i * 0.09).toFixed(2)}s`,
1799
+ fill: "freeze"
1800
+ }
1801
+ ),
1802
+ /* @__PURE__ */ jsx(
1803
+ "animateTransform",
1804
+ {
1805
+ attributeName: "transform",
1806
+ type: "rotate",
1807
+ from: `0 ${d.cx} ${d.cy}`,
1808
+ to: `360 ${d.cx} ${d.cy}`,
1809
+ dur: `${3 + i * 0.6}s`,
1810
+ repeatCount: "indefinite"
1811
+ }
1812
+ )
1813
+ ] })
1814
+ },
1815
+ `dm${i}`
1816
+ ))
1817
+ ]
1818
+ }
1819
+ ),
1820
+ /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
1821
+ ] }),
1822
+ durationScale(durationProp !== void 0, animationSpeed),
1823
+ still
1824
+ );
1735
1825
  }
1736
1826
  ),
1737
1827
  { displayName: "NtdIconGeometric" }