100% Free & Browser-Based
Interactive Motion & Engineering Tools
Small, free tools for UI motion. Each one does one job in your browser: tune a spring, pick an easing, write keyframes, check a Lottie file or build motion tokens.
Spring Animation Generator
This spring animation generator lets you tune stiffness, damping and mass on a live button and toggle, then copy the same spring as Framer Motion, React Native Reanimated, SwiftUI or CSS code. It is free and runs in your browser.
CSS Spring Easing Generator
This CSS spring easing generator turns stiffness, damping and mass into a CSS linear() easing and a matching duration, so you get spring motion with no JavaScript. Copy the two custom properties and use them in any transition or animation.
Easing Functions Cheat Sheet
This easing functions cheat sheet shows every standard easing, from easeInSine to easeOutBounce, as a curve you can preview. Click any easing to copy it as CSS cubic-bezier() where one exists, as CSS linear() for elastic and bounce, or as a JavaScript function.
Cubic Bezier Editor
This cubic bezier editor lets you set the two control points of a CSS easing curve, see the curve and a moving preview, and copy the cubic-bezier() value. It is free and needs no sign-up.
CSS Keyframes Animation Generator
This CSS keyframes animation generator builds a ready-to-paste @keyframes rule and animation property from a preset such as fade in, slide up or shake. Set duration, delay, easing and repeat, preview it live, and copy the CSS with a reduced-motion fallback included.
Lottie JSON Viewer
This Lottie JSON viewer plays any Lottie .json file in your browser and shows its size, frame rate, duration, layers and markers. Drop a file to preview it, scrub frame by frame, and change speed or background. The file is never uploaded.
Spring Animation Duration Calculator
This spring animation duration calculator tells you how long a spring takes to settle within 1% of its target, plus its damping ratio, overshoot and frequency. Enter stiffness, damping and mass and the numbers update as you drag.
Motion Token Generator
This motion token generator turns two spring presets, snappy and gentle, into design tokens you can paste into a design system. Export them as design token JSON in the DTCG style or as CSS custom properties with linear() easings.
Figma Animation to Spring Converter
This Figma animation converter turns the duration and curve of a Smart Animate transition into a spring with similar timing, and gives you Framer Motion, Reanimated and SwiftUI code. Type the values from Figma; nothing is read from your file.
Color Wheel & Palette Generator
This color wheel and palette generator builds a UI palette from one base color using complementary, analogous, triadic or tetradic harmony. It shows the palette on a sample card, checks the button text contrast, and exports CSS variables, a Tailwind config, token JSON or SwiftUI colors.
Want the full visual motion environment?
ExodeUI combines vector drawing, multi-state machines, and real physics into one desktop application and web canvas.