CurveFlux is an interactive visualization tool for exploring animation easing functions. It provides a minimal, distraction-free canvas where different easing curves generate dynamic motion patterns in real time.
Designed for students, developers, and creative coders, CurveFlux helps you see how easing equations behave rather than just reading formulas.
- Interactive easing function selection
- Real-time curve visualization
- Minimal dark UI for visual clarity
- Smooth rendering & instant feedback
- Useful for learning animations & motion design
https://curve-flux-itkt.vercel.app/
Easing functions define how values change over time in animations. Instead of linear motion, easing adds acceleration, bounce, elasticity, and other natural behaviors.
CurveFlux transforms those equations into visual motion, making it easier to:
- Understand easing behaviors
- Compare animation styles
- Experiment creatively
- Debug motion logic
- Open the website
- Select an easing function from the left panel
- Watch the curve behavior update instantly
- Explore different motion patterns
Each easing type produces a unique visual signature.
- JavaScript
- HTML5 Canvas
- CSS
- Vercel (deployment)
https://github.com/RishiByte/CurveFlux.git
cd CurveFluxOpen index.html in your browser
or run a local server:
npx serve- Linear
- Back (In / Out / InOut)
- Bounce (In / Out / InOut)
- Circular (In / Out / InOut)
- Cubic (In / Out / InOut)
- Elastic (In / Out / InOut)
- Exponential (In / Out / InOut)
- Quadratic (In / Out / InOut)
- etc
CurveFlux is useful for:
- Students learning animations
- Frontend developers
- Motion designers
- Creative coders
- Anyone curious about easing
Contributions are welcome. Improvements, optimizations, and new easing functions are encouraged.
MIT License
Feel free to use, modify, and build upon this project.