Документация v3.1

Дизайн, который дышит.

Техническое руководство для интеграции Pixly в ваш стек. Настройте умные палитры и микро-анимации за 5 минут.

Быстрый старт: Установка и настройка

Минимальная конфигурация для максимальной выразительности.

Pixly работает как независимый пакет в экосистеме npm. Он не требует глобального изменения вашего CSS, а внедряется через CSS-переменные и JS-хуки.

      $ npm install @pixly/ui-core
    

После установки импортируйте базовые токены в ваш main.ts или App.jsx:

      import { initPixly } from '@pixly/ui-core';

      initPixly({

        theme: 'calm-wellness',

        animations: 'ease-natural'

      });

API Reference: Описание методов

Программный контроль над визуальным ритмом.

Ядро Pixly предоставляет несколько ключевых методов для управления состоянием интерфейса. Все методы возвращают промисы и типизированы в TypeScript.

setPalette()

Динамически заменяет цветовую схему на лету. Принимает объект конфигурации или строку-презет (например, 'forest-mist', 'midnight-lavender').

animate()

Применяет классы микро-анимации к выбранному элементу. Поддерживает параметры duration и stagger для создания эффекта "дыхания".

getContrastRatio()

Утилита для проверки доступности. Принимает два HEX-кода и возвращает коэффициент контрастности согласно WCAG 2.1 AA/AAA.

Конфигурация: Настройка палитр и тем

Генеративный дизайн на основе биомимикрии.

Pixly использует алгоритм генерации на основе одной "семенной" точки (Seed Color). Система автоматически выводит 12 оттенков, включая тени, акценты и фоны, сохраняя баланс яркости.

Пример конфигурации (pixly.config.js)

        export default {

          seed: '#84a98c', // Sage Green

          mode: 'dark',

          vibrancy: 0.6, // 0.0 - 1.0

          warmth: 'neutral',

          output: [

            'variables',

            'tailwind-extensions'

          ]

        };

Примеры кода: Реальные кейсы

От хаоса к порядку в production.

Смотрите, как финтех-стартап "FlowBank" использовал Pixly для снижения когнитивной нагрузки на дашбордах аналитики.

Кейс 1: Динамический режим чтения

Использование хука usePixlyTheme для автоматического переключения контрастности в зависимости от времени суток пользователя.

Кейс 2: Микро-взаимодействия кнопок

Применение класса .px-breathe к кнопкам CTA для создания эффекта пульсации при наведении, что повышает CTR на 14%.

24kb Размер Gzip

100% Типизация TS

0 Зависимостей

Нужна помощь с настройкой?

Наша команда разработчиков готова помочь вам интегрировать Pixly в ваш проект любой сложности.

Связаться с поддержкой