Clay UI - VibeCoderz
Clay UI: система дизайна в стиле Claymorphism. Создавайте реалистичные 3D-элементы интерфейса для ваших проектов.
Clay UI: система дизайна в стиле Claymorphism. Создавайте реалистичные 3D-элементы интерфейса для ваших проектов.
Стиль Risograph: имитация аналоговой печати для уникального цифрового дизайна. Используйте для создания ретро-эффектов и текстур.
Стиль 'Liquid Metal' для 3D-графики и дизайна. Создает эффект жидкого металла, хрома и техно-сюрреализма. Идеален для футуристических визуализаций.
Tectonic style: минималистичный UI-стиль для цифровой геологии. Минимализм Obsidian для вашего проекта.
Gorpcore style: утилитарное снаряжение в альпийском стиле. Высокопроизводительная одежда из технологичных материалов для активного образа жизни.
HTML <img> элемент с незаполненным src. Отображает изображение, требует URL и alt-текста. Базовый компонент UI.
HTML/JSX сниппет для <img>. Базовый шаблон для размещения изображений, установки alt-текста и адаптивного поведения.
Компонент анимации текста: инверсия цвета при скролле. Текст меняет цвет, сливаясь с фоном, для адаптивной видимости.
Текстовый компонент с SVG-фильтром для создания эффекта волн, как под водой. Анимирует движение с помощью GSAP.
Текст с эффектом дыхания: ключевые слова плавно пульсируют с помощью text-shadow. Анимация текста для веб-сайтов и приложений.
Текст с плавной сменой насыщенности от Light до Extra Bold при скролле. Анимация текста, scroll animation.
Компонент заголовка с эффектом появления текста посимвольно. Анимация затухания и фокусировки для UI.
Горизонтальная галерея с параллакс-эффектом. Фиксирует вертикальную прокрутку, превращая её в горизонтальное движение для демонстрации изображений. GSAP ScrollTrigger.
Анимированный текстовый компонент с эффектом перелистывания Rolodex/слот-машины. Идеален для inline-текста, сохраняет 3D-перспективу.
GhostScrollText: компонент текста с эффектом призрачного следа при быстрой прокрутке. Слои отстают от основного текста и исчезают при остановке.
Кинематографичная анимация заголовка: слова плавно выезжают из-под маски. Текстовая анимация для UI.
Анимированная SVG линия для визуализации прогресса скролла. Показывает процент прокрутки страницы с помощью Framer Motion. Идеально для интерактивных сайтов.
Заголовок с анимированным подчерком в стиле "hand-drawn" при скролле. Эффект каскадного текста.
Плавное расширение изображения на весь экран при скролле. Анимация, интерактивный UI.
CSS-компонент: липкий заголовок, который сжимается при прокрутке и переходит в эффект стекломорфизма. Адаптивный UI.
Sticky Content Switch: анимированный UI-компонент для лендингов. Заголовок слева остается на месте, пока изображения справа сменяются при скролле.
Эффект стопки карт для портфолио: карточки фиксируются сверху при скролле, создавая эффект колоды. Анимация GSAP.
GhostScrollText: UI-компонент текста с эффектом призрачного слоя, искажающегося за основным текстом при прокрутке. Создает эффект призрака.
Анимация печати текста: посимвольное отображение заголовка с задержкой 50мс. Минималистичный дизайн, функция повтора.
Сетка изображений с 3D-эффектом наклона и независимой скоростью прокрутки. Идеально для лендингов.
Анимированная маска Spotlight: круглый прожектор раскрывает контент под темным слоем при скролле. Идеально для лендингов.
Анимация 'Exploded View' для деконструкции и сборки UI. Идеально для демонстрации работы продукта или разбора функций на лендинге.
Готовый UI-компонент Animated List с анимацией скролла и управлением с клавиатуры. Легко внедряется в любой AI-проект на React.
WebGL-анимация северного сияния для лендинга. Плавный градиент, имитирующий Aurora Borealis, с использованием OGL.
Компонент типографики с анимацией текста: символы реагируют на близость курсора, меняя толщину и ширину с помощью вариативных шрифтов.
Анимированный текст с настраиваемым градиентным эффектом блеска. Создает эффект переливающегося текста для заголовков и акцентов.
Компонент Fuzzy Text: анимированный текст с эффектом глитча/размытия на Canvas. Поддерживает интерактивность и режимы анимации.
3D ASCII текст на Three.js. Анимированный текст в виде сетки символов с волновыми эффектами и реакцией на мышь.
Компонент Gradual Blur: плавное размытие краев контейнера. Идеально для прокрутки, создания глубины, смешивания контента. Настраиваемая сила, направление, экспоненциальное затухание.
Анимация сетки линий, вращающихся к курсору, создающих эффект магнитного поля. UI-компонент для интерактивных визуализаций.
Анимированный эффект электрической рамки на Canvas. Динамичное свечение с настройкой цвета, скорости и хаоса. Идеально для выделения элементов.
WebGL-эффект лазерного потока на Three.js с интерактивными следами от мыши и объемным туманом. Анимация фона.
Эффект дымчатого следа курсора на Three.js. Анимация для интерактивных веб-фонов и элементов UI.
Интерактивный эффект ленты (ribbon) с плавным движением, следуя за курсором. Минималистичный дизайн, монохромная эстетика, анимация при наведении.
WebGL-галерея изображений с круговой компоновкой. Плавная прокрутка, эффекты изгиба изображений. Идеально для портфолио и сторителлинга.
React UI компонент: минималистичная галерея с эффектом "image trail". Анимация движения, масштабирования, вращения. Идеально для лендингов.
Bento UI-компонент: минималистичная сетка с интерактивными эффектами (glow, particles, tilt) для современных дашбордов и лендингов.
Интерактивное меню-пузырь с плавными анимациями и эффектами при наведении. UI-компонент для навигации.
Карточная навигация UI: выпадающее меню с карточками и плавными анимациями. Идеально для минималистичных сайтов.
Интерактивный UI компонент Card Stack с drag-to-back физикой, автовоспроизведением и кастомизацией анимаций. Оптимизирован для мобильных.
Минималистичный UI-компонент Pill Nav: навигация в форме таблетки с анимацией GSAP, адаптивным меню и эффектом 'восходящего круга' на ховере.
UI компонент: Tilted Card. Анимированная карточка с 3D параллаксом и эффектами при наведении. Используется для интерактивного представления контента.
UI компонент Masonry Gallery: галерея с адаптивной раскладкой и плавными анимациями. Идеально для сайтов с визуальным контентом, поддерживает GSAP и lazy-loading.