Kodza

Компоненты интерфейса, которые может получить ваш AI. Чистые HTML, CSS и JavaScript: без фреймворков, сборки и зависимостей.

kodza.dev · Каталог · Документация · Запросить компонент

Просто попросите

Kodza — это ещё и MCP-сервер, доступный по адресу https://kodza.dev/api/mcp (Streamable HTTP). Бесплатный, без регистрации и API key. Подключите его к своему AI:

claude mcp add -t http kodza https://kodza.dev/api/mcp

Затем попросите своими словами: «Добавь кнопку Fill из Kodza в мой hero-блок». Сервер передаст точные файлы из этого репозитория и подскажет, куда их добавить, а не станет подбирать похожий вариант.

В редакторе

Codex

codex mcp add kodza --url https://kodza.dev/api/mcp

VS Code (GitHub Copilot)

code --add-mcp '{"name":"kodza","type":"http","url":"https://kodza.dev/api/mcp"}'

Cursor (~/.cursor/mcp.json)

{ "mcpServers": { "kodza": { "url": "https://kodza.dev/api/mcp" } } }

Предпочитаете запускать сервер на своём компьютере? Команда npx -y kodza-mcp запускает тот же сервер локально (kodza-mcp). Остальные варианты описаны в документации.

Что он умеет

Инструмент	Описание
search_components	Находит компоненты по их назначению или внешнему виду («кнопка с заливкой при наведении», «липкая шапка», «выбор даты») либо выводит список компонентов в выбранной категории.
get_component	Возвращает один компонент: его точные HTML, CSS и JS-файлы (или команды для их скачивания), настройки (переменные --kz-…, классы-модификаторы, атрибуты data-), описание ключевых параметров и значения для тёмного режима, а также инструкции по подключению к обычной странице, WordPress, Shopify, React или артефакту Claude.

Сервер работает только на чтение: передаёт код и не вносит изменений в ваш проект. Он учитывает, какие компоненты и каким ассистентом запрашиваются, но не сохраняет введённый вами текст.

Шесть примеров

Выбраны из 154 компонентов. Демонстрация каждого работает на kodza.dev, а по названию можно перейти к файлам.

Trapdoor Menu · Hero Showcase · Topographic Lines · Fill Button · Date Picker · Hover List Preview

Или возьмите файлы

В каждой папке в components/ находится один компонент: HTML, CSS и, если нужно, JS. Подключите CSS, вставьте HTML и загрузите JS. Компонент будет работать на обычной HTML-странице, в WordPress, Shopify или React — это просто код.

Код написан так, будто уже завтра отправится в продакшен. Скорее всего, так и будет.

• CSS затрагивает только классы kodza-. Сгенерированная защита темы не позволяет CSS вашего сайта влиять на компонент.

• Настройки задаются через CSS-переменные (--kz-…), варианты — через классы-модификаторы или атрибуты data-.

• На одной странице можно разместить сколько угодно экземпляров компонента; для всех них достаточно одной копии JS.

• Каждый компонент поддерживает клавиатурную навигацию, видимый индикатор фокуса и prefers-reduced-motion.

• События kodza:init и kodza:destroy предназначены для контента, загружаемого позже: тем с AJAX, Swup и React.

Компоненты

Их уже 154, и список продолжает расти. По названию можно перейти в папку компонента, а его демонстрация доступна на kodza.dev.

Кнопки

Компонент	Описание
3D Press Button	Кнопка с настоящим объёмом: лицевая часть утапливается в основание, при нажатии доходит до конца даже от лёгкого касания, а затем отскакивает с небольшим упругим движением. Подойдёт для оформления клавиши, брутального блока или переключателя, который остаётся нажатым.	Демонстрация
Add to Cart	Кнопка добавления в корзину подтверждает действие галочкой, пока копия изображения товара перемещается к значку корзины, а счётчик увеличивается на единицу. Если запрос завершается ошибкой, изменения откатываются.	Демонстрация
Arrow Button	При наведении стрелка прорисовывается, сдвигает подпись в сторону, а при уходе курсора продолжает движение сквозь кнопку.	Демонстрация
Call Button	Круглая кнопка с телефонной иконкой раскрывается в полноценную кнопку «Book a call» с лёгкой анимацией звонка. На сенсорных экранах остаётся раскрытой. Только CSS.	Демонстрация
Copy to Clipboard	Команда или фраза для AI с кнопкой копирования: иконка превращается в прорисовывающуюся галочку, а подпись сменяется на «Copied».	Демонстрация
Fill Button	Заливка кнопки начинается точно в точке, где курсор касается её, и исчезает в направлении, откуда он уходит. Подпись прокручивается, а стрелка движется по кругу.	Демонстрация
Hold to Confirm	Для действий, которые нельзя отменить: удерживайте кнопку, пока чернильная заливка не заполнит её. Если отпустить раньше времени, заливка исчезнет; если удерживать до конца, появится галочка. Работает с мышью, касанием, Space и Enter.	Демонстрация
Ink Like	Кнопка лайка: сердце заполняется чернилами, по поверхности проходит небольшая волна, а при отмене лайка заливка исчезает. Счётчик прокручивает цифры по одной, учитывая переносы (999 → 1,000), и откатывает значение, если запрос завершается ошибкой.	Демонстрация
Loading Button	Кнопка показывает ход выполнения: подпись меняется с Deploy на Deploying, появляется кольцо, а затем оно замыкается в галочку с надписью Deployed. Ширина кнопки остаётся неизменной.	Демонстрация
Magnetic Button	Кнопка слегка наклоняется к приближающемуся указателю, а её подпись смещается чуть дальше; затем кнопка плавно возвращается на место. Область нажатия движется вместе с ней. На сенсорных экранах эффект не мешает.	Демонстрация
Morph Button	При наведении кнопка в форме капсулы сжимается до круга, а её подпись сменяется стрелкой. Область нажатия остаётся на месте. Только CSS.	Демонстрация
Roll Button	При наведении подпись кнопки прокручивается вверх по одной букве; при уходе курсора анимация продолжается в том же направлении. Обычный CSS и несколько строк JS.	Демонстрация
Scroll Down	Подсказка внизу hero-блока: стрелка в кольце или мышь с колесом прокрутки, которое время от времени движется. Нажатие плавно прокручивает страницу к следующему разделу, при первой прокрутке подсказка исчезает, а при возвращении наверх появляется снова.	Демонстрация
Share Button	При нажатии на Share варианты публикации выезжают из-за кнопки; последний из них раздвигает её, стрелка взлетает, а крестик прорисовывается. Кнопка Copy link сменяется галочкой; X и LinkedIn открываются в небольшом окне.	Демонстрация
Split Button	Основное действие расположено слева, остальные варианты скрыты за стрелкой. Цветной акцент перемещается между половинами; при выборе другого действия подпись прокручивается, а ширина кнопки плавно меняется.	Демонстрация

