sparkfx 1.1.3 → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -36
- package/dist/{chunk-LVTFMM3J.js → chunk-6QZMOVE5.js} +3 -3
- package/dist/{chunk-LVTFMM3J.js.map → chunk-6QZMOVE5.js.map} +1 -1
- package/dist/{chunk-V4ON3WLM.js → chunk-7SKPSZQL.js} +2 -2
- package/dist/{chunk-V4ON3WLM.js.map → chunk-7SKPSZQL.js.map} +1 -1
- package/dist/{chunk-TK2R4RPF.cjs → chunk-A3YNPPG6.cjs} +2 -2
- package/dist/{chunk-TK2R4RPF.cjs.map → chunk-A3YNPPG6.cjs.map} +1 -1
- package/dist/{chunk-4IL2CDRJ.cjs → chunk-TKPAWONZ.cjs} +3 -3
- package/dist/{chunk-4IL2CDRJ.cjs.map → chunk-TKPAWONZ.cjs.map} +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +3 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.js +1 -1
- package/dist/next.cjs +2 -2
- package/dist/next.js +1 -1
- package/dist/react.cjs +1 -1
- package/dist/react.js +1 -1
- package/dist/svelte.cjs +2 -2
- package/dist/svelte.js +1 -1
- package/dist/vue.cjs +2 -2
- package/dist/vue.js +1 -1
- package/package.json +3 -4
- package/scripts/postinstall.js +35 -38
package/README.md
CHANGED
|
@@ -1,28 +1,22 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<img src="https://
|
|
2
|
+
<img src="https://hizliresim.com/8scxm3d" alt="sparkfx" width="100" />
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
5
|
<h1 align="center">sparkfx</h1>
|
|
6
6
|
|
|
7
7
|
<p align="center">
|
|
8
|
-
<strong>Micro-interactions
|
|
9
|
-
32+ effects · Zero dependencies · Framework agnostic
|
|
8
|
+
<strong>Micro-interactions that make your UI feel alive</strong>
|
|
10
9
|
</p>
|
|
11
10
|
|
|
12
11
|
<p align="center">
|
|
13
|
-
<a href="https://www.npmjs.com/package/sparkfx">
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<
|
|
17
|
-
<img src="https://img.shields.io/npm/dm/sparkfx?color=00d4ff&style=flat-square" alt="downloads" />
|
|
18
|
-
</a>
|
|
19
|
-
<img src="https://img.shields.io/badge/dependencies-0-brightgreen?style=flat-square" alt="dependencies" />
|
|
12
|
+
<a href="https://www.npmjs.com/package/sparkfx"><img src="https://img.shields.io/npm/v/sparkfx?color=00ffa3&style=flat-square" alt="npm" /></a>
|
|
13
|
+
<a href="https://www.npmjs.com/package/sparkfx"><img src="https://img.shields.io/npm/dm/sparkfx?color=00d4ff&style=flat-square" alt="downloads" /></a>
|
|
14
|
+
<img src="https://img.shields.io/badge/TypeScript-Ready-blue?style=flat-square" alt="typescript" />
|
|
15
|
+
<img src="https://img.shields.io/badge/license-MIT-green?style=flat-square" alt="license" />
|
|
20
16
|
</p>
|
|
21
17
|
|
|
22
18
|
---
|
|
23
19
|
|
|
24
|
-
## Install
|
|
25
|
-
|
|
26
20
|
```bash
|
|
27
21
|
npm install sparkfx
|
|
28
22
|
```
|
|
@@ -36,7 +30,7 @@ const fx = spark.bounce()
|
|
|
36
30
|
element.classList.add(fx.className)
|
|
37
31
|
```
|
|
38
32
|
|
|
39
|
-
## React
|
|
33
|
+
## React
|
|
40
34
|
|
|
41
35
|
```jsx
|
|
42
36
|
import { useRef, useEffect } from 'react'
|
|
@@ -48,45 +42,38 @@ function Button() {
|
|
|
48
42
|
useEffect(() => {
|
|
49
43
|
const fx = spark.glow({ color: '#00ffa3' })
|
|
50
44
|
ref.current.classList.add(fx.className)
|
|
45
|
+
ref.current.addEventListener('mouseenter', fx.onMouseEnter)
|
|
46
|
+
ref.current.addEventListener('mouseleave', fx.onMouseLeave)
|
|
51
47
|
}, [])
|
|
52
48
|
|
|
53
49
|
return <button ref={ref}>Hover me</button>
|
|
54
50
|
}
|
|
55
51
|
```
|
|
56
52
|
|
|
57
|
-
##
|
|
53
|
+
## All 32+ Effects
|
|
58
54
|
|
|
59
|
-
|
|
60
|
-
|----------|---------|
|
|
61
|
-
| Basic | bounce, pulse, lift, scale, shake, fade, slide, rotate |
|
|
62
|
-
| Premium | glow, ripple, magnetic, tilt, elastic, jelly, rubber, morph |
|
|
63
|
-
| Visual | glitch, blur, neon, glass, shimmer, gradient, spotlight, hologram |
|
|
64
|
-
| Celebration | confetti, sparkle, firework, celebrate |
|
|
65
|
-
| Text | typewriter, scramble, wave, highlight |
|
|
55
|
+
**Basic:** bounce, pulse, lift, scale, shake, fade, slide, rotate
|
|
66
56
|
|
|
67
|
-
|
|
57
|
+
**Advanced:** glow, ripple, magnetic, tilt, elastic, jelly, rubber, morph
|
|
68
58
|
|
|
69
|
-
|
|
59
|
+
**Visual:** glitch, blur, neon, glass, shimmer, gradient, spotlight, hologram
|
|
70
60
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
spark.confetti({ colors: ['#ff0', '#0ff'], particleCount: 50 })
|
|
75
|
-
```
|
|
61
|
+
**Celebration:** confetti, sparkle, firework, celebrate
|
|
62
|
+
|
|
63
|
+
**Text:** typewriter, scramble, wave, highlight
|
|
76
64
|
|
|
77
|
-
##
|
|
65
|
+
## Customization
|
|
78
66
|
|
|
79
67
|
```js
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
import { spark } from 'sparkfx/svelte' // Svelte
|
|
68
|
+
spark.glow({ color: '#ff0', spread: 30, duration: 500 })
|
|
69
|
+
spark.tilt({ angle: 20, glare: true })
|
|
70
|
+
spark.confetti({ colors: ['#ff0', '#0ff'], particleCount: 50 })
|
|
84
71
|
```
|
|
85
72
|
|
|
86
|
-
##
|
|
73
|
+
## Frameworks
|
|
87
74
|
|
|
88
|
-
|
|
75
|
+
Works with React, Vue, Svelte, Next.js, or plain JS.
|
|
89
76
|
|
|
90
77
|
---
|
|
91
78
|
|
|
92
|
-
MIT
|
|
79
|
+
MIT · [mrLynchs](https://github.com/mrLynchs)
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {I}from'./chunk-
|
|
2
|
-
function k(l,c){let n=useRef(null);return useEffect(()=>{if(!n.current)return;let i=I[l];if(typeof i!="function")return;let s=i(c),a=n.current;if(s.className){let t=s.className.split(" ");a.classList.add(...t);}s.style&&Object.entries(s.style).forEach(([t,r])=>{a.style.setProperty(t,String(r));});let u=[],e=(t,r)=>{if(!r)return;let o=t.replace(/^on/,"").toLowerCase();a.addEventListener(o,r),u.push(()=>a.removeEventListener(o,r));};return e("mouseenter",s.onMouseEnter),e("mouseleave",s.onMouseLeave),e("mousemove",s.onMouseMove),e("click",s.onClick),e("focus",s.onFocus),e("blur",s.onBlur),()=>{u.forEach(t=>t()),s.destroy&&s.destroy(),s.className&&a.classList.remove(...s.className.split(" "));}},[l,JSON.stringify(c)]),n}function L(l){let c=useRef(null);return useEffect(()=>{if(!c.current)return;let n=c.current,i=[];return l.forEach(({name:s,options:a})=>{let u=I[s];if(typeof u!="function")return;let e=u(a);e.className&&n.classList.add(...e.className.split(" ")),e.style&&Object.entries(e.style).forEach(([r,o])=>{n.style.setProperty(r,String(o));});let t=(r,o)=>{if(!o)return;let m=r.replace(/^on/,"").toLowerCase();n.addEventListener(m,o),i.push(()=>n.removeEventListener(m,o));};t("mouseenter",e.onMouseEnter),t("mouseleave",e.onMouseLeave),t("mousemove",e.onMouseMove),t("click",e.onClick),i.push(()=>{e.destroy&&e.destroy(),e.className&&n.classList.remove(...e.className.split(" "));});}),()=>i.forEach(s=>s())},[JSON.stringify(l)]),c}export{k as a,L as b};//# sourceMappingURL=chunk-
|
|
3
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import {I}from'./chunk-7SKPSZQL.js';import {useRef,useEffect}from'react';/* sparkfx - Premium micro-interactions */
|
|
2
|
+
function k(l,c){let n=useRef(null);return useEffect(()=>{if(!n.current)return;let i=I[l];if(typeof i!="function")return;let s=i(c),a=n.current;if(s.className){let t=s.className.split(" ");a.classList.add(...t);}s.style&&Object.entries(s.style).forEach(([t,r])=>{a.style.setProperty(t,String(r));});let u=[],e=(t,r)=>{if(!r)return;let o=t.replace(/^on/,"").toLowerCase();a.addEventListener(o,r),u.push(()=>a.removeEventListener(o,r));};return e("mouseenter",s.onMouseEnter),e("mouseleave",s.onMouseLeave),e("mousemove",s.onMouseMove),e("click",s.onClick),e("focus",s.onFocus),e("blur",s.onBlur),()=>{u.forEach(t=>t()),s.destroy&&s.destroy(),s.className&&a.classList.remove(...s.className.split(" "));}},[l,JSON.stringify(c)]),n}function L(l){let c=useRef(null);return useEffect(()=>{if(!c.current)return;let n=c.current,i=[];return l.forEach(({name:s,options:a})=>{let u=I[s];if(typeof u!="function")return;let e=u(a);e.className&&n.classList.add(...e.className.split(" ")),e.style&&Object.entries(e.style).forEach(([r,o])=>{n.style.setProperty(r,String(o));});let t=(r,o)=>{if(!o)return;let m=r.replace(/^on/,"").toLowerCase();n.addEventListener(m,o),i.push(()=>n.removeEventListener(m,o));};t("mouseenter",e.onMouseEnter),t("mouseleave",e.onMouseLeave),t("mousemove",e.onMouseMove),t("click",e.onClick),i.push(()=>{e.destroy&&e.destroy(),e.className&&n.classList.remove(...e.className.split(" "));});}),()=>i.forEach(s=>s())},[JSON.stringify(l)]),c}export{k as a,L as b};//# sourceMappingURL=chunk-6QZMOVE5.js.map
|
|
3
|
+
//# sourceMappingURL=chunk-6QZMOVE5.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/adapters/react.ts"],"names":["useSpark","effectName","options","ref","useRef","useEffect","effectFn","spark","result","element","classes","key","value","cleanups","addEvent","name","handler","eventName","c","useSparkMultiple","effects","allCleanups","n","h","ev"],"mappings":"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","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/adapters/react.ts"],"names":["useSpark","effectName","options","ref","useRef","useEffect","effectFn","spark","result","element","classes","key","value","cleanups","addEvent","name","handler","eventName","c","useSparkMultiple","effects","allCleanups","n","h","ev"],"mappings":";AAgBO,SAASA,EACZC,CAAAA,CACAC,CAAAA,CACF,CACE,IAAMC,CAAAA,CAAMC,OAAU,IAAI,CAAA,CAE1B,OAAAC,SAAAA,CAAU,IAAM,CACZ,GAAI,CAACF,CAAAA,CAAI,OAAA,CAAS,OAGlB,IAAMG,CAAAA,CAAYC,EAAcN,CAAU,CAAA,CAC1C,GAAI,OAAOK,CAAAA,EAAa,WAAY,OAEpC,IAAME,EAASF,CAAAA,CAASJ,CAAO,EACzBO,CAAAA,CAAUN,CAAAA,CAAI,QAGpB,GAAIK,CAAAA,CAAO,SAAA,CAAW,CAClB,IAAME,CAAAA,CAAUF,CAAAA,CAAO,UAAU,KAAA,CAAM,GAAG,EAC1CC,CAAAA,CAAQ,SAAA,CAAU,IAAI,GAAGC,CAAO,EACpC,CAGIF,CAAAA,CAAO,OACP,MAAA,CAAO,OAAA,CAAQA,EAAO,KAAK,CAAA,CAAE,QAAQ,CAAC,CAACG,EAAKC,CAAK,CAAA,GAAM,CACnDH,CAAAA,CAAQ,KAAA,CAAM,YAAYE,CAAAA,CAAK,MAAA,CAAOC,CAAK,CAAC,EAChD,CAAC,CAAA,CAIL,IAAMC,EAA2B,EAAC,CAE5BC,EAAW,CAACC,CAAAA,CAAcC,CAAAA,GAA+B,CAC3D,GAAI,CAACA,CAAAA,CAAS,OACd,IAAMC,CAAAA,CAAYF,EAAK,OAAA,CAAQ,KAAA,CAAO,EAAE,CAAA,CAAE,WAAA,GAC1CN,CAAAA,CAAQ,gBAAA,CAAiBQ,EAAWD,CAAO,CAAA,CAC3CH,EAAS,IAAA,CAAK,IAAMJ,EAAQ,mBAAA,CAAoBQ,CAAAA,CAAWD,CAAO,CAAC,EACvE,EAEA,OAAAF,CAAAA,CAAS,aAAcN,CAAAA,CAAO,YAAY,EAC1CM,CAAAA,CAAS,YAAA,CAAcN,EAAO,YAAY,CAAA,CAC1CM,EAAS,WAAA,CAAaN,CAAAA,CAAO,WAAW,CAAA,CACxCM,CAAAA,CAAS,OAAA,CAASN,CAAAA,CAAO,OAAO,CAAA,CAChCM,CAAAA,CAAS,QAASN,CAAAA,CAAO,OAAO,EAChCM,CAAAA,CAAS,MAAA,CAAQN,EAAO,MAAM,CAAA,CAEvB,IAAM,CACTK,CAAAA,CAAS,QAAQK,CAAAA,EAAKA,CAAAA,EAAG,CAAA,CACrBV,CAAAA,CAAO,SAASA,CAAAA,CAAO,OAAA,GACvBA,CAAAA,CAAO,SAAA,EACPC,EAAQ,SAAA,CAAU,MAAA,CAAO,GAAGD,CAAAA,CAAO,SAAA,CAAU,MAAM,GAAG,CAAC,EAE/D,CACJ,CAAA,CAAG,CAACP,CAAAA,CAAY,IAAA,CAAK,UAAUC,CAAO,CAAC,CAAC,CAAA,CAEjCC,CACX,CAKO,SAASgB,EACZC,CAAAA,CACF,CACE,IAAMjB,CAAAA,CAAMC,MAAAA,CAAU,IAAI,CAAA,CAE1B,OAAAC,UAAU,IAAM,CACZ,GAAI,CAACF,CAAAA,CAAI,QAAS,OAClB,IAAMM,CAAAA,CAAUN,CAAAA,CAAI,QACdkB,CAAAA,CAA8B,GAEpC,OAAAD,CAAAA,CAAQ,QAAQ,CAAC,CAAE,KAAAL,CAAAA,CAAM,OAAA,CAAAb,CAAQ,CAAA,GAAM,CACnC,IAAMI,CAAAA,CAAYC,CAAAA,CAAcQ,CAAI,CAAA,CACpC,GAAI,OAAOT,CAAAA,EAAa,WAAY,OAEpC,IAAME,EAASF,CAAAA,CAASJ,CAAO,EAE3BM,CAAAA,CAAO,SAAA,EACPC,EAAQ,SAAA,CAAU,GAAA,CAAI,GAAGD,CAAAA,CAAO,SAAA,CAAU,MAAM,GAAG,CAAC,EAGpDA,CAAAA,CAAO,KAAA,EACP,OAAO,OAAA,CAAQA,CAAAA,CAAO,KAAK,CAAA,CAAE,OAAA,CAAQ,CAAC,CAACG,CAAAA,CAAKC,CAAK,CAAA,GAAM,CACnDH,EAAQ,KAAA,CAAM,WAAA,CAAYE,EAAK,MAAA,CAAOC,CAAK,CAAC,EAChD,CAAC,EAGL,IAAME,CAAAA,CAAW,CAACQ,CAAAA,CAAWC,IAAyB,CAClD,GAAI,CAACA,CAAAA,CAAG,OACR,IAAMC,CAAAA,CAAKF,CAAAA,CAAE,QAAQ,KAAA,CAAO,EAAE,EAAE,WAAA,EAAY,CAC5Cb,EAAQ,gBAAA,CAAiBe,CAAAA,CAAID,CAAC,CAAA,CAC9BF,CAAAA,CAAY,KAAK,IAAMZ,CAAAA,CAAQ,oBAAoBe,CAAAA,CAAID,CAAC,CAAC,EAC7D,CAAA,CAEAT,EAAS,YAAA,CAAcN,CAAAA,CAAO,YAAY,CAAA,CAC1CM,CAAAA,CAAS,aAAcN,CAAAA,CAAO,YAAY,EAC1CM,CAAAA,CAAS,WAAA,CAAaN,EAAO,WAAW,CAAA,CACxCM,CAAAA,CAAS,OAAA,CAASN,EAAO,OAAO,CAAA,CAEhCa,EAAY,IAAA,CAAK,IAAM,CACfb,CAAAA,CAAO,OAAA,EAASA,EAAO,OAAA,EAAQ,CAC/BA,EAAO,SAAA,EAAWC,CAAAA,CAAQ,UAAU,MAAA,CAAO,GAAGD,EAAO,SAAA,CAAU,KAAA,CAAM,GAAG,CAAC,EACjF,CAAC,EACL,CAAC,EAEM,IAAMa,CAAAA,CAAY,QAAQH,CAAAA,EAAKA,CAAAA,EAAG,CAC7C,CAAA,CAAG,CAAC,IAAA,CAAK,SAAA,CAAUE,CAAO,CAAC,CAAC,EAErBjB,CACX","file":"chunk-6QZMOVE5.js","sourcesContent":["/**\r\n * sparkfx - React Adapter\r\n * Hooks and components for React integration\r\n */\r\n\r\nimport { useEffect, useRef, useMemo } from 'react'\r\nimport { spark } from '../index'\r\nimport type { SparkEffectName, SparkBaseOptions, SparkResult } from '../core/types'\r\nimport clsx from 'clsx'\r\n\r\n/**\r\n * Hook to apply a single spark effect to a ref\r\n * @param effectName Name of the effect to apply\r\n * @param options Effect options\r\n * @returns React ref to attach to the target element\r\n */\r\nexport function useSpark<T extends HTMLElement = HTMLElement>(\r\n effectName: SparkEffectName,\r\n options?: SparkBaseOptions\r\n) {\r\n const ref = useRef<T>(null)\r\n\r\n useEffect(() => {\r\n if (!ref.current) return\r\n\r\n // Apply the effect\r\n const effectFn = (spark as any)[effectName]\r\n if (typeof effectFn !== 'function') return\r\n\r\n const result = effectFn(options) as SparkResult\r\n const element = ref.current\r\n\r\n // Apply class\r\n if (result.className) {\r\n const classes = result.className.split(' ')\r\n element.classList.add(...classes)\r\n }\r\n\r\n // Apply styles\r\n if (result.style) {\r\n Object.entries(result.style).forEach(([key, value]) => {\r\n element.style.setProperty(key, String(value))\r\n })\r\n }\r\n\r\n // Apply events\r\n const cleanups: (() => void)[] = []\r\n\r\n const addEvent = (name: string, handler?: (e: any) => void) => {\r\n if (!handler) return\r\n const eventName = name.replace(/^on/, '').toLowerCase()\r\n element.addEventListener(eventName, handler)\r\n cleanups.push(() => element.removeEventListener(eventName, handler))\r\n }\r\n\r\n addEvent('mouseenter', result.onMouseEnter)\r\n addEvent('mouseleave', result.onMouseLeave)\r\n addEvent('mousemove', result.onMouseMove)\r\n addEvent('click', result.onClick)\r\n addEvent('focus', result.onFocus)\r\n addEvent('blur', result.onBlur)\r\n\r\n return () => {\r\n cleanups.forEach(c => c())\r\n if (result.destroy) result.destroy()\r\n if (result.className) {\r\n element.classList.remove(...result.className.split(' '))\r\n }\r\n }\r\n }, [effectName, JSON.stringify(options)])\r\n\r\n return ref\r\n}\r\n\r\n/**\r\n * Hook for multiple effects\r\n */\r\nexport function useSparkMultiple<T extends HTMLElement = HTMLElement>(\r\n effects: { name: SparkEffectName; options?: SparkBaseOptions }[]\r\n) {\r\n const ref = useRef<T>(null)\r\n\r\n useEffect(() => {\r\n if (!ref.current) return\r\n const element = ref.current\r\n const allCleanups: (() => void)[] = []\r\n\r\n effects.forEach(({ name, options }) => {\r\n const effectFn = (spark as any)[name]\r\n if (typeof effectFn !== 'function') return\r\n\r\n const result = effectFn(options) as SparkResult\r\n\r\n if (result.className) {\r\n element.classList.add(...result.className.split(' '))\r\n }\r\n\r\n if (result.style) {\r\n Object.entries(result.style).forEach(([key, value]) => {\r\n element.style.setProperty(key, String(value))\r\n })\r\n }\r\n\r\n const addEvent = (n: string, h?: (e: any) => void) => {\r\n if (!h) return\r\n const ev = n.replace(/^on/, '').toLowerCase()\r\n element.addEventListener(ev, h)\r\n allCleanups.push(() => element.removeEventListener(ev, h))\r\n }\r\n\r\n addEvent('mouseenter', result.onMouseEnter)\r\n addEvent('mouseleave', result.onMouseLeave)\r\n addEvent('mousemove', result.onMouseMove)\r\n addEvent('click', result.onClick)\r\n\r\n allCleanups.push(() => {\r\n if (result.destroy) result.destroy()\r\n if (result.className) element.classList.remove(...result.className.split(' '))\r\n })\r\n })\r\n\r\n return () => allCleanups.forEach(c => c())\r\n }, [JSON.stringify(effects)])\r\n\r\n return ref\r\n}\r\n"]}
|
|
@@ -431,5 +431,5 @@ var re="sparkfx-styles",ee=false,te=new Set,pe=`
|
|
|
431
431
|
.sparkfx-highlight-active::after {
|
|
432
432
|
width: 100%;
|
|
433
433
|
}
|
|
434
|
-
`,document.head.appendChild(t);}function U(t){let e=p(t,Et);if(i(),Ct(),!c(e))return {className:"sparkfx-effect sparkfx-reduced-motion"};let r=s=>{s.currentTarget.classList.add("sparkfx-highlight-active");},n=s=>{s.currentTarget.classList.remove("sparkfx-highlight-active");};return {className:de("sparkfx-effect","sparkfx-highlight"),style:{...l(e),"--highlight-color":e.color,"--highlight-height":e.height},onMouseEnter:e.trigger==="hover"?r:void 0,onMouseLeave:e.trigger==="hover"?n:void 0}}var $t={bounce:w,pulse:M,lift:R,scale:T,shake:B,fade:E,slide:C,rotate:$,glow:N,ripple:L,magnetic:j,tilt:H,elastic:V,jelly:P,rubber:A,morph:q,glitch:I,blur:Y,neon:X,glass:G,shimmer:z,gradient:F,spotlight:W,hologram:_,confetti:h,sparkle:S,firework:D,celebrate:J,typewriter:K,scramble:Q,wave:Z,highlight:U},Vn=$t;export{h as A,S as B,D as C,J as D,K as E,Q as F,Z as G,U as H,$t as I,Vn as J,i as a,b,w as c,M as d,R as e,T as f,B as g,E as h,C as i,$ as j,N as k,L as l,j as m,H as n,V as o,P as p,A as q,q as r,I as s,Y as t,X as u,G as v,z as w,F as x,W as y,_ as z};//# sourceMappingURL=chunk-
|
|
435
|
-
//# sourceMappingURL=chunk-
|
|
434
|
+
`,document.head.appendChild(t);}function U(t){let e=p(t,Et);if(i(),Ct(),!c(e))return {className:"sparkfx-effect sparkfx-reduced-motion"};let r=s=>{s.currentTarget.classList.add("sparkfx-highlight-active");},n=s=>{s.currentTarget.classList.remove("sparkfx-highlight-active");};return {className:de("sparkfx-effect","sparkfx-highlight"),style:{...l(e),"--highlight-color":e.color,"--highlight-height":e.height},onMouseEnter:e.trigger==="hover"?r:void 0,onMouseLeave:e.trigger==="hover"?n:void 0}}var $t={bounce:w,pulse:M,lift:R,scale:T,shake:B,fade:E,slide:C,rotate:$,glow:N,ripple:L,magnetic:j,tilt:H,elastic:V,jelly:P,rubber:A,morph:q,glitch:I,blur:Y,neon:X,glass:G,shimmer:z,gradient:F,spotlight:W,hologram:_,confetti:h,sparkle:S,firework:D,celebrate:J,typewriter:K,scramble:Q,wave:Z,highlight:U},Vn=$t;export{h as A,S as B,D as C,J as D,K as E,Q as F,Z as G,U as H,$t as I,Vn as J,i as a,b,w as c,M as d,R as e,T as f,B as g,E as h,C as i,$ as j,N as k,L as l,j as m,H as n,V as o,P as p,A as q,q as r,I as s,Y as t,X as u,G as v,z as w,F as x,W as y,_ as z};//# sourceMappingURL=chunk-7SKPSZQL.js.map
|
|
435
|
+
//# sourceMappingURL=chunk-7SKPSZQL.js.map
|