sparkfx 1.1.6 → 1.2.0

package/README.md

@@ -1,100 +1,170 @@
 <p align="center">
-  <img src="https://hizliresim.com/8scxm3d" alt="sparkfx" width="100" />
+  <img src="https://raw.githubusercontent.com/mrLynchs/sparkfx/main/assets/logo.png" alt="sparkfx logo" width="120" />
 </p>
 
-<h1 align="center">sparkfx</h1>
+<h1 align="center">✨ sparkfx</h1>
 
 <p align="center">
-  <strong>Micro-interactions that make your UI feel alive</strong>
+  <strong>45+ micro-interactions that make your UI feel alive</strong>
 </p>
 
 <p align="center">
-  <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>
+  <a href="https://www.npmjs.com/package/sparkfx"><img src="https://img.shields.io/npm/v/sparkfx?color=00ffa3&style=flat-square" alt="npm version" /></a>
   <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>
   <img src="https://img.shields.io/badge/TypeScript-Ready-blue?style=flat-square" alt="typescript" />
+  <img src="https://img.shields.io/bundlephobia/minzip/sparkfx?style=flat-square&color=a855f7" alt="bundle size" />
   <img src="https://img.shields.io/badge/license-MIT-green?style=flat-square" alt="license" />
 </p>
 
+<p align="center">
+  <a href="#features">Features</a> •
+  <a href="#installation">Installation</a> •
+  <a href="#quick-start">Quick Start</a> •
+  <a href="#effects">Effects</a> •
+  <a href="#integrations">Integrations</a>
+</p>
+
 ---
 
+## Installation
+
 ```bash
 npm install sparkfx
 ```
 
+## Features
+
+| | |
+|---|---|
+| 🎯 **45+ Effects** | Motion, scroll, visual, text animations |
+| 🌊 **Motion** | parallax, float, flip3d, swing, orbit |
+| 📜 **Scroll** | reveal, counter with IntersectionObserver |
+| 🎨 **Visual** | aurora, matrix, rainbow, hologram, neon |
+| ⚡ **API** | combine, sequence, stagger |
+| 🎭 **Presets** | gaming, minimal, playful, corporate |
+| ♿ **A11y** | prefers-reduced-motion support |
+| 📦 **Frameworks** | React, Vue, Svelte, Next.js |
+
 ## Quick Start
 
 ```js
 import { spark } from 'sparkfx'
 
-const fx = spark.bounce()
-element.classList.add(fx.className)
+// Apply single effect
+element.classList.add(spark.bounce().className)
+
+// Combine multiple effects
+import { combine } from 'sparkfx'
+const fx = combine([spark.glow(), spark.bounce()])
 ```
 
-## Tailwind CSS Plugin
+## Effects
 
+### Basic
 ```js
-// tailwind.config.js
-module.exports = {
-  plugins: [require('sparkfx/tailwind')]
-}
+spark.bounce()  spark.pulse()  spark.lift()
+spark.scale()   spark.shake()  spark.fade()
+spark.slide()   spark.rotate()
 ```
 
-```html
-<button class="spark-bounce hover:spark-glow">Click me</button>
+### Motion (v1.2.0) 🆕
+```js
+spark.parallax({ depth: 0.5, trigger: 'scroll' })
+spark.float({ distance: 10, rotate: true })
+spark.flip3d({ direction: 'horizontal' })
+spark.swing({ angle: 15, damping: true })
+spark.orbit({ radius: 50, tilt: true })
 ```
 
-## Shadcn/ui Components
+### Scroll (v1.2.0) 🆕
+```js
+spark.reveal({ animation: 'fade-up', threshold: 0.2 })
+spark.counter({ from: 0, to: 1000, duration: 2000 })
+```
+
+### Visual
+```js
+spark.aurora({ colors: ['#00ffa3', '#00d4ff'] })
+spark.matrix({ color: '#00ff00', speed: 5 })
+spark.rainbow({ type: 'text' })
+spark.neon()  spark.glass()  spark.glitch()
+```
 
-```tsx
-import { SparkButton, SparkCard } from 'sparkfx/shadcn'
+### Celebration
+```js
+spark.confetti()  spark.sparkle()
+spark.firework()  spark.celebrate()
+```
 
-<SparkButton effect="glow">Click me</SparkButton>
-<SparkCard effect="tilt">Card content</SparkCard>
+### Text
+```js
+spark.typewriter({ speed: 50 })
+spark.scramble()  spark.wave()
+spark.highlight()
 ```
 