Ссылки

Компонент	Описание
Ссылка со стрелкой	Ссылка, которая указывает направление: в обычном состоянии отображается шеврон, а при наведении его линия выдвигается, и стрелка превращается из › в →. Вариант для перехода назад указывает в противоположную сторону. Только CSS.	Демо
Ссылка для скачивания	Рядом с текстом ссылки отображаются тип и размер файла — они считываются непосредственно из файла. При наведении стрелка опускается в лоток, а при нажатии вылетает из него и возвращается сверху.	Демо
Внешняя ссылка	Ссылка показывает, что ведёт за пределы сайта: линия проходит под текстом к символу ↗, который затем вылетает к углу, вытягивая за собой линию. Только CSS.	Демо
Ссылка на сноску	Сноски остаются на одной строке с текстом. На широком экране примечание располагается на полях на уровне строки и появляется одновременно с номером; на узком — раскрывается под строкой. Подхватывает сноски WordPress без изменений.	Демо
Якорь заголовка	Символ # рядом с каждым заголовком. При наведении указателя на заголовок он выдвигается с поля, а на сенсорном экране появляется после последнего слова. Нажмите на символ или заголовок, чтобы добавить раздел в адресную строку и скопировать ссылку.	Демо
Ссылка с подсветкой	Штрих маркера проходит за текстом ссылки или сплошной блок меняет цвет текста на белый точно под своей границей.	Демо
Предпросмотр ссылки	Наведите указатель на ссылку — над ней раскроется карточка страницы, на которую она ведёт. На каждый абзац приходится одна карточка: она плавно перемещается от ссылки к ссылке, изображение растворяется, а текст прокручивается.	Демо
Ссылка на цитату	Выделите слова в статье — появится кнопка-ссылка на них: адрес страницы с текстовым фрагментом, который открывает нужное место и подсвечивает цитату. После нажатия текст кнопки меняется на «Ссылка скопирована» и появляется галочка.	Демо
Ссылка с перемешиванием текста	При наведении текст ссылки перемешивается, а затем восстанавливается слева направо: символы расшифровываются, буквы перемешиваются или срабатывает эффект табло с перекидными символами.	Демо
Ссылка с подчёркиванием	Подчёркивание появляется слева и исчезает справа или движется в обратном направлении. Оно следует за текстом при переносе строк, словно линия, нарисованная ручкой.	Демо

Формы

