unom Logo --- # style A collection of styling tools and assets for client applications. ## Get started 1. Clone the repository to your local machine 2. Run `yarn install` or `npm install` 3. To start development use `yarn start` or `npm start` 4. For building a production build use `yarn build` or `npm build` --- ## Easings The `Easings` module provides a set of pre-configured cubic bezier easing curves for use with animation libraries like [Motion](https://motion.dev/) and [Framer Motion](https://www.framer.com/motion/). Each easing type exposes three variants — `in`, `out`, and `inOut` — each returning a fully formed transition config object ready to be spread directly into a Motion component's `animate`, `whileHover`, `transition`, or similar props. ### Available easings - `sine` - `quad` - `cubic` - `quart` - `quint` - `expo` - `circ` - `back` - `elastic` - `bounce` ### Variants Each easing function takes a `duration` (in seconds) and an optional `delay` (in seconds), and returns three transition configs: - **`in`** — starts slow, ends fast. Use for elements leaving the screen or fading out. - **`out`** — starts fast, ends slow. Use for elements entering the screen or settling into place. - **`inOut`** — decelerates symmetrically on both ends. Use for elements that move between two states on screen. ```typescript import { ease } from '@unom/style'; const cubicOut = ease.cubic(0.4).out; // duration: 0.4s, no delay const quartInOut = ease.quart(0.6, 0.2).inOut; // duration: 0.6s, delay: 0.2s ```