usefluxui

Real-time CSS interpolation engine. 96 easings, 51 animation presets, 15 spring physics configs. Color, transform, and unit interpolation. Scroll-linked animations. Stagger. Timeline. Keyframe generation. React hook + vanilla JS. Zero dependencies.

npm install usefluxui

Quick Start

import { flux } from 'usefluxui'

// Animate an element
flux(element, {
  from: { opacity: 0, y: 20 },
  to: { opacity: 1, y: 0 },
  easing: 'out-cubic',
  duration: 500,
})

// Use a preset
flux(element, { preset: 'fade-up' })

// Spring physics
flux(element, {
  from: { scale: 0 },
  to: { scale: 1 },
  spring: 'bouncy',
})

React Hook

import { useFlux } from 'usefluxui'

function FadeIn({ children }) {
  const { ref } = useFlux({
    preset: 'fade-up',
    duration: 600,
  })
  return <div ref={ref}>{children}</div>
}

96 Easings

Standard (linear, snap, smooth-step, smoother-step), Quad (in/out/inOut), Cubic, Quart, Quint, Sine, Expo, Circ, Back (light/default/heavy), Elastic, Bounce, Power1-10 (in/out/inOut), Step (3/5/8/10/16), plus 20 named bezier curves: ease, material-standard, material-decel, apple-spring, vercel, framer, swift-out, snappy, smooth, anticipate, overshoot, gentle, energetic, sluggish, dramatic, and more.

import { getEasing, getAllEasingNames } from 'usefluxui'

const ease = getEasing('out-elastic')
const value = ease(0.5) // 1.015

getAllEasingNames() // ['linear', 'in-quad', 'out-cubic', ...]

Custom Cubic Bezier

import { cubicBezier } from 'usefluxui'

const myEase = cubicBezier(0.68, -0.55, 0.265, 1.55)
myEase(0.5) // 0.49

51 Animation Presets

Fade: fade-in, fade-out, fade-up, fade-down, fade-left, fade-right

Slide: slide-up, slide-down, slide-left, slide-right

Scale: scale-in, scale-out, scale-up, scale-bounce

Rotate: rotate-in, rotate-out, flip-x, flip-y

Blur: blur-in, blur-out, text-focus

Wipe: wipe-right, wipe-left, wipe-up, wipe-down, reveal-up

Physics: bounce-in, drop-in, pop, shake, swing, rubber, jello, tada

Loop: pulse, heartbeat, float, spin, glow

Morph: morph-circle, morph-pill, expand, collapse

Color: color-shift, bg-shift

Text: tracking-in, tracking-out

Camera: kenburns-in, kenburns-out, parallax-slow, parallax-fast

import { getPreset, getAllPresetNames } from 'usefluxui'

getAllPresetNames() // ['fade-in', 'fade-up', 'scale-bounce', ...]

15 Spring Presets

default, gentle, wobbly, stiff, slow, molasses, bouncy, snappy, responsive, heavy, light, rubbery, swift, lazy, punchy.

import { getSpring, spring } from 'usefluxui'

// Named preset
const ease = getSpring('bouncy')
ease(0.5) // spring value at t=0.5

// Custom config
const custom = spring({ mass: 1, stiffness: 200, damping: 10 })

Stagger

import { stagger } from 'usefluxui'

const items = document.querySelectorAll('.card')
stagger(Array.from(items), {
  from: { opacity: 0, y: 30 },
  to: { opacity: 1, y: 0 },
  easing: 'out-cubic',
  duration: 500,
  stagger: 80,
}).play()

Scroll-Linked

import { scrollAnimation } from 'usefluxui'

scrollAnimation({
  element: document.querySelector('.hero'),
  from: { opacity: 1, scale: 1 },
  to: { opacity: 0, scale: 0.95 },
  start: 'top top',
  end: 'bottom top',
})

Timeline

import { timeline } from 'usefluxui'

timeline()
  .add({ from: { opacity: 0 }, to: { opacity: 1 }, duration: 300 })
  .add({ from: { y: 20 }, to: { y: 0 }, duration: 400 })
  .add({ from: { scale: 0.9 }, to: { scale: 1 }, duration: 300 })
  .play()

CSS Keyframe Generation

import { toKeyframes, injectKeyframes } from 'usefluxui'

const css = toKeyframes({
  from: { opacity: 0, y: 20 },
  to: { opacity: 1, y: 0 },
  easing: 'out-elastic',
  steps: 30,
  name: 'my-entrance',
})

injectKeyframes(css)
// Now use: animation: my-entrance 600ms forwards;

Color Interpolation

import { interpolateColor } from 'usefluxui'

interpolateColor('#ff0000', '#0000ff', 0.5)  // '#800080'
interpolateColor('rgb(255,0,0)', 'hsl(240,100%,50%)', 0.5)

Value Interpolation

import { interpolateValue } from 'usefluxui'

interpolateValue('0px', '100px', 0.5)   // '50px'
interpolateValue('0deg', '360deg', 0.5) // '180deg'
interpolateValue('0%', '100%', 0.25)    // '25%'

Animation Control

const anim = flux(element, {
  from: { x: 0 },
  to: { x: 200 },
  duration: 1000,
})

anim.pause()
anim.resume()
anim.reverse()
anim.seek(0.5)  // Jump to 50%
anim.stop()

Repeat & Yoyo

flux(element, {
  from: { scale: 1 },
  to: { scale: 1.1 },
  duration: 500,
  repeat: 3,        // Repeat 3 times
  yoyo: true,       // Alternate direction
})

// Infinite loop
flux(element, { preset: 'float' })
// float preset has repeat: -1 and yoyo: true built in

Stats

• 96 easing functions
• 51 animation presets
• 15 spring physics configs
• 20 named cubic bezier curves
• 445 tests passing
• Color interpolation (hex, rgb, rgba, hsl, hsla, named)
• Transform interpolation (translate, rotate, scale, skew, perspective)
• Unit interpolation (px, %, em, rem, vh, vw, deg, rad, turn)
• CSS keyframe generation
• Timeline sequencing
• Stagger with custom offset functions
• Scroll-linked animations
• React hook (useFlux)
• Full TypeScript definitions
• Zero dependencies

Disclaimer

Experimental, open-source software. Provided as-is. No warranties. DYOR.

License

MIT — 0xDragoon