⚠️ 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

npm install sparkfx

Usage

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

Event Bus

Finally, animations can talk to each other:

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

Testing

First animation library with actual test support:

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:

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

import { config } from 'sparkfx'

config({
  defaultDuration: 400,
  theme: 'dark',
  gpuAcceleration: true,
  respectMotionPreference: true
})

Presets

import { presets } from 'sparkfx'

presets.gaming   // neon + glitch vibes
presets.minimal  // subtle, clean
presets.playful  // bouncy, elastic

MIT © mrLynchs