modernize
- replace vite with tsdown - update registry - update deps
This commit is contained in:
39
README.md
39
README.md
@@ -1,4 +1,4 @@
|
||||
<img alt="unom Logo" src="https://git.unom.io/unom/brand/raw/branch/master/logo/unom_Logo_Gradient.png" width="120"/>
|
||||
<img alt="unom Logo" src="https://git.unom.io/unom/brand/raw/commit/0e22e6c48b09371fb45c6dfb148419724372634e/logo/unom_Logo_Quad_Small_Gradient.png" width="100"/>
|
||||
|
||||
---
|
||||
# style
|
||||
@@ -10,4 +10,39 @@ A collection of styling tools and assets for client applications.
|
||||
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`
|
||||
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
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user