Deploy complete
2.4s · 14 files · 0 errors
Animations
spring
ease-out
Frame rate
60 fps
Active easing
cubic-bezier
(0.16, 1, 0.3, 1)
Motion-first design system

Stop shipping static UIs. Flux gives you the easing curves, animation primitives, and motion patterns to make every interaction feel intentional.

Explore Flux
60
FPS guaranteed
14
Easing presets
200+
Motion patterns
Motion primitives

Everything moves
with purpose

Six motion categories. One coherent system. From micro-interactions to full-page choreography.

Entrance animations
Word-by-word headlines, staggered card grids, slide-from-direction reveals. Every entrance has intent.
Scroll choreography
Elements reveal as they enter the viewport. IntersectionObserver-powered, GPU-accelerated, one-shot by default.
Hover morphing
Buttons expand, icons transform, cards lift. Every hover state communicates interactivity through physical metaphor.
Micro-interactions
Toggle springs, checkmarks draw, inputs bloom on focus. 80–150ms reactions that reward every user gesture.
Floating elements
Ambient motion that makes static layouts feel alive. Asynchronous float cycles prevent the robotic in-sync look.
Page transitions
Route changes that feel like spatial navigation. The user always knows where they came from and where they are going.
Button motion

Buttons that respond

Three motion treatments. Each one answers a different interaction question.

Shimmer + arrow reveal
Hover: shimmer sweep + arrow slides in + padding expands
Lift + glow
Hover: lifts 2px + glow ring expands + shadow deepens
Expand ghost
Hover: horizontal padding expands + background fills softly
Micro-interactions

The details that matter

Every gesture deserves a response. These are the moments users feel but never consciously notice.

Toggle switch
Spring easing · 240ms
Checkbox draw
Stroke draw · 220ms
Hover card
Progress
Hover to animate bar
Bar expands on hover
Focus input
Focus ring bloom · 180ms
Scroll-linked motion

Bars fill as you scroll

Each element below triggers when it enters the viewport. Scroll down to watch them animate in sequence.

01
Entrance animations — word-by-word, staggered reveal
02
Hover morphing — expand, glow, shimmer, transform
03
Micro-interactions — toggle spring, checkbox draw, focus bloom
04
Floating elements — ambient motion, asynchronous loops
Page transitions

Routes that feel spatial

Click the tabs to see content slide between pages. The outgoing page exits left, the incoming slides in from the right — exactly as a spatial navigation model should behave.

flux.dev/dashboard
Dashboard
Analytics
Settings
Welcome back, Jamie
Your motion library is performing well. 3 new patterns deployed this week.
214
Animations active
98%
Avg frame rate
4.2k
Interactions / day
Motion analytics
Average interaction duration has dropped 22% since switching to spring easing across all CTAs.
hoverbtn-primaryavg 280ms · 1,402 triggers
scrollfeature-cardsavg 550ms · 88 users
clicktoggle-switchavg 240ms · 3,214 triggers
focusinput-fieldavg 180ms · 942 triggers
Motion preferences
Configure default easing, durations, and reduced-motion fallbacks for your entire system.
Default easing ease-out-expo
Entrance duration 450ms
Reduced motion Respected
← Click the tabs to trigger the slide transition →
Stagger patterns

Three ways to choreograph

The same 5 items. Three different stagger patterns. The delay rhythm changes how the group feels — quick and decisive, or considered and deliberate.

← Slide · 60ms stagger
14ms
28ms
41ms
22ms
38ms
↓ Cascade · 80ms stagger
60fps
60fps
60fps
60fps
60fps
⊕ Scale · 100ms stagger
spring
spring
spring
spring
spring
What teams say

Motion changes everything

Quotes type themselves as they enter the viewport — a small kinetic demonstration of the point being made.

★★★★★
SR
Sarah R.
Design Lead, Lattice
★★★★★
MK
Marcus K.
Product, Attio
★★★★★
NP
Nadia P.
Engineer, Resend
Pricing

Start moving today

Every plan includes the full motion primitive library. Upgrade for team features and advanced patterns.

Hobby
$0
forever free
  • Core easing library
  • Scroll reveal system
  • 3 motion presets
  • Community support
Team
$79
per month
  • Everything in Pro
  • Shared design tokens
  • Team motion library
  • Custom easing builder
  • Dedicated onboarding