---

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 and Framer 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.

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