sparkfx

micro-interactions for modern web apps

📖 Documentation •
✨ Effects •
🎮 Playground

> ⚠️ Bakım Durduruldu / Maintenance Paused
>
> Bu paket belirsiz bir süre için güncelleme almayacaktır. Mevcut özellikler çalışmaya devam edecektir.
>
> This package will not receive updates for an indefinite period. Current features will continue to work.

---

I got tired of copy-pasting the same CSS animations between projects. So I built sparkfx - a collection of 45+ effects that just work.

Install

``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
``

---

MIT © mrLynchs