gradiente 1.0.1 → 2.0.0

package/README.md

@@ -1,175 +1,111 @@
-![gradiente](https://raw.githubusercontent.com/Flowscape-UI/gradiente/378cf4dc85befd4d952a05a6bfde67c4be7c3bda/assets/logo.svg?token=AHBVSUSCAWP7PEXERSJABITJ4PKTS)
+<div align="center">
 
-<a href="https://www.npmjs.com/package/gradiente">
+  <img src="https://raw.githubusercontent.com/Flowscape-UI/gradiente/fff32510afe7e3e1b7b2f73dbf7246843a06d859/assets/logo.svg" alt="gradiente logo" />
+
+  <h1>gradiente</h1>
+
+  <p>Minimalist & lightweight engine for sophisticated web gradients</p>
+
+  <img src="https://raw.githubusercontent.com/Flowscape-UI/gradiente/d8429051f700698f664d8d2392cfa58a604f8e83/assets/flowscape-badge.svg" alt="npm version" />
+  <br />
+
+  <a href="https://www.npmjs.com/package/gradiente">
     <img src="https://img.shields.io/npm/v/gradiente.svg?style=flat-square&labelColor=d84f4c&color=black" alt="npm version">
-</a>
-<a href="https://bundlephobia.com/result?p=gradiente">
-    <img src="https://img.shields.io/bundlephobia/minzip/gradiente?style=flat-square&labelColor=d84f4c&color=black" alt="bundle size">
-</a>
-<a href="https://www.npmjs.com/package/gradiente">
-    <img src="https://img.shields.io/npm/dw/gradiente?style=flat-square&labelColor=d84f4c&color=black" alt="weekly downloads">
-</a>
+  </a>
+  <a href="https://bundlephobia.com/result?p=gradiente">
+    <img src="https://img.shields.io/bundlephobia/minzip/gradiente?style=flat-square&labelColor=d84f4c&color=black" alt="bundle size"/>
+  </a>
+  <a href="https://github.com/Flowscape-UI/gradiente/blob/main/LICENSE">
+    <img src="https://img.shields.io/github/license/Flowscape-UI/gradiente?style=flat-square&labelColor=d84f4c&color=black" alt="license"/>
+  </a>
+</div>
 
 
 # Gradiente
 
-**Gradiente** is a lightweight gradient engine for turning CSS gradients into clean, normalized data structures.
+**Gradiente** is a lightweight gradient parser and transformer for modern rendering systems.
 
-It is built for rendering systems, visual editors, and developer tools where gradients need to be more than just strings.
+Parse CSS gradients → work with structured data → render anywhere.
 
-> **Gradients as data, not strings.**
+> Gradients as data, not strings.
 
 ---
 
-## Installation
+## Install
 
 ```bash
 npm install gradiente
-bun add gradiente
-pnpm add gradiente
-yarn add gradiente
-```
+````
 
 ---
 
-## Quick Example
+## Example
 
 ```ts
-import { parse } from 'gradiente';
+import { parse, transformTo } from "gradiente";
 
-const gradient = parse('linear-gradient(red, blue)');
-```
+const gradient = parse("linear-gradient(red, blue)");
 
-## Result:
+const css = transformTo("css", gradient);
+const canvas = transformTo("canvas", gradient);
 
-```ts
-{
-  kind: 'linear',
-  repeat: 'normal',
-  direction: {
-    kind: 'angle',
-    value: { kind: 'dimension', value: 0, unit: 'deg' },
-    valueRaw: { kind: 'dimension', value: 0, unit: 'rad' },
-    keywords: ['to', 'top']
-  },
-  stops: [
-    {
-      kind: 'color-stop',
-      color: 'red',
-      position: { kind: 'percentage', value: 0 }
-    },
-    {
-      kind: 'color-stop',
-      color: 'blue',
-      position: { kind: 'percentage', value: 1 }
-    }
-  ]
-}
+canvas.draw(ctx, 300, 300);
 ```
 
 ---
 
-## Supported Gradients
-
-Gradiente currently supports:
+## Supported
 
 ```ts
-parse('linear-gradient(...)')
-parse('repeating-linear-gradient(...)')
+linear-gradient(...)
+repeating-linear-gradient(...)
 
-parse('radial-gradient(...)')
-parse('repeating-radial-gradient(...)')
+radial-gradient(...)
+repeating-radial-gradient(...)
 
-parse('conic-gradient(...)')
-parse('repeating-conic-gradient(...)')
+conic-gradient(...)
+repeating-conic-gradient(...)
 ```
 
 ---
 
-## What Gradiente Does
+## What it does
 
-### Parses gradients into structured objects
+* Parses gradients into structured objects
+* Normalizes angles, positions, and stops
+* Transforms gradients to different targets:
 
-```ts
-import { parse } from 'gradiente';
-
-const gradient = parse('conic-gradient(from 45deg, red, blue)');
-```
-
-Instead of getting a raw string you have to manually interpret, you get real data you can work with.
+  * CSS
+  * Canvas
+  * (more coming)
 
 ---
 
-### Keeps values renderer-friendly
-
-Angles and positions are normalized into a stable internal representation so they are easier to use in:
-
-* Canvas
-* WebGL
-* Pixi
-* Konva
-* custom graphics engines
-
-
-
-## Design Goals
-
-Gradiente is built around a few core ideas:
-
-* **Simple external API**
-* **Normalized internal model**
-* **Predictable stop data**
-* **Useful for real rendering systems**
-* **Easy to extend for future gradient types**
-
-It is not trying to be a full browser CSS engine.
-
-It is trying to be a practical gradient engine for developers.
-
----
-
-## Built For
-
-Gradiente is especially useful for:
+## Built for
 
 * design tools
 * visual editors
-* whiteboards
 * canvas engines
-* procedural graphics
-* charting and data visualization systems
-* custom render pipelines
+* WebGL / Pixi / Konva
+* custom rendering pipelines
 
 ---
 
-## Current Status
-
-Implemented:
+## Status
 
-* linear gradients
-* repeating linear gradients
-* radial gradients
-* repeating radial gradients
-* conic gradients
-* repeating conic gradients
-* stop normalization
-* repeating stop expansion
-
-Planned:
-
-* gradient serialization
-* gradient sampling
-* playground / live preview
-* docs website
+* [x] linear gradients
+* [x] radial gradients
+* [x] conic gradients
+* [x] canvas + css transformers
+* [ ] docs
+* [ ] playground
+* [ ] more render targets
 
 ---
 
 ## Philosophy
 
-Gradiente treats gradients as a structured graphics primitive.
-
-Not a string to preserve.
-Not a browser quirk to emulate.
-A piece of graphics data you can actually use.
+Gradiente treats gradients as a graphics primitive.
 
-> **Build gradients like an engine, not like a stylesheet.**
+Not a string to preserve -
+but data you can transform and render anywhere.