Компонент	Описание
Флажок	Настоящие флажки с новым оформлением: заливка появляется из центра, а галочка рисуется сама. В флажке «Выбрать всё» вместо галочки отображается тире, если выбрана только часть пунктов. Поддерживаются и карточки.	Демо
Выбор цвета	Полноценное поле выбора цвета с удобной панелью: квадрат насыщенности, ползунок оттенка, поле для ввода HEX-кода, предустановленные цвета, пипетка и копирование. При выборе предустановленного цвета маркеры плавно перемещаются к нему.	Демо
Выбор даты	Поле ввода даты с календарём: месяцы плавно перемещаются в нужном направлении, название месяца прокручивается, а отметка перемещается на выбранный день. Полная поддержка клавиатуры.	Демо
Загрузка файлов	Область для перетаскивания поверх настоящего поля выбора файла: при наведении файлов граница движется, для каждого файла появляется строка с миниатюрой и анимированным индикатором загрузки. Слишком большие файлы отмечаются отдельно.	Демо
Множественный выбор	Настоящий список с множественным выбором, оформленный в виде набора тегов: вводите текст, чтобы отфильтровать варианты, и выбирайте их, чтобы добавить тег. Удалённые теги сжимаются и исчезают, а остальные плавно занимают освободившееся место.	Демо
Поле OTP	Поле для одноразового кода: одно настоящее поле ввода отображается в виде отдельных ячеек. Цифры плавно встают на место, вставка кода и автозаполнение из SMS работают без дополнительной настройки, а после ввода всех цифр ячейки заполняются цветом.	Демо
Пароль	Поле пароля с зачёркивающим себя значком глаза, индикатором надёжности, который заполняется по мере усиления пароля, анимированной оценкой и правилами, которые отмечаются по мере выполнения.	Демо
Переключатель вариантов	Настоящие переключатели вариантов с одной общей точкой для всей группы: при выборе другого пункта точка перемещается к нему и растягивается по пути, словно капля чернил.	Демо
Ползунок диапазона	Настоящие поля выбора диапазона на стилизованной дорожке: рядом с маркером появляется облачко со значением, деления темнеют по мере заполнения дорожки, а два маркера отталкивают друг друга вместо того, чтобы пересекаться.	Демо
Поиск с автодополнением	Поле поиска на основе настоящего списка datalist: сгруппированные подсказки раскрываются под полем, а введённые буквы в них подчёркиваются. Нажмите /, чтобы перейти к поиску; для управления используйте стрелки и Enter.	Демо
Список выбора	Настоящий список выбора с обновлённым оформлением: список раскрывается из поля, подсветка перемещается между вариантами, а значение прокручивается до выбранного. Также доступен компактный вариант для панелей инструментов.	Демо
Оценка звёздами	Настоящие переключатели вариантов, оформленные в виде звёзд: при наведении указателя они загораются одна за другой, подпись меняется от «Так себе» до «Отлично», а статическая оценка заполняется при появлении на экране.	Демо
Переключатель	Настоящий флажок с оформлением в виде переключателя: заливка заполняет дорожку за ползунком, ползунок растягивается при нажатии и упруго возвращается на место. Поддерживаются подписи и панели инструментов.	Демо
Текстовое поле	Текстовое поле, в котором подпись складывается вверх по мере ввода. Кнопка очищает поле, при корректном значении появляется галочка, а подсказка сменяется сообщением об ошибке.	Демо
Многострочное поле	Многострочное поле, в котором подпись складывается вверх, высота плавно подстраивается под текст, а рамка заполняется по мере приближения к лимиту. В последней пятой части лимита отображается число оставшихся символов.	Демо

Навигация

Компонент	Описание
Хлебные крошки	Если цепочка не помещается в одну строку, её середина сворачивается за кнопкой «…». Нажимайте на неё, чтобы постепенно раскрывать элементы.	Демо
Кнопка-бургер	Кнопка меню: линии сходятся, а затем пересекаются; надпись «Меню» превращается в «Закрыть» при фиксированной ширине. Компонент учитывает состояние aria-expanded и вызывает событие kodza:burger, поэтому управляет уже существующим меню.	Демо
Палитра команд	Палитра команд, открываемая сочетанием ⌘K, отображается в настоящем диалоговом окне. Результаты фильтруются по мере ввода, совпавшие буквы подчёркиваются, а подсветка плавно перемещается между ними.	Демо
Контекстное меню	Меню по правому щелчку раскрывается точно в месте нажатия, остаётся в пределах экрана и поддерживает управление с клавиатуры сочетанием Shift + F10.	Демо
Выпадающее меню	Меню раскрывается из кнопки, а подсветка плавно перемещается между пунктами. Подходит для действий и выбора; поддерживает клавиши со стрелками и переход к пунктам по первой букве.	Демо
Раскрывающееся меню-капсула	Кнопка «Меню» превращается в окружающее её меню: карточка расширяется, затем раскрывается, а кнопка «Закрыть» остаётся на месте. Ссылки появляются по мере того, как край карточки открывает их. В нижней части экрана меню раскрывается вверх.	Демо
Полноэкранное меню	Полноэкранное меню раскрывается сверху, словно занавес: его край изгибается при движении, страница отступает под ним, а ссылки появляются одна за другой вслед за краем. При закрытии анимация проигрывается в обратном направлении.	Демо
Навигация при наведении	Ссылки сгруппированы в капсулу. Подсветка скользит вслед за указателем и возвращается к текущей странице. В версии ink текст становится белым точно по краям подсветки.	Демо
Многоуровневое меню	Боковое меню-бургер для навигации с несколькими уровнями: каждый вложенный список выезжает поверх предыдущего, верхняя строка меняется на название текущего уровня и позволяет вернуться назад. Компонент считывает список, сформированный функцией wp_nav_menu().	Демо
Пагинация	Семь элементов остаются на месте: контрастная плашка перемещается к выбранной странице, а изменившиеся номера прокручиваются на новые позиции. В комплекте есть компактный вариант.	Демо
Шапка при прокрутке	Плавающая полупрозрачная капсула не закрывает верх страницы, становится матовой при прокрутке, сдвигается, пока вы читаете, и превращается в тёмное стекло над тёмными разделами.	Демо
Меню-жалюзи	Меню раскрывается под шапкой, словно жалюзи: ссылки появляются одна за другой по мере движения края, а надпись «Меню» сменяется на «Закрыть». Панель реализована как встроенный popover, поэтому поддержка Escape, закрытия по щелчку снаружи и возврата фокуса доступна сразу.	Демо
Меню с боковым раскрытием	Меню находится под страницей: страница сдвигается влево и уменьшается, превращаясь в карточку, а под ней открывается меню. Ссылки появляются одна за другой вслед за краем страницы. Щелчок по карточке закрывает меню.	Демо
Боковое меню	Боковая панель выезжает поверх страницы, после чего крупные ссылки появляются одна за другой. Это настоящее диалоговое окно: фокус остаётся внутри, а клавиша Escape закрывает панель. Без GSAP.	Демо
Горизонтальное меню с последовательным раскрытием	Кнопка последовательно открывает ссылки, начиная с ближайшей, а при закрытии возвращает их в обратном порядке. Надпись на кнопке меняется на «Закрыть». Без GSAP.	Демо
Пошаговая форма	Процесс из четырёх шагов: линия заполняется, на каждом завершённом шаге рисуется галочка, а содержимое появляется со стороны следующего шага.	Демо
Содержание страницы	Карточка содержания формируется на основе заголовков страницы. Маркер следует за читаемым разделом, кольцо заполняется, а оставшееся время отсчитывается. На телефонах отображается полоска.	Демо
Вкладки	Вкладки с плашкой или линией, которая перемещается к выбранному пункту. Панель появляется со своей стороны. Поддерживаются все стандартные способы управления с клавиатуры.	Демо
Меню-люк	Нажмите «Меню», и страница откинется вниз на петле, словно люк, открывая меню под ней. Ссылки появляются одна за другой вслед за краем страницы, а изображение движется за указателем. При закрытии анимация проигрывается в обратном порядке. Без GSAP.	Демо

