Движок градиентов для современных систем рендеринга. От CSS-строк до структурированных данных. Canvas, WebGL, WebGPU и другие.
Переводит CSS-подобные градиенты в структурированные и предсказуемые объекты вместо хрупких строк.
Из строки с непредсказуемым поведением в нормализированный объект, которым легко управлять.
Конвертирует строковые градиенты в CSS, Canvas и другие target-системы через модульную систему трансформеров.
Спроектирован специально для предсказуемости систем, рендер движков, визуальных редакторов, дизайн-инструментов, whiteboard-систем и кастомных рендер-пайплайнов.
npm install gradientepnpm add gradienteyarn add gradientebun add gradiente<script type="module">
import { parse } from 'https://unpkg.com/gradiente@2.0.0/dist/index.mjs';
const gradient = parse('linear-gradient(red, blue)');
console.log(gradient);
</script>Градиенты
Градиент - это всего лишь «плавный переход между цветами» - до тех пор, пока не попробуешь отрисовать его вне HTML/CSS. Разные движки по-разному интерпретируют углы, цветовые пространства меняют восприятие, и даже такой простой случай, как линейный градиент из двух цветовых стопов, может давать заметно разные результаты.
В CSS градиенты - это строки. Но под капотом это данные: конфигурация, позиции, правила интерполяции и цветовые модели. Если не контролировать эти части, невозможно контролировать сам градиент.
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.6), transparent 26%), linear-gradient(135deg, #ff74f6, #fb7655, #f63539); Градиент обычно описывают как плавный переход между цветами.
На практике этого определения недостаточно.
Стоит попробовать отрисовать один и тот же градиент в разных средах - и сразу появляются расхождения. Углы смещаются, переходы ощущаются иначе, а иногда результат вообще не совпадает с ожиданиями.
В CSS направления вроде to right или 135deg следуют конкретной конвенции. В других системах часто используется другая точка отсчёта или направление вращения.
В итоге один и тот же градиент как минимум имеет разный угол ротации, а иногда выглядеть по разному из-за разных систем интерполяции цветов.
Смешивание двух цветов - это не одна операция. В зависимости от выбранного цветового пространства переход может быть:
RGB, HSL, Lab или OKLCH дадут разные результаты при одних и тех же входных данных.
Когда пишут:
linear-gradient(red, blue)Система видит:
Эти значения задаются по умолчанию и являются частью логики рендера, а не синтаксиса.
Браузеры могут отрисовывать градиенты, которые нельзя напрямую воспроизвести в Canvas. В некоторых движках нет поддержки color hints или продвинутой интерполяции.
Чтобы градиенты были переносимыми, их нужно приводить к нормализованной модели, понятной разным рендерерам.
Градиенты кажутся простыми, потому что их синтаксис компактный. Но под капотом это не строки, а структурированные данные.
Gradiente появился потому, что градиенты перестают быть простыми, как только появляется необходимость их контролировать.
Но этим всё не ограничивается.
Те же вопросы возникают повсюду:
Gradiente - это один из ответов на эти вопросы. Он сфокусирован на цвете и переходах.
Flowscape - более широкий уровень. 2D-движок для создания визуальных редакторов, инструментов и рендер-пайплайнов, где всё представлено как структурированные данные, а не хрупкие абстракции.
Градиенты - лишь один слой.
Если разрабатывается что-то визуальное - canvas, редактор или дизайн-инструмент - с этими проблемами всё равно придётся столкнуться.
Именно отсюда всё начинается.