Коллекция библиотек,
репов, материалов и
инструментов для дизайнеров
и вайбкодеров
Thiings: 10,000+ free AI-generated 3D icons
Thiings — коллекция из 10,000+ AI-generated 3D-иконок. Отдельные иконки можно скачивать бесплатно для personal use, а для всей коллекции есть lifetime commercial license.
Torph Examples: dependency-free text morphing для web-интерфейсов
Torph — dependency-free компонент для анимированного morphing-перехода текста и чисел в веб-интерфейсах. Examples-страница показывает runnable-паттерны для copy buttons, live counters, chart readouts, reflowing paragraphs, streamed text, amount fields и accruing balances.
Reacticx: React Native UI-компоненты с native motion
Reacticx — бесплатная open-source библиотека React Native UI-компонентов на Expo, Reanimated, Gesture Handler и Skia. Заявлено 136 компонентов с анимациями на UI thread и акцентом на native-feeling motion.
swiftui-logo-draw: SwiftUI-компонент для анимации рисования логотипа
swiftui-logo-draw — MIT open-source компонент SwiftUI для анимации рисования контура логотипа и последующего проявления заливки. В репозитории есть компонент, workflow и Python/macOS-скрипты для превращения PNG-логотипа в чистый SwiftUI Shape.
expo-liquid-glass-native: native Android Liquid Glass для Expo
expo-liquid-glass-native — Expo-модуль для native Android Liquid Glass UI-компонентов и glassmorphism-интеракций, адаптация AndroidLiquidGlass для React Native/Expo.
Tabler Icons: большая open-source база SVG-иконок
Tabler Icons — бесплатная open-source база SVG-иконок для интерфейсов. Поддерживает кастомизацию размера, цвета и stroke, React, SolidJS, Vue, Figma и другие форматы.
ShaderGradient: moving gradients для Figma, Framer и React
ShaderGradient — инструмент для создания красивых moving gradients, доступных для Figma, Framer и как React component.
VFX-JS: WebGL-эффекты для обычных HTML-элементов
VFX-JS — JavaScript-библиотека для добавления WebGL-powered эффектов к обычным HTML-элементам: изображениям, видео и другим DOM-объектам. Устанавливается через @vfx-js/core и поддерживает shader-эффекты вроде glitch.
React Spring: spring-анимации для React-интерфейсов
React Spring — библиотека для естественных spring-анимаций в React. Поддерживает hooks API, spring physics-подход к движению, web / React Native / universal-сценарии и установку через @react-spring/web.
Interactions by Nitish Khagwal: коллекция микроинтеракций
Interactions by Nitish Khagwal — каталог UI-микроинтеракций: слайдеры, степперы, disclosure-паттерны, inline confirmation, tabs, toolbars, voice note, AI bar и другие интерактивные элементы.
PostHog: продуктовая аналитика для стартапов
PostHog — платформа продуктовой аналитики: поведение пользователей, записи сессий, тепловые карты, опросы, эксперименты и отслеживание ошибок.
Liquid Gooey: жидкие gooey-микроинтеракции для React UI
Liquid Gooey — React-библиотека gooey-эффектов: water-drop merge, вязкое слияние элементов, резиновые trails и плавные micro-interactions.
@web-kits/audio: declarative audio synthesis для веба
@web-kits/audio — библиотека декларативного синтеза звука в вебе. Поддерживает UI-звуки, sound effects и интерактивные аудио-сценарии.
SND: бесплатные UI-звуки для интерфейсов
SND — библиотека готовых UI-звуков: клики, toggles, typing, notifications, caution, celebration, alarm и другие состояния.
OriginKit: библиотека анимированных UI-компонентов с MCP
OriginKit — библиотека анимированных UI-компонентов: glowing borders, fluid cursor, particles, text effects, image galleries и background animations. Компоненты доступны для копирования; проект поддерживает подключение AI-агентов через MCP.
Kid Pak: система для AI launch-видео через Taste.md
Kid Pak описывает процесс создания AI launch-видео: генерация кода анимации, рендеринг сцен в Remotion, покадровое сравнение референсов, фиксация музыки и накопление правил в taste.md.
Instagram Reel: UI-интеракшен с сильным звуковым сопровождением
Видео демонстрирует UI-интеракшен, в котором визуальная анимация дополнена звуковым сопровождением: клики, переходы и реакция интерфейса.
Paper Shaders: zero-dependency шейдеры для React и GLSL
Paper Shaders — коллекция zero-dependency шейдеров в форматах React-компонентов и GLSL для motion и visual effects.
Website Downloader: скачать сайт целиком с assets
Website Downloader — open-source инструмент, который скачивает исходники страницы вместе с assets и конвертирует ссылки в локальные для офлайн-запуска.
ScreenStory: macOS-приложение для красивых видео из записи экрана
ScreenStory — macOS-приложение, которое превращает запись экрана в видео-ролик с автоматическими зумами и рендерингом курсора.
Интенсив по эмоциональному дизайну от BangBangEducation: все материалы
Двухдневный интенсив Сергея Мекрюкова и BangBangEducation по эмоциональному дизайну. Программа включает карту эмпатии, метафоры, три уровня Дональда Нормана, улучшение опыта, CSI/NPS и практический разбор работ.
web-haptics: бесплатная библиотека haptics для веба на iOS и Android
Библиотека web-haptics добавляет haptic feedback — микро-вибрации — в веб-интерфейсы на iOS и Android. Устанавливается через npm i web-haptics и поддерживает мобильные web apps и Telegram Web Apps.
CompressO
Бесплатное open-source приложение для сжатия видео и изображений на macOS, Windows и Linux. Построено на Tauri, React/Vite и Rust; использует локальные инструменты сжатия вроде FFmpeg, pngquant, jpegoptim и gifski.
BoardUI: React design system для agentic interfaces
BoardUI — React design system для agentic-интерфейсов: AI chat, agent log, composer, sidebar, таблицы, карточки, формы и dashboard-компоненты. Компоненты копируются в проект как source через npx boardui add.
Grainient: коллекция градиентов, animated gradients и AI backgrounds
Grainient — коллекция 1000+ градиентов, animated gradients, зернистых текстур и AI-generated backgrounds для визуального дизайна. Сайт позиционирует себя как premium-библиотеку с unlimited downloads по подписке.
Reactiive Demos: React Native-анимации на Reanimated, Skia и Gesture Handler
Reactiive Demos — коллекция демо React Native-анимаций и интеракций на Reanimated, Skia и Gesture Handler.
animate-expo: skill для качественных анимаций в React Native и Expo
animate-expo — skill из набора Emil Kowalski для построения анимаций в React Native и Expo: Reanimated, Gesture Handler, Expo Router, haptics, reduced motion и performance на реальном девайсе.
dnd kit: TypeScript toolkit для drag-and-drop интерфейсов
dnd kit — современный toolkit для drag-and-drop интерфейсов. Ядро написано на TypeScript и заявлено как framework-agnostic, с first-class integrations для React, Vue, Svelte и Solid.
React Shaders: GLSL/WebGL-шейдеры в React и TypeScript
React Shaders от Rysana — open-source TypeScript React-библиотека для создания GLSL/WebGL-шейдеров в React. Поддерживает синтаксис Shadertoy/Rysana, built-in uniforms и responsive full-canvas shader-компоненты.
Animate.css: готовые CSS-анимации для веб-интерфейсов
Animate.css — библиотека готовых cross-browser CSS-анимаций: эффекты появления, акцента, внимания и переходов для веб-проектов. Подходит для emphasis, home pages, sliders и attention-guiding hints.
Motion: библиотека веб-анимаций для React, JavaScript и Vue
Motion — production-grade библиотека для плавных UI-анимаций в React, JavaScript и Vue. Поддерживает интерфейсные анимации, микроинтеракции, жесты, layout-анимации и компактный runtime.
Refero Styles: DESIGN.md-примеры для AI-агентов
Refero Styles — каталог 2,000+ AI-readable дизайн-систем с реальных продуктовых сайтов. Для каждого примера доступны цвета, типографика, spacing, компоненты и готовый DESIGN.md для Cursor, Claude Code, Codex, v0 или Lovable.
React Native Motion: библиотека красивых анимаций для React Native и Expo
React Native Motion — библиотека анимаций для React Native и Expo. В коллекции есть Skia-шдеры, morph-текст, ChatGPT attachment menu, glass tab bar, radial menu и stack toast.
Arlan: text warp animation и код для kinetic typography
Пост Arlan содержит демо text warp animation и ссылку на vault с исходным кодом.
Sound skill в mishanaer/deslop: процедурные UI-звуки из шума
Sound — скилл для агентов, который генерирует UI-звуки из шума через Web Audio API без аудиофайлов. Включает пресеты для tap, click, hover, select и toggle; генератор весит около 3 КБ.
Amicro: open-source React micro-interactions и transitions
Amicro — open-source библиотека micro-interactions и transition-компонентов для React: loaders, card hovers, button interactions и плавные transitions. Компоненты подключаются через CLI.
OpenScreen: open-source альтернатива Screen Studio
OpenScreen — бесплатный open-source инструмент для записи экрана, product demos, walkthrough-видео и туториалов. Поддерживает webcam overlay, зумы, cursor/click effects, аннотации, авто-субтитры и экспорт в MP4/GIF.
Spline: open-source дизайн-система
Open-source дизайн-система от Spline с описанием структуры, визуального языка и компонентов.
Библиотеки и пресеты easing для UI-анимации
Подборка easing-кривых и библиотек для интерфейсной анимации с экспортом и примерами для CSS, React и JavaScript. Включает motion tokens и разные варианты timing.
Paper: connected design canvas для команд, AI-агентов и кода
Paper — connected design canvas для команд, AI-агентов, кода и данных в одном пространстве. Сервис объединяет совместную работу, design-to-code workflow и подключение внешних инструментов.
Anthropic frontend-design skill: эстетические направления для AI-frontend
Anthropic frontend-design — официальный skill для создания интерфейсов с предварительным выбором визуального направления. Поддерживает HTML/CSS/JS, React и Vue; среди направлений — brutalist, editorial, retro-futuristic, luxury и maximalist.
Pacdora: конструктор упаковки, разверток и 3D-демонстраций
Pacdora — конструктор упаковки, разверток и 3D-демонстраций. Сервис поддерживает добавление графики, просмотр упаковки в 3D, открытие/закрытие, видеодемонстрацию и экспорт результата.
Icônes: большая база открытых SVG-иконок
Icônes — база icon packs с копированием SVG в буфер обмена. Наборы распространяются по открытой лицензии с ограничением на перепродажу.
Rauno: статья про animation и interaction design на примерах Apple
Статья Rauno разбирает анимации из экосистемы Apple и принципы interaction design, объясняя, почему эти решения работают.
Morphicons: SVG icon morphing library для React, Vue и Svelte
Morphicons — библиотека для morphing-анимации SVG-иконок: плавно превращает одну иконку в другую через spring physics. Поддерживает Lucide, Tabler и Heroicons, работает в React, Vue, Svelte, React Native, Astro и vanilla JS; заявлено zero dependencies и около 6 KB gzip.
Orbkit: WebGL shader orbs для React и AI/voice agent states
Orbkit — библиотека React/TypeScript-компонентов с WebGL shader-orbs для визуальных состояний AI- и voice-агентов. Компоненты ставятся как локальный код через shadcn registry и могут донастраиваться под интерфейс.
Appllama Skills: навыки для AI-агентов, которые проектируют мобильные экраны
Appllama Skills — MIT open-source набор agent skills для исследования паттернов top-grossing мобильных приложений и построения native-quality Expo/React Native-экранов. Включает skill для Appllama MCP и app-design skill с правилами Apple HIG, навигации, motion и проверки в симуляторе.
expo-liquid-glass-view: native Liquid Glass views для Expo на iOS
expo-liquid-glass-view — Expo-модуль для native Liquid Glass views в React Native: Apple native material на iOS 26+ и custom Metal renderer ниже.
HeroUI: React UI-компоненты на React Aria и Tailwind CSS
HeroUI v3 — библиотека красивых и доступных React UI-компонентов, раньше известная как NextUI. Построена на React Aria и Tailwind CSS v4; позиционируется как альтернатива MUI, Chakra UI и shadcn/ui для production-ready приложений.
Superpowers: framework навыков для AI-агентов и разработки
Superpowers — репозиторий с agentic skills framework и методологией разработки для AI-агентов. Описывает структуру skills/plugins и repeatable software development-подход.
UVCanvas: React-компоненты с красивыми shader canvas-фонами
UVCanvas — open-source React.js component library для красиво зашейдженных canvas-фонов. Содержит готовые визуальные canvas-компоненты и градиентные/шейдерные background-сцены.
fireworks-js: простая JavaScript-библиотека фейерверков
fireworks-js — простая JavaScript-библиотека для эффекта фейерверков на странице. Демо содержит интерактивные настройки частиц, цвета, гравитации, интенсивности, следа и поведения взрыва.
shadcn/ui: компоненты как основа дизайн-системы
shadcn/ui — набор composable accessible компонентов с thoughtful defaults, которые можно копировать в проект, кастомизировать и превращать в собственную дизайн-систему. Базовый стек для вайбкодинга интерфейсов, админок, SaaS, прототипов и design engineering.
Platega: платёжный сервис для монетизации стартапа
Platega — платёжный сервис для запуска монетизации стартапа. Поддерживает оплату картами, через СБП и криптовалютой на сайте, в приложении или по ссылке.
Metal FX: WebGL liquid-metal эффект для React UI
metal-fx — React-библиотека с анимированным WebGL liquid metal эффектом для кнопок, chips, иконок и UI-компонентов. Доступны пресеты chromatic, silver и gold.
Pocket: физический AI-девайс для заметок в реальном мире
Pocket — компактный AI-девайс, который превращает речь и окружающий звук в заметки, action items и данные для поиска. Устройство объединяет custom hardware, AI и software.
WebHaptics: haptic feedback для mobile web
WebHaptics — библиотека haptic feedback для мобильного веба. Поддерживает React, Vue и Svelte и добавляет тактильную обратную связь в web-интерфейсы.
Open-source и бесплатные инструменты для кодеров от Csaba Kissi
Подборка бесплатных и open-source ресурсов для кодеров и дизайн-инженеров: SVG-иконки, CSS-кнопки, галерея компонентов, motion effects и UI-библиотека.
Precis0x: часовой разбор self-improving AI agents
Видео Precis0x разбирает архитектуру self-improving AI-агентов: soul.md, harness, RAG-память, tool-calling loop, guardrails, LLMOps/tracing и сжатие опыта в устойчивые факты.
Skills for Design Engineers: AI-навыки для UI, motion и vibe coding
Набор AI-скиллов от Emil Kowalski для дизайнеров и инженеров: анимации, easing, микроинтеракции, popover/dropdown behavior, Apple-style motion и ревью UI-анимаций.
nanoGPT: GPT-2 с нуля на чистом Python
nanoGPT — минималистичный репозиторий Андрея Карпати для обучения и файнтюнинга GPT-подобных моделей. Код написан на Python без сложной обвязки.
Omma: AI-builder для интерактивных сайтов, 3D и приложений
Omma от Spline — AI-builder, который по текстовому описанию собирает интерактивные сайты, лендинги, web/app-прототипы, 3D-сцены, игры и демо.
Библиотеки с анимированными иконками
Подборка библиотек с анимированными иконками в форматах SVG и Lottie для интерфейсов и веб-проектов.
Origin UI: состояния компонентов для дизайн-систем
Origin UI — библиотека подробных состояний базовых компонентов: кнопок, инпутов, чекбоксов, radio и switch; также доступен GitHub-репозиторий.
Уроки от Helper по визуалу и базовому дизайну
Подборка бесплатных уроков Helper по визуалу и базовым дизайн-навыкам: Figma, композиция, типографика, фотографии, компоненты, выравнивание, тексты, wireframes, лендинги, UI-kit и иконки.
Recordly: бесплатный инструмент для красивых screencast-видео с smooth zoom
Recordly — бесплатный open-source инструмент для записи скринкастов с автозумом, сглаженным курсором, фонами и экспортом в MP4/GIF. Альтернатива Screen Studio.