Всплывающие элементы

Компонент	Описание
Согласие на использование cookie	Карточка с прозрачными условиями: кнопки «Отклонить» и «Принять» имеют одинаковый вес, кнопка «Настроить» раскрывает категории, выбор сохраняется, а ссылка позволяет снова открыть карточку.	Демо
Диалоговое окно	Настоящее диалоговое окно вырастает из открывшей его кнопки, а при закрытии возвращается в неё. В варианте с подтверждением перед удалением данных требуется ввести имя.	Демо
Всплывающая панель	Панель раскрывается от элемента-триггера, а стрелка указывает на него. Если места недостаточно, панель меняет положение. Её можно открыть щелчком или при наведении; во втором случае она работает как карточка и остаётся на месте.	Демо
Интерактивный тур	Пошаговое знакомство с интерфейсом: страница затемняется, вокруг каждого элемента появляется подсветка, которая перемещается к следующему и меняет форму. За ней следует карточка с пояснением. Туром можно управлять с клавиатуры.	Демо
Выдвижная панель	Панель выезжает справа, а на телефонах поднимается снизу. Её можно перетаскивать; предусмотрены положения на половине и на всю высоту, а быстрый жест закрывает панель.	Демо
Всплывающее уведомление	Уведомления складываются стопкой и расходятся при наведении. Время до закрытия отображается тонкой линией, уведомление можно убрать свайпом, а уведомление о загрузке сменяется сообщением об успехе.	Демо
Подсказка	Для всей группы используется одна подсказка: при первом наведении она появляется с задержкой, а затем перемещается между кнопками, подстраивая размер под текст. Внутри также отображается сочетание клавиш.	Демо

Обратная связь и загрузка

Компонент	Описание
Уведомление	Сообщение на странице: примечание, подтверждение, предупреждение или ошибка. Тип сообщения обозначается значком, а не цветом. Значок рисуется самостоятельно; закрытое уведомление сворачивается, а сообщение об ошибке раскрывает журнал.	Демо
Пустое состояние	Состояние списка, в котором нет элементов: CSS-иллюстрация реагирует на приближение курсора, рядом появляется короткое пояснение и следующий шаг. Предусмотрен отдельный вариант для поиска без результатов.	Демо
Индикатор выполнения	Полоса или кольцо, управляемые значением data-value: проценты прокручиваются, как показания одометра, сегмент движется, пока значение неизвестно, а при достижении 100 % появляется галочка.	Демо
Скелетон	Заготовки элементов повторяют форму контента и покрыты общим бликом. При загрузке мягкая граница проходит сверху вниз, превращая каждую заготовку в строку содержимого; для изображений, загружающихся с задержкой, эффект сохраняется.	Демо
Индикатор загрузки	Индикатор загрузки подстраивается под размер текста: это может быть пульсирующее кольцо, двенадцать полос, три точки или ячейка Брайля в стиле терминала. Добавьте .is-done — и вместо индикатора появится галочка, а текст плавно сменится.	Демо
Верхняя полоса загрузки	Тонкая полоса вверху экрана, которая отображается во время загрузки страницы: она постепенно продвигается короткими шагами, доходит до конца и исчезает вправо. На ссылках сайта запускается автоматически.	Демо

Отображение данных

