https://github.com/chenz24/easing.tools
A visual editor for crafting, comparing, and exporting easing curves & spring animations for your UI projects.
https://github.com/chenz24/easing.tools
easing easing-functions motion
Last synced: about 1 month ago
JSON representation
A visual editor for crafting, comparing, and exporting easing curves & spring animations for your UI projects.
- Host: GitHub
- URL: https://github.com/chenz24/easing.tools
- Owner: chenz24
- License: mit
- Created: 2026-04-07T02:30:55.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-07T06:50:03.000Z (about 2 months ago)
- Last Synced: 2026-04-07T08:09:26.099Z (about 2 months ago)
- Topics: easing, easing-functions, motion
- Language: TypeScript
- Homepage: https://easing.tools
- Size: 158 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
easing.tools
A visual editor for crafting, comparing, and exporting easing curves & spring animations for your UI projects.
Live Demo ·
Features ·
Getting Started ·
Contributing
---
## Features
### Cubic Bezier Editor
- Interactive canvas — drag control points to shape your curve in real time
- **50+ built-in presets** across four categories:
- **Classic** — Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back
- **Material Design 3** — Emphasized, Standard (Accelerate / Decelerate)
- **Material Design 2** — Standard, Decelerate, Accelerate, Sharp
- **Apple HIG** — Default, Ease In/Out, Keyboard, Modal, Spring approximations
- Numeric inputs for precise `cubic-bezier()` values
- Adjustable duration
### Spring Animation Editor
- Physics-based spring model with **mass**, **stiffness**, **damping**, and **velocity** controls
- **13 curated spring presets** — jump, beat, plopp, breeze, wave, peak, lightning, viscous, dribble, throw, catch, attention, slide
- Auto-calculated duration based on settling time
### Animation Preview
- Real-time preview with **10 animation types**: Position, Scale, Opacity, Rotation, Combined, Bounce, Slide, Path Follow, Color Shift, Blur
- Customizable preview shapes (Ellipse, Squircle, Rectangle, Rhombus) and fills (Solid, Halftone, Gradient, Outline)
### Scene Fitness Scoring
- Evaluates how well your curve fits **11 common UI scenarios** — List Loading, Drawer, Skeleton, Button Hover, Modal, Toast, Tab Switch, Accordion, Page Transition, Tooltip, Carousel
- Provides a fitness level (Great / Good / Fair / Poor) with actionable tips
- Score breakdown across curve fit, duration, and stability dimensions
- Live UI scene demos showing your curve applied to real components
### Curve Comparison
- Side-by-side comparison of your curve against any other preset
- Quantitative metrics: max deviation, average deviation, T90 delta, perceived speed
- Animated tracks for visual comparison
### Multi-Platform Code Export
- One-click copy for **Web**, **iOS**, **Android**, and more
- Formats include CSS `cubic-bezier()`, JSON, and platform-specific snippets
### Save & Customize
- Save your own curves and springs to a personal library (persisted in localStorage)
- Rename and delete custom presets
### Dark Mode & Responsive
- System-aware dark / light theme
- Responsive layout with mobile-friendly panels
## Tech Stack
| Layer | Technology |
| ----------- | --------------------------------------------- |
| Framework | [React 18](https://react.dev) |
| Language | [TypeScript](https://www.typescriptlang.org) |
| Build | [Vite](https://vitejs.dev) |
| Styling | [Tailwind CSS](https://tailwindcss.com) |
| Components | [Radix UI](https://www.radix-ui.com) |
| Lint/Format | [Biome](https://biomejs.dev) |
| Testing | [Vitest](https://vitest.dev) |
| Package Mgr | [pnpm](https://pnpm.io) |
## Getting Started
### Prerequisites
- **Node.js** >= 18
- **pnpm** >= 8
### Installation
```bash
git clone https://github.com/chenz24/easing.tools.git
cd easing.tools
pnpm install
```
### Development
```bash
pnpm dev
```
The dev server will start at `http://localhost:8080`.
### Build
```bash
pnpm build
```
### Preview Production Build
```bash
pnpm preview
```
### Lint & Format
```bash
# Check
pnpm lint
# Auto-fix
pnpm lint:fix
# Format
pnpm format
```
### Test
```bash
# Run once
pnpm test
# Watch mode
pnpm test:watch
```
## Project Structure
```
src/
├── components/
│ ├── editor/ # Core editor components (BezierCanvas, SpringCanvas, PreviewPanel, CodeExport, ...)
│ ├── layout/ # App shell & navigation
│ └── ui/ # Shared UI primitives (Button, Card, Dialog, ...)
├── hooks/ # State management (useEasingStore, useSpringStore, ...)
├── lib/ # Business logic (easingCurves, springCurves, sceneFitness, ...)
├── pages/ # Route pages
├── App.tsx
└── main.tsx
```
## Contributing
Contributions are welcome! Whether it's a bug fix, new feature, or documentation improvement — feel free to open an issue or submit a pull request.
1. Fork the repository
2. Create your feature branch (`git checkout -b feat/my-feature`)
3. Commit your changes (`git commit -m 'feat: add my feature'`)
4. Push to the branch (`git push origin feat/my-feature`)
5. Open a Pull Request
Please make sure `pnpm lint` and `pnpm test` pass before submitting.
## License
[MIT](./LICENSE)
## Acknowledgements
- Easing curve values referenced from [easings.net](https://easings.net)
- Material Design motion specs from [m3.material.io](https://m3.material.io/styles/motion)
- Apple HIG motion guidance from [developer.apple.com](https://developer.apple.com/design/human-interface-guidelines/motion)