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