Компонент	Описание
Аккордеон	Вопросы раскрываются вместе с ответами на основе встроенного элемента Details: панель открывается на фактическую высоту, ответ плавно появляется, а плюс превращается в минус. При необходимости можно настроить так, чтобы одновременно был открыт только один пункт.	Демо
Аватар	Инициалы или изображение в одном из четырёх размеров; статус обозначается формой — сплошной заливкой, кольцом, полосой или приглушённым оттенком. Группа аватаров раздвигается при наведении, а указывая на аватар, можно увидеть его имя.	Демо
Метка	Компактные метки: мягкие, сплошные, активные, монохромные и со счётчиком, который прокручивает значение. При удалении метка сжимается, а соседние плавно занимают освободившееся место, в том числе при переносе на другие строки.	Демо
Блок кода	Удобный для чтения и копирования код: с именем файла, номерами строк, подсветкой отдельных строк и монохромной подсветкой синтаксиса с разной насыщенностью. После копирования надпись меняется на «Скопировано»; в терминальном блоке копируются только команды.	Демо
Обратный отсчёт	Обратный отсчёт до заданной даты в реальном времени: каждая изменившаяся цифра выпадает из окна, а на её место опускается следующая. Когда отсчёт достигает нуля, цифры уступают место вашему сообщению. Доступны крупный и встроенный варианты.	Демо
Счётчик	Значение прокручивается, словно показания одометра, когда попадает в область видимости: цифры справа вращаются активнее и останавливаются последними, а ноль делает полный оборот. Значение остаётся доступным для чтения и без скрипта.	Демо
Переходы при фильтрации	Сетка с фильтрами: цветная плашка плавно перемещается к выбранному фильтру, скрываемые карточки отступают, остальные занимают новые места, а подходящие карточки появляются по очереди.	Демо
Клавиши	Клавиши с лёгким эффектом объёма: по отдельности, в сочетании или в списке сочетаний клавиш. При нажатии на реальную клавишу её изображение утапливается; если нажать всё сочетание, подсвечивается соответствующая строка.	Демо
Разделитель	Линии прорисовываются от центра, когда появляются в области видимости. Можно выбрать обычную линию, линию с меткой или заголовком раздела, линию с точкой на CSS, а также вертикальные разделители между элементами.	Демо
Показать больше	Длинное содержимое свёрнуто до тех пор, пока пользователь не попросит показать его целиком: текст обрезается с плавным затуханием, а список сообщает, сколько элементов осталось. Содержимое раскрывается на фактическую высоту, а надпись на кнопке плавно меняется.	Демо
Карточка статистики	Ключевой показатель, его изменение и фоновый график: значение прокручивается, график прорисовывается, а за указателем следует направляющая со значением за выбранный день. Направление тренда обозначается стрелками.	Демо
Таблица	Таблица данных, в которой строки сортируются по нажатию на заголовок столбца. Они плавно занимают новые места, отсортированный столбец получает лёгкую подсветку, заголовок остаётся закреплённым сверху, а края плавно затеняются при прокрутке.	Демо
Хронология	Этапы с датами расположены вдоль линии, которая заполняется при прокрутке. Точки закрашиваются, когда линия доходит до них, каждый этап при первом появлении плавно занимает своё место, а последний достигнутый этап остаётся отмеченным.	Демо

Карточки

Компонент	Описание
Карточка с прорисовкой границы	При наведении граница карточки прорисовывается одной линией, начиная точно с точки, в которой курсор коснулся карточки. Линия может идти в одну или обе стороны либо охватывать только углы.	Демо
Карточка	Редакционная карточка целиком открывается по одной ссылке: изображение слегка приближается, граница становится чётче, а стрелка плавно появляется.	Демо
Раскрывающаяся карточка	Ряд карточек, в котором одна всегда раскрыта: при выборе другой она расширяется, а остальные отступают. На небольших экранах карточки располагаются вертикальным списком.	Демо
Тарифные планы	Три плана в одном блоке; рекомендуемый план выделен заливкой и приподнят. При переключении на годовую оплату прокручиваются только изменившиеся цифры.	Демо
Закреплённые карточки	При прокрутке карточки складываются стопкой: каждая перекрытая карточка отступает и темнеет. Реализовано с помощью обычного position: sticky и нескольких строк JS. GSAP не используется.	Демо

Медиа

Компонент	Описание
До / После	Два изображения в одной рамке и разделитель между ними: перетаскивайте его, щёлкните по нему — и он плавно переместится, или используйте клавиши со стрелками. При первом появлении разделитель слегка сдвигается, а подписи отступают в сторону.	Демо
Карусель	Карусель с нативной прокруткой и привязкой к слайдам работает ещё до загрузки скрипта. После загрузки появляются кнопки навигации по страницам, счётчик, полоса прогресса или точки, а также перетаскивание мышью с инерцией. Колесо прокрутки остаётся под контролем пользователя.	Демо
Полноэкранный слайдер	Полноэкранные слайды сменяются эффектом занавеса, а заголовок появляется из-за маски. Горизонтальная или вертикальная ориентация, кнопки, клавиши со стрелками и свайпы. Без GSAP.	Демо
Галерея изображений	Редакционная сетка изображений: каждое изображение плавно раскрывается на весь экран, а при переходе между изображениями используется эффект занавеса. Поддерживаются клавиатура и свайпы.	Демо
Лайтбокс	Оберните статью этим компонентом — и каждое изображение в ней будет открываться в увеличенном виде. Оно плавно увеличивается на своём месте до размеров экрана. Переключайтесь между изображениями стрелками или свайпом, а клавиша Escape вернёт изображение на место.	Демо
Лупа	Позволяет рассмотреть детали под указателем: круглая линза с небольшим запаздыванием следует за ним и показывает фрагмент из более чёткого файла. Другой вариант — изображение увеличивается по направлению к указателю.	Демо

