UI Библиотека
UI Библиотека — каталог интерактивных React-компонентов для Opensophy Hub. Анимированные тексты, декоративные фоны, визуальные эффекты — каждый компонент представлен с живым превью и интерактивным настройщиком прямо в документации.
Два направления
Библиотека развивается в двух направлениях — они отличаются не качеством, а происхождением.
Подборка на основе открытых UI-паттернов и популярных решений сообщества. Готовы к использованию уже сейчас: эффекты для текста, WebGL-фоны, Canvas-анимации. Быстро пополняются.
Авторские компоненты с визуальным языком Opensophy. Разрабатываются под конкретные задачи экосистемы — Hub, документация, лендинги. Появятся позже.
Community компоненты
Это основа текущей библиотеки. Компоненты вдохновлены открытыми источниками и адаптированы под Hub: переработаны под TypeScript, получили универсальные пропсы для управления масштабом, цветом, анимацией и другими параметрами через интерактивный viewer.
Сейчас доступны две категории:
Типографика
Компоненты для выразительной работы с текстом.
| Компонент |
Описание |
| Блюрный текст |
Появление по словам или буквам с эффектом размытия |
| Размытый текст |
Случайный фаззинг строк через Canvas, глитч-режим |
| Морфинг текста |
Плавный переход между словами через SVG blur-фильтр |
| Дешифрованный текст |
Эффект дешифровки — символы раскрываются из шума |
| Градиентный текст |
Анимированный градиент с yoyo, горизонт., верт., диагональю |
| Сияющий текст |
Световой блик скользит по тексту |
| Линейная тень текста |
Анимированная диагональная штриховка как тень |
| Волновой текст |
Буквы покачиваются волной в бесконечном цикле |
| Перекатывающийся текст |
Буквы «перекатываются» через 3D-вращение по оси X |
| Чередующийся текст |
Автосмена строк с stagger и spring-переходами |
| Круговой текст |
Текст по кругу с реакцией на ховер |
| Зацикленный изогнутый текст |
Marquee по SVG-кривой, управляется перетаскиванием |
| Разбиение текста |
GSAP-анимация по символам, словам или строкам при скролле |
| Раскрытие при скролле |
Слова появляются с opacity и blur при прокрутке |
| Всплывающий текст |
Буквы всплывают снизу при скролле через GSAP ScrollTrigger |
| Скорость скролла |
Бегущая строка, скорость которой зависит от прокрутки |
| Вариативная близость |
Буквы меняют параметры вариативного шрифта рядом с курсором |
| Скрытый текст |
Текст скрыт частицами, проявляется при наведении |
| Счётчик |
Анимированный числовой счётчик с пружинной анимацией |
| Печатание текста |
Эффект печатающей машинки с удалением и курсором |
Фон
Декоративные и интерактивные фоны на WebGL, Canvas и CSS.
| Компонент |
Технология |
Особенности |
| Аурора |
OGL / WebGL |
Шумовой шейдер с настраиваемыми цветовыми стопами |
| Мягкая аурора |
OGL / WebGL |
Перлин-шум, реакция на мышь |
| Шелк |
Three.js |
Волновой паттерн, вращение, шум |
| Иридесценция |
OGL / WebGL |
Переливающиеся цвета, реакция на мышь |
| Плазма |
OGL / WebGL |
Объёмная анимация, режимы forward / reverse / pingpong |
| Плазменная волна |
OGL / WebGL |
Ray-marching в 3D, двухцветный градиент |
| Грейниент |
OGL / WebGL |
Анимированный градиент с зерном, варп, ротация |
| Цветовые изгибы |
Three.js |
Искажения цветовых полос, интерактив с мышью |
| Темная вуаль |
OGL / WebGL |
Генеративный CPPN-шейдер, сканлайны, деформация |
| Столп света |
Three.js |
Ray marching, интерактивный, настройка качества |
| Световые лучи |
OGL / WebGL |
Лучи из заданной точки, анимация за мышью |
| Лучи |
Three.js |
Анимированные объёмные лучи, модифицированный MeshStandard |
| Молния |
WebGL |
Турбулентные молнии, настройка цвета через HSV |
| Плавающие линии |
Three.js |
Волновые линии с реакцией на мышь и параллакс |
| Поле точек |
Canvas 2D |
Интерактивная сетка точек, bulge-эффект |
| Призма |
OGL / WebGL |
3D-призма с вращением, свечением, шейдерным цветом |
| Пиксельный взрыв |
Three.js + postprocessing |
Пикселизация с рябью по клику, liquid distortion |
| Призматический всплеск |
OGL / WebGL |
Спектральные лучи из центра, несколько режимов анимации |
| Градиентные жалюзи |
OGL / WebGL |
Полосатый градиент с spotlight и distort |
| Плазма (волны) |
OGL / WebGL |
Цветовые волны-«жгуты» с 3D-деформацией |
| Грейниент |
OGL / WebGL |
Шумный градиент с полным контролем цвета и варпа |
| Цветовые изгибы |
Three.js |
Анимированные полосы с warp-деформацией |
| Мягкая аурора |
OGL / WebGL |
Перлин-шум, слоистая аурора |
| Oko Сауrона |
OGL / WebGL |
Анимированное «Около Саурона», следит за мышью |
Opensophy компоненты
Вторая линейка сейчас в разработке. В отличие от community-компонентов, Opensophy-компоненты будут создаваться под конкретные задачи экосистемы: элементы навигации, блоки документации, промо-секции, UI-паттерны лендинга Opensophy.
Их отличие — не в визуальных эффектах, а в функциональной интеграции с Hub: они будут знать о структуре документации, теме, навигации и других деталях платформы.
Как добавить компонент
Разместите компонент в src/features/ui-components/my-component/.
Опишите id, name, category, props и specificProps. Registry найдёт компонент автоматически.
npm run dev — компонент появится в UI библиотеке с живым превью и настройщиком.
Подробнее о добавлении компонентов — в руководстве по компонентам.