-## Headless UI Integration
+## API Utilities
+
+```js
+import { combine, sequence, stagger } from 'sparkfx'
 
-```tsx
-import { Transition } from '@headlessui/react'
-import { useSparkTransition } from 'sparkfx/headless'
+// Combine effects
+combine([spark.glow(), spark.bounce()])
 
-const transition = useSparkTransition('slide-up')
+// Sequence animations
+sequence(element, [
+  { effect: spark.fade(), delay: 0 },
+  { effect: spark.bounce(), delay: 200 }
+])
 
-<Transition show={isOpen} {...transition}>
-  <Dialog.Panel>Content</Dialog.Panel>
-</Transition>
+// Stagger elements
+stagger('.cards', spark.reveal(), { delay: 100 })
 ```
 
-## All 32+ Effects
+## Integrations
 
-| Category | Effects |
-|----------|---------|
-| **Basic** | bounce, pulse, lift, scale, shake, fade, slide, rotate |
-| **Advanced** | glow, ripple, magnetic, tilt, elastic, jelly, rubber, morph |
-| **Visual** | glitch, blur, neon, glass, shimmer, gradient, spotlight, hologram |
-| **Celebration** | confetti, sparkle, firework, celebrate |
-| **Text** | typewriter, scramble, wave, highlight |
+| Framework | Import |
+|-----------|--------|
+| Tailwind CSS | `sparkfx/tailwind` |
+| Shadcn/ui | `sparkfx/shadcn` |
+| Headless UI | `sparkfx/headless` |
+| React | `sparkfx/react` |
+| Vue | `sparkfx/vue` |
+| Svelte | `sparkfx/svelte` |
+| Next.js | `sparkfx/next` |
+
+### Tailwind Plugin
+```js
+// tailwind.config.js
+plugins: [require('sparkfx/tailwind')]
+```
+```html
+<button class="spark-bounce hover:spark-glow">Click</button>
+```
 
-## Integrations
+## Configuration
 
-| Integration | Status | Usage |
-|-------------|--------|-------|
-| **Tailwind CSS** | ✅ | `sparkfx/tailwind` |
-| **Shadcn/ui** | ✅ | `sparkfx/shadcn` |
-| **Headless UI** | ✅ | `sparkfx/headless` |
-| **React** | ✅ | `sparkfx/react` |
-| **Vue** | ✅ | `sparkfx/vue` |
-| **Svelte** | ✅ | `sparkfx/svelte` |
-| **Next.js** | ✅ | `sparkfx/next` |
+```js
+import { config } from 'sparkfx'
+
+config({
+  defaultDuration: 400,
+  theme: 'dark',
+  gpuAcceleration: true,
+  respectMotionPreference: true
+})
+```
 
-## Customization
+## Presets
 
 ```js
-spark.glow({ color: '#ff0', spread: 30, duration: 500 })
-spark.tilt({ angle: 20, glare: true })
-spark.confetti({ colors: ['#ff0', '#0ff'], particleCount: 50 })
+import { presets } from 'sparkfx'
+
+presets.gaming.classes   // 'spark-neon spark-glitch spark-glow'
+presets.minimal.classes  // 'spark-lift spark-fade spark-scale'
+presets.playful.classes  // 'spark-bounce spark-jelly spark-elastic'
 ```
 
 ---
 
-MIT · [mrLynchs](https://github.com/mrLynchs)
+<p align="center">MIT © <a href="https://github.com/mrLynchs">mrLynchs</a></p>

package/dist/chunk-FLYBCRQ3.cjs

@@ -0,0 +1,3 @@
+'use strict';var chunkH7FVY7R6_cjs=require('./chunk-H7FVY7R6.cjs'),react=require('react');/* sparkfx - Micro-interactions for modern web apps */
+function k(l,c){let n=react.useRef(null);return react.useEffect(()=>{if(!n.current)return;let i=chunkH7FVY7R6_cjs.qa[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=react.useRef(null);return react.useEffect(()=>{if(!c.current)return;let n=c.current,i=[];return l.forEach(({name:s,options:a})=>{let u=chunkH7FVY7R6_cjs.qa[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}exports.a=k;exports.b=L;//# sourceMappingURL=chunk-FLYBCRQ3.cjs.map
+//# sourceMappingURL=chunk-FLYBCRQ3.cjs.map

package/dist/{chunk-E3WZRDLT.cjs.map → chunk-FLYBCRQ3.cjs.map}

@@ -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-E3WZRDLT.cjs","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"]}
+{"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-FLYBCRQ3.cjs","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"]}