Текстовые эффекты

Компонент	Описание
Аннотация текста	Рисованные от руки пометки появляются на ключевых словах, когда абзац входит в область видимости: подчёркивание, зачёркивание, обводка или выделение маркером.	Демо
Глаз-буква	Любая буква с отверстием превращается в глаз: зрачок следит за указателем, сверху вырастают ресницы, а при моргании глаз закрывают настоящие веки. Нажмите на глаз — и он подмигнёт.	Демо
Бегущая строка	Бесконечная бегущая строка без резких скачков: под указателем она плавно останавливается, а по краям постепенно исчезает. Может двигаться в обоих направлениях.	Демо
Появление текста при прокрутке	Слова по очереди подсвечиваются, пока абзац прокручивается на экране, и снова тускнеют при прокрутке назад. Эффект можно настроить: проявление, размытие или подъём. Без GSAP.	Демо
Мерцающий текст	Полоса света скользит по тексту — так интерфейс даёт понять, что операция ещё выполняется. Эффект может повторяться, запускаться при наведении или следовать за указателем.	Демо
Появление текста	Текст постепенно проявляется при появлении на экране: строки поднимаются из-за маски, слова становятся чёткими или поочерёдно появляются буквы. Анимация проигрывается один раз.	Демо
Эффект печатной машинки	Фразы печатаются в естественном ритме, с реалистичным курсором. Компонент набирает заново только изменившуюся часть или сначала выделяет её, как в редакторе, а затем заменяет новым текстом.	Демо
Смена слов	Одно слово в предложении постоянно меняется: буквы следующего поднимаются, пока исчезают предыдущие, или слово переворачивается. Пробел подстраивается под ширину слова, а предложение плавно сдвигается.	Демо

Эффекты для изображений

Компонент	Описание
Предпросмотр при наведении на список	При наведении на строку рядом появляется изображение в отдельной рамке, которая следует за указателем. По мере перемещения вниз по списку одно изображение сменяется другим с эффектом стирания. Предусмотрены режим панели, управление с клавиатуры и миниатюры для сенсорных экранов.	Демо
Изображение при наведении	Четыре способа отклика изображения на движение указателя в собственной рамке: медленное увеличение, проявление резкости, скругление углов или смещение вслед за курсором.	Демо
Появление изображения	Изображение постепенно открывается при появлении в области видимости: занавес поднимается снизу, сдвигается сбоку или раскрывается, как диафрагма. Одновременно изображение слегка уменьшается и занимает нужное положение.	Демо

Фоны и текстуры

Компонент	Описание
Каустики	Главный экран с видом на дно бассейна, залитое солнцем: сетка ярких линий, рассчитанная средствами нативного WebGL 2 на основе двух десятков волн, и спокойная вода под текстом.	Демо
Киматика	Главный экран с динамиком, нарисованным на песке: рамка и винты сохраняют чёткие очертания, пока мембрана вибрирует под меняющийся тон, а песок складывается в один — пять неподвижных кругов. Можно показать только низкочастотный динамик или всю колонку.	Демо
Размерные линии	Главный экран размечен как технический чертёж: линии со стрелками показывают реальные отступы, колонки, размеры заголовка и высоту и пересчитываются при изменении размеров. При появлении линии раскрываются по очереди.	Демо
Карта из точек	Главный экран поверх карты мира, составленной из мелких точек и сфокусированной на указанных вами местах. Для каждого места отображается местное время, а по карте движется кольцо, подсвечивая участки суши на своём пути. Без скрипта отображается обычный список.	Демо
Зернистость	Плёночная зернистость создаётся с помощью встроенного SVG-фильтра шума и меняется десять раз в секунду, словно кадры киноплёнки. Эффект располагается под текстом секции и поверх её изображения. Точки используют два выбранных вами цвета. Ничего скачивать не нужно.	Демо
Интерактивные точки	Главный экран поверх поля из мелких точек. Указатель раздвигает их, словно рука песок, а затем они возвращаются на место. Щелчок запускает волну по всему полю. Один canvas, который не работает, когда на него никто не смотрит.	Демо
Фоновый узор	Главный экран обрамлён собственным узором: сетка выравнивается по содержимому, четыре тонкие линии проходят по краям, а в углах расположены метки обрезки. Остальная часть узора постепенно исчезает. На выбор доступны сетка, точки, кресты или диагонали. Без изображений.	Демо
Разлинованная бумага	Секция оформлена как страница блокнота с вертикальной линией на полях. Линии подстраиваются под межстрочный интервал текста, поэтому каждая строка текста располагается на своей линии при любом размере.	Демо
Топографические линии	Главный экран поверх карты с линиями рельефа, созданной нативным шейдером WebGL. Линии движутся очень медленно, указатель приподнимает участок под собой, а под текстом линии становятся тоньше. Без WebGL используются обычные кольца CSS.	Демо

Прокрутка

