45+ micro-interaction effects with Event Bus & Testing Kit. Motion, scroll, visual effects. Zero dependencies, full TypeScript.
npm install sparkfx
micro-interactions for modern web apps
📖 Documentation •
✨ Effects •
🎮 Playground
bash
npm install sparkfx
`
Usage
`js
import { spark } from 'sparkfx'
// basic stuff
spark.bounce()
spark.glow({ color: '#8b5cf6' })
spark.shake({ intensity: 0.8 })
// combine them
import { combine } from 'sparkfx'
combine([spark.glow(), spark.lift()])
`
What's in the box
Basic - bounce, pulse, lift, scale, shake, fade, slide, rotate
Premium - glow, ripple, magnetic, tilt, elastic, jelly, rubber, morph
Visual - glitch, blur, neon, glass, shimmer, gradient, spotlight, hologram, aurora, matrix, rainbow
Motion - parallax, float, flip3d, swing, orbit
Scroll - reveal, counter
Celebration - confetti, sparkle, firework, celebrate
Text - typewriter, scramble, wave, highlight
v1.2.1 - New stuff
$3
Finally, animations can talk to each other:
`js
import { eventBus, when } from 'sparkfx'
// trigger one animation when another finishes
when('#modal', 'complete').trigger('#backdrop', 'fadeOut')
// listen to everything
eventBus.on('animation:start', ({ effect }) => {
console.log(${effect} started)
})
`
$3
First animation library with actual test support:
`js
import { createTestContext, sparkMatchers } from 'sparkfx/testing'
expect.extend(sparkMatchers)
test('animation timing', () => {
const ctx = createTestContext()
const anim = ctx.track(spark.fadeIn(el))
ctx.advanceTime(150)
expect(anim).toHaveProgress(0.5)
})
`
Framework support
Works everywhere:
`js
// react
import { useSparkFx } from 'sparkfx/react'
// vue
import { useSparkFx } from 'sparkfx/vue'
// svelte
import { sparkfx } from 'sparkfx/svelte'
// tailwind plugin
plugins: [require('sparkfx/tailwind')]
`
Config
`js
import { config } from 'sparkfx'
config({
defaultDuration: 400,
theme: 'dark',
gpuAcceleration: true,
respectMotionPreference: true
})
`
Presets
`js
import { presets } from 'sparkfx'
presets.gaming // neon + glitch vibes
presets.minimal // subtle, clean
presets.playful // bouncy, elastic
``