CSS interpolation engine

Animate anything.
Precisely.

96 easings. 51 presets. 15 spring configs. Color, transform, unit interpolation. Scroll-linked. Stagger. Timeline. Zero dependencies.

npm install usefluxui
96
Easings
51
Presets
15
Springs
0
Deps

How it works

import { flux } from 'usefluxui'

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

// One-liner with preset
flux(element, { preset: 'fade-up' })

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

96 Easing Functions

Every easing returns valid values at t=0, 0.5, 1. Click to see the curve.

51 Animation Presets

One-liner animations. Fade, slide, scale, rotate, blur, wipe, bounce, physics, loops, morph, color, text, camera.

15 Spring Presets

Analytical solver. Under-damped, critically damped, over-damped.

Full toolkit

Color Interpolation

Hex, RGB, RGBA, HSL, HSLA, named colors.

Transform Interpolation

translate, rotate, scale, skew, perspective.

Scroll-Linked

Scrub tied to scroll position. Start/end edges.

Timeline

Sequence animations with offsets. Chainable.

Stagger

Multiple elements with per-item delay.

Keyframe Gen

Generate @keyframes CSS from any easing.

React Hook

useFlux returns a ref. Attach, auto-play, auto-clean.

TypeScript

Full type definitions. IDE autocomplete.