Компонент	Описание
Наверх	Круглая кнопка появляется, когда вы прокручиваете страницу вниз. По мере чтения заполняется кольцо вокруг неё. При наведении раскрывается подпись, а при нажатии стрелка взлетает.	Демо
Горизонтальная прокрутка	Секция закрепляется на месте, а её карточки перемещаются по горизонтали во время прокрутки вниз. Изображения плавно движутся в рамках, счётчик перелистывается. На сенсорных экранах можно провести пальцем.	Демо
Бесконечная прокрутка	Сначала появляются мерцающие заглушки размером с публикацию, которые затем сменяются публикациями без скачка страницы. Две загрузки происходят автоматически, после чего появляется кнопка, чтобы нижний колонтитул оставался доступным.	Демо
Появление при прокрутке	Блоки появляются по мере прокрутки: растворяются, поднимаются строками из-под маски или открываются с помощью clip-path. Если несколько блоков появляются одновременно, они выходят по очереди.	Демо
Появление при закреплённой прокрутке	Блок закрепляется на месте, а крупные фразы сменяют друг друга во время прокрутки: каждая строка уходит через собственную маску, пока следующая поднимается на её место.	Демо
Закреплённые шаги	Изображение закреплено с одной стороны, а шаги прокручиваются с другой. Каждый следующий шаг словно занавесом накрывает изображение предыдущего, а счётчик перелистывается.	Демо

Курсор

Компонент	Описание
Пользовательский курсор	Внутри заданной области указатель превращается в точку с плавным запаздыванием и плашку с подсказкой о том, что произойдёт при нажатии на каждый элемент. Без GSAP.	Демо

Прелоадеры и переходы

Компонент	Описание
Появление главного экрана	Прелоадер считает файлы, необходимые главному экрану, пока изображения собираются в стопку. При достижении 100% последним появляется изображение главного экрана и увеличивается до нужного размера, затем поднимается заголовок. Нажатие или любая клавиша пропускает анимацию. Без GSAP.	Демо
Подъём страницы	При переходе между двумя полноценными страницами текущая отдаляется, а следующая появляется поверх неё с закруглённого края. Шапка остаётся на месте, а при возврате анимация проигрывается в обратном порядке. Chrome, Edge и Safari; в Firefox пока выполняется обычная загрузка. Без GSAP.	Демо

Главный экран

Компонент	Описание
Главный экран с выравниванием по центру	Главный экран с выравниванием по центру: плашка с объявлением, заголовок, строки которого поднимаются из-под масок, короткий текст и две кнопки-плашки. Только CSS; анимация появления запускается при загрузке.	Демо
Главный экран-коллаж	Главный экран с выравниванием по центру и изображениями, разбросанными вокруг заголовка. Они открываются одно за другим, а затем слегка следуют за движением мыши, каждое — на своей глубине.	Демо
Главный экран-обложка	Главный экран с обложкой: изображение на всю ширину под монохромным слоем, заголовок расположен внизу слева. Изображение открывается от верхнего края и плавно встаёт на место, строки заголовка поднимаются. Только CSS.	Демо
Главный экран события	Главный экран события с обратным отсчётом до даты начала, заданной в разметке. Каждая цифра выпадает из своего окна. В момент начала отсчёт сменяется надписью «Уже в эфире», а после завершения — ссылкой на запись.	Демо
Выход из главного экрана	Заголовок по центру, разбитый на две крупные строки. При прокрутке сцена задерживается, строки расходятся, между ними открывается изображение и сжимается до размера карточки, затем следующий раздел накрывает её.	Демо
Раскрывающийся главный экран	Крупный заголовок с небольшим изображением между двумя словами. При прокрутке сцена закрепляется, изображение раскрывается на весь экран и отодвигает слова, затем поднимаются подпись и кнопка. При прокрутке вверх анимация воспроизводится в обратном направлении.	Демо
Главный экран с фокусом	Чёткий заголовок поверх размытого изображения. При прокрутке фокус смещается на изображение, заголовок размывается и исчезает, индикатор показывает расстояние, а затем примечания указывают на детали. Анимация воспроизводится в обратном направлении.	Демо
Главный экран с графиком работы	Главный экран для места с графиком работы. Строка статуса определяет по местному времени, открыто ли заведение («Открыто сейчас · закрывается в 23:00», «Закроется через 25 мин»), и перелистывает текст при смене минуты.	Демо
Главный экран с выбором направления	Главный экран помогает посетителям выбрать один из двух путей: заголовок и два высоких изображения-ссылки. Изображение под указателем расширяется, а призыв к действию поднимается.	Демо
Главный экран с чередованием заголовков	Главный экран студии, где заголовок меняется по одному слову: следующее слово поднимается на место предыдущего, а соответствующее изображение открывается поверх него в том же ритме. Кольцо вокруг кнопки паузы показывает оставшееся время.	Демо
Главный экран со скриншотом	Заголовок по центру и кнопки поверх скриншота продукта, наклонённого в перспективе. При прокрутке экран выпрямляется, поворачивается к пользователю и увеличивается, а заголовок отступает назад.	Демо
Главный экран с поиском	Главный экран с полноценной карточкой поиска: переключатели «Купить» и «Снять» меняют список бюджета под скользящей плашкой, поле местоположения перелистывает примеры, раскрывающиеся списки работают как Kodza Select, а число результатов появляется в кнопке с эффектом перелистывания.	Демо
Главный экран с портфолио	Заголовок над стеной миниатюр проектов, разложенных под наклоном, словно отпечатки на столе. При прокрутке ряды скользят в противоположных направлениях и выстраиваются в линию, пока стена поднимается. Каждая миниатюра — ссылка.	Демо
Главный экран с видеоподборкой	Главный экран с видеоподборкой: зацикленное видео без звука расположено под заголовком, а плашка «Воспроизвести ролик» следует за указателем. При нажатии плашка расширяется до видеоплеера с управлением звуком, паузой и перемоткой.	Демо
Разделённый главный экран	Главный экран разделён на две части: текст слева, изображение с соотношением сторон 4:5 справа. Строки заголовка поднимаются из-под масок, а изображение открывается сверху вниз.	Демо
Главный экран с заявлением	Крупное заявление студии расположено над строкой с названием города, текущим местным временем и периодом бронирования. При загрузке слова одно за другим поднимаются из-под масок.	Демо
Главный экран с названием	Название занимает всю ширину главного экрана от края до края: буквы поднимаются по одной, а широкое изображение открывается прямо под ними.	Демо

Header

Компонент	Описание
Header Announcement	Шапка сайта с новостной строкой сверху: сообщения сменяют друг друга и приостанавливаются при наведении или фокусе. Кнопка закрытия сворачивает строку, а шапка плавно поднимается без рывка и остаётся скрытой. При ширине экрана менее 900 px открывается меню-шторка.	Демо
Header Centered	Шапка по центру для ресторана или магазина: название расположено посередине, ссылки — по обе стороны, а над ними указано, открыто ли заведение сейчас. При прокрутке панель становится компактнее. При ширине экрана менее 900 px открывается полноэкранное меню.	Демо
Header Classic	Шапка сайта с логотипом, ссылками и кнопкой: линия скользит под ссылками, начиная с переднего края, и возвращается к текущей странице. При ширине экрана менее 900 px ссылки сменяются меню-шторкой.	Демо
Header Mega	Полноценная шапка сайта с общим меню для всех пунктов: при переходе от одной ссылки к другой панель меняет форму и скользит, не закрываясь; за указателем следует мягкая плашка. При ширине экрана менее 900 px ссылки превращаются в выдвижное меню с уровнями.	Демо
Header Overlay	Прозрачная шапка поверх главного изображения: когда оно прокручивается под шапку, сверху опускается сплошная панель, а текст на её краю становится тёмным. При ширине экрана менее 900 px открывается полноэкранное меню.	Демо
Header Shop	Шапка магазина: название, категории, поиск, который открывается поверх них, учётная запись и корзина, счётчик в которой прокручивается при добавлении товара. При ширине экрана менее 900 px открывается меню, для которого страница отодвигается в сторону.	Демо

Footer

Компонент	Описание
Footer Columns	Подвал сайта: логотип и разделительная линия, до пяти колонок ссылок с заголовками моноширинным шрифтом, а внизу — год, юридические страницы и ссылка для перехода наверх. Под ссылками линия появляется слева.	Демо
Footer Contact	Подвал для фрилансера или студии: адрес электронной почты занимает всю ширину и копируется по нажатию, а линия под ним прокручивается до надписи «Скопировано». Здесь также отображается местное время с точностью до минуты и крупные строки со ссылками на соцсети.	Демо
Footer Minimal	Однострочный подвал сайта: логотип, знак ©, три ссылки и ссылка для перехода наверх. При наведении стрелка прокручивается вверх, а сама страница плавно перемещается к началу. На телефонах элементы расположены в двух строках по центру.	Демо
Footer Shop	Подвал магазина: четыре преимущества с иконками, поле подписки на рассылку, кнопка которого прокручивается до надписи «Подписка оформлена», сворачивающиеся на телефонах колонки, меню выбора страны и валюты, а также способы оплаты.	Демо
Footer Venue	Подвал заведения с графиком работы: адрес и ссылка «Маршрут», дни недели, где текущий день выделен тёмной плашкой, и статус, рассчитанный по местному времени заведения. При изменении статуса он прокручивается; также отображаются телефон и кнопка «Забронировать».	Демо
Footer Wordmark	Подвал сайта, который остаётся под страницей: его содержимое поднимается медленнее, чем прокручивается страница, а затемнение постепенно исчезает. Название бренда растянуто на всю ширину — от края до края; буквы поднимаются из своих масок.	Демо

Об этом репозитории

Репозиторий повторяет kodza.dev: когда там появляется новый компонент или меняется существующий, обновление попадает сюда. Все файлы генерируются автоматически и не редактируются вручную, поэтому pull request не принимаются.

Нашли ошибку или не обнаружили нужный компонент? Перейдите в kodza-dev/requests: сообщайте об ошибках в разделе issues, а предложения оставляйте в обсуждениях и голосуйте за них.

Лицензия

Лицензия Kodza. Используйте компоненты в любых проектах — личных, коммерческих или клиентских. Указывать авторство не требуется. Запрещено перепродавать или распространять компоненты, а также предлагать их через другой каталог, реестр или MCP-сервер.

Используйте где угодно. Не перепродавайте.