
Хиро с fade-in
.ks-hero-fade-inЭлементы хиро появляются плавно с задержкой при входе в viewport. IntersectionObserver.

.ks-hero-fade-inЭлементы хиро появляются плавно с задержкой при входе в viewport. IntersectionObserver.
.ks-hero-fullscreenРазворачивает хиро-секцию на 100vh (100dvh на мобиле). Картинка фоном, контент центрируется, опциональный overlay-затемнитель.
.ks-hero-image-maskЗаголовок «вырезан» из фотографии. Видна картинка только в форме букв. Pure CSS, background-clip:text.
.ks-hero-letter-revealКаждая буква заголовка вылазит снизу с задержкой. Kinetic typography.
.ks-hero-marquee-titleБольшой заголовок хиро бесконечно бежит горизонтально. Streetwear / lookbook стиль.
.ks-hero-parallaxФон движется медленнее чем контент при скролле. Глубина и кинематографичность.
.ks-hero-scroll-pinХиро прилипает к viewport и переключает контент шагами по мере скролла. Storytelling-формат.
.ks-hero-splitДве картинки в хиро разделены перетаскиваемой полосой. Mouse + Touch. Классика для ремонта, ретуши, реставрации.
.ks-hero-video-bgВидео в фоне хиро (autoplay+muted+loop+playsinline). Поверх — overlay для читаемости. Ken Burns fallback на img.
.ks-hero-zoomФон хиро медленно увеличивается до 1.6× по мере скролла. Эффект «приближения» к сцене.
.ks-add-to-cart-bubbleСвой стиль всплывашки после добавления в корзину — цвет, шрифт, длительность.
.ks-bonus-promoПоле «Использовать N бонусов». Подключаем баланс пользователя из своего источника.
.ks-btn-in-favouriteВ попапе избранного добавляет рядом с товаром кнопку покупки.
.ks-cart-image-buttonМеняет layout позиции в попапе: миниатюра слева, цена справа, кнопка действия видна.
.ks-cart-in-menuИконка корзины со счётчиком в любом стандартном меню Тильды.
.ks-cart-zero-blockИконка корзины со счётчиком в собственном меню на Zero Block.
.ks-clean-buttonДобавляет ссылку «Очистить» рядом с итогом — удаляет все позиции за один клик.
.ks-click-banner-cartПромо-баннер сверху корзины с переходом по клику (например, «скидка от 5000 ₽»).
.ks-continue-buttonВ попапе корзины кнопка возвращает в каталог вместо «Закрыть».
.ks-custom-cartСвой дизайн поп-апа корзины — цвета, кнопки, отступы. Без правки HTML Тильды.
.ks-custom-empty-cartМеняем заголовок, иллюстрацию и кнопку CTA в пустой корзине.
.ks-animated-tagsNEW / SALE / HIT с пульсацией или появлением — привлекает взгляд.
.ks-condition-iconsМаленькие пиктограммы поверх фото — «веган», «эко», «новинка».
.ks-large-badgeЗаметная плашка-стикер на карточке — для акций («−30%», «HOT»).
.ks-my-button-net-v-nalichiiВместо disabled-кнопки — активная «Уведомить» / «Под заказ» с действием.
.ks-ostatok-tovara«Осталось 3 шт» под ценой. Срабатывает при остатке ≤ заданного порога.
.ks-photo-sliderПереключение фото внутри карточки точками/стрелками без захода в товар.
.ks-product-overМеняем стандартный «Нет в наличии» на «Под заказ», «Скоро будет», что угодно.
.ks-product-transparencyТовары без остатка показываются полупрозрачными — глаз понимает что мёртвый.
.ks-style-favourite-iconМеняем сердечко на свою иконку, цвет, размер.
.ks-text-to-price«от» / «за шт» / «без НДС» — короткая приписка к цене.
.ks-video-catalogАвтоплей короткого ролика вместо/поверх первого фото.
.ks-video-hoverПри hover на карточку запускается превью-видео. На тач — первый клик.
.ks-5-tovarov-v-ryadМеняем сетку стандартного каталога с 4 до 5 (или больше) карточек в ряд.
.ks-dim-on-hoverПри наведении на одну карточку соседние теряют контраст — фокус на товаре.
.ks-filters-redirectПри сбросе всех фильтров — редирект на чистый URL каталога.
.ks-full-width-btnsРастягиваем «В корзину» и «В избранное» — лучше тапается на мобиле.
.ks-hide-filtersСкрываем выбранные опции фильтра — оставляем только активные.
.ks-icons-in-buttonsМаленькие иконки в кнопках «В корзину» / «Подробнее».
.ks-load-moreМеняем стандартную пагинацию на свою кнопку «Показать ещё».
.ks-mobile-scrollКатегории на мобиле скроллятся горизонтально вместо переноса.
.ks-nothing-foundСвой текст и иллюстрация когда фильтр ничего не нашёл.
.ks-oos-to-endТовары «Нет в наличии» переносятся вниз. В наличии — всегда сверху.
.ks-sections-zeroКликабельные категории в Zero-блоке — фильтруют товары без перезагрузки.
.ks-stock-to-zeroПрокидываем «Осталось N» из каталога в Zero-карточку (если рендеришь товар руками).
.ks-zero-cardОдин товар как Zero-блок с собственной вёрсткой (hero-баннер товара).
.ks-zero-catalogВстраиваем стандартный каталог Тильды внутрь Zero-блока.
.ks-custom-nothing-searchЗаменяем стандартный текст пустого результата в блоке поиска T838.
.ks-dropdown-search-zeroТо же, но в кастомном Zero-меню.
.ks-search-in-menuИконка лупы в меню → клик → разворачивается строка поиска.
.ks-search-in-zeroПоле поиска на любой странице, без меню — встраиваем в Zero.
.ks-search-page-zeroПоиск по содержимому страницы (как Ctrl+F), результаты в Zero-блоке.
.ks-tabs-tips-searchПод полем поиска — табы с подсказками: «новинки», «бренды», «акции».
.ks-add-wishlist-bubbleПерекрашиваем всплывашку в свой цвет, меняем текст и длительность.
.ks-custom-favoriteМеняем дизайн всплывашки избранного — цвет, шрифт, кнопки.
.ks-custom-favorite-popupОткрываем избранное модальным окном на 100% viewport — как отдельный раздел.
.ks-wishlist-in-menuИконка-сердечко со счётчиком в любом стандартном меню.
.ks-wishlist-in-zero-menuТо же, но для кастомных Zero-меню.
.ks-active-menuПодсветка пункта меню, соответствующего текущей секции страницы.
.ks-auto-breadcrumbsКрошки строятся автоматически из URL-пути — не надо прописывать каждый раз.
.ks-back-buttonВозврат на предыдущую страницу — history.back() или явный URL.
.ks-bread-crumbs«Главная / Каталог / Куртки» — навигация по уровням сайта.
.ks-horizontal-scrollЛюбая лента превращается в карусель со стрелками-навигаторами.
.ks-icons-me602Свои пиктограммы у каждого пункта меню ME602.
.ks-me602-fixedМеню ME602 прилипает сбоку или сверху при скролле.
.ks-podsvetka-scrollТекст подсвечивается по мере прохождения через viewport.
.ks-scroll-indicatorПолоска вверху страницы показывает сколько проскролили — popular для блогов.
.ks-scroll-up-popupЮзер скроллит наверх → ловим намерение уйти → показываем удерживающий поп-ап.
.ks-second-level-menuДостаём подменю прямо из любого блока — не только из стандартных меню.
.ks-side-menuБургер-меню с выезжающей сбоку панелью — пункты и стилизация в Zero-блоке.
.ks-smooth-scrollАнимация скролла к якорю — плавное затухание вместо мгновенного прыжка.
.ks-sticky-footerФутер фиксированно внизу окна — пока контент не доскролит до своего низа.
.ks-sticky-posЛюбой блок прилипает к верху экрана при скролле. Margin-bottom не ломается.
.ks-sticky-positionЛюбой блок прилипает к верху экрана при скролле. Margin-bottom не ломается.
.ks-up-buttonПоявляется после скролла N px. Плавный возврат к началу.
.ks-auto-webinarВ тексте автоматически подставляется дата вебинара (завтра / в субботу) — без правки руками.
.ks-autofillПосле первого заполнения подставляет имя/email/тел в следующие формы.
.ks-custom-checkboxСвой дизайн квадратика — цвет, скругление, иконка ✓.
.ks-custom-file-uploadСвой dropzone с превью загруженных файлов и счётчиком.
.ks-custom-inputСвои border / focus / placeholder для текстовых полей.
.ks-custom-radioКружок с заливкой в брендовых цветах.
.ks-dependent-fieldsПоле B появляется только если в A выбран определённый вариант.
.ks-dependent-successРазные success-страницы в зависимости от значения в форме (например, услуги → /quote, товары → /thanks).
.ks-donation-formГотовая форма «Поддержать» с предустановками сумм (100/500/1000).
.ks-icon-inputМаленькая пиктограмма слева в поле (✉ email, ☎ phone и т.д.).
.ks-image-dropdownОпции в select — с миниатюрами (флаги стран, цвета товара и т.п.).
.ks-input-statesАнимация фокуса, валидации, ошибки — плавный переход цвета/тени.
.ks-no-enterEnter не отправляет форму. Полезно когда есть textarea и юзер случайно сабмитит.
.ks-no-resizeУбираем уголок-перетаскивание у многострочных полей — фикс размер.
.ks-photo-previewПрикреплённые в форму фото показываются миниатюрами до отправки.
.ks-popup-formТо же что квиз — но открывается модалкой по клику.
.ks-quiz-formМногошаговая форма с прогресс-баром, ветвлением, финальным CTA.
.ks-show-filled«Спасибо, Алексей!» — подставляем имя из формы в success-блок.
.ks-slow-formПосле сабмита показываем сообщение N секунд, потом редирект.
.ks-textarea-limitПод textarea — «42 / 500». Подсветка красным при превышении.
.ks-zero-formПолностью кастомная форма в Zero-блоке — со своей вёрсткой и интеграцией с Тильдой.
.ks-zero-successПосле отправки формы — кастомный экран благодарности из Zero-блока.
.ks-bf502n-closeДобавляем крестик закрытия в обычно постоянный блок BF502N.
.ks-cl46-fullРастягиваем таблицу CL46 за пределы контейнера — full-bleed layout.
.ks-cl46-mobileТаблица CL46 на мобиле — горизонтальная прокрутка с сохранением заголовков.
.ks-fr201-centerИконки в нижнем ряду FR201 центрируются если их меньше чем в ряд.
.ks-gl11-tickerГалерея GL11 превращается в бесконечную ленту бегущих изображений.
.ks-gl20-styleСвои стрелки, точки, индикатор прогресса для слайдера GL20.
.ks-line-sliderВ Zero-слайдере — полоска прогресса вместо точек пагинации.
.ks-me602-fullМеню ME602 и ME603 на 100% ширины окна, без отступов.
.ks-pl210Цвета строк, hover, sticky-заголовок для блока PL210.
.ks-popup-close-posМеняем положение крестика закрытия в стандартных попап-блоках.
.ks-shape-styleАнимация, hover, градиент, обводка для любого Shape-элемента в Zero.
.ks-t658-blurBackdrop-blur для попапа возрастного ограничения — современный glass-style.
.ks-thumb-sliderВ Zero-слайдере — превью-картинки вместо точек.
.ks-tx16n2Меняем шрифт, цвета, отступы стандартного TX16N2 без переделки макета.
.ks-zero-arrowsЛюбая SVG-иконка вместо стандартных стрелок ◀ ▶.
.ks-3d-card-hoverКарточки в Zero реагируют на мышь — наклоняются как 3D-объект.
.ks-3d-imageКартинка получает glare + перспективный наклон при наведении.
.ks-anim-appearanceЭлементы Zero появляются с задержкой — поочерёдно, при попадании в viewport.
.ks-anim-borderБегущая линия по краю Shape-элемента в Zero.
.ks-anim-numbersСчётчики (0 → 1500) анимируются при попадании в viewport.
.ks-autoscaleСтандартные блоки масштабируются под viewport — без обрезок на широком экране.
.ks-blocktimeПоказывать блок только в определённое время/день недели.
.ks-change-textТекст циклически меняется — список вариантов через запятую.
.ks-click-showЛюбой блок раскрывается/сворачивается кликом по триггеру (аккордеон).
.ks-click-show-blockЛюбой блок раскрывается/сворачивается кликом по триггеру (аккордеон).
.ks-distortionGlitch / liquid-distortion эффект при наведении мыши.
.ks-dynamic-bannerБаннер в Zero меняет высоту при скролле — параллакс-эффект.
.ks-fixed-widgetЛюбой Zero-блок прибит к экрану — корзина в углу, кнопка-чат и т.п.
.ks-fixed-zeroМеню из Zero-блока прилипает к верху страницы при скролле.
.ks-grab-elementsЭлементы Zero-блока можно перетаскивать мышью — drag-and-drop коллаж.
.ks-gradient-textЦвет букв плавно перетекает между N цветами — без JS-зависимостей.
.ks-hide-timerПосле N сек блок исчезает навсегда (запоминает через localStorage).
.ks-iframe-popupЛюбая внутренняя страница открывается через iframe внутри модалки.
.ks-loupeПри наведении на фото — окно с увеличенной областью под курсором.
.ks-open-imageКартинки в Zero расширяются при клике как accordion — Lacoste-style.
.ks-popup-linkЛюбая ссылка `#popup:NAME` открывает соответствующий поп-ап Тильды.
.ks-random-blocksПри открытии страницы рандомно подмешивает один из вариантов блока.
.ks-sbs-stepПоочерёдное появление элементов с заданной задержкой — для туториалов.
.ks-slider-zero1Свои слайды-Zero объединяем в карусель со стрелками, табами, пагинацией.
.ks-slider-zero2То же, но с авто-таймером перехода между слайдами.
.ks-slider-zero3Карусель из Zero-блоков открывается модальным окном.
.ks-z-dynamicПри наведении элемент Zero выходит наверх — перекрывает соседние.
.ks-z-indexУправляем порядком наложения слоёв вручную через data-атрибут.
.ks-zero-popupЛюбой Zero-блок превращается в модалку — открывается по триггеру.
.ks-zero-tabsНесколько Zero-блоков → переключаем кликом по табу.
.ks-btn-animГотовые hover-анимации для кнопок: lift / fill / sweep / pulse.
.ks-custom-cursorПолностью кастомный курсор — текст, иконка, форма по выбору.
.ks-dot-cursorЗаменяем системный курсор на маленькую точку + увеличение на интерактиве.
.ks-float-btnТекст внутри кнопки бесконечно бежит — gimmick для CTA.
.ks-float-imagesПри наведении на ссылку рядом всплывает превью-картинка.
.ks-glitchТекст «глючит» — смещение RGB-каналов, дрожание.
.ks-glow-cursorКарточка светится мягким glow при hover.
.ks-gradient-cursorЗа курсором тянется размытое цветовое пятно — атмосферно.
.ks-hover-iconИконка в кнопке покачивается / поворачивается при наведении.
.ks-hover-linkUnderline растёт слева → направо, появляется стрелка, меняется цвет.
.ks-hover-shadowПоявление тени блока при hover — плавное приподнимание.
.ks-image-zoom-hoverИзображение внутри Shape увеличивается при hover — рамка остаётся.
.ks-isometric3D-наклон текста через CSS transform — без библиотек.
.ks-letter-colorКаждая буква меняет цвет по очереди — внимание к словам.
.ks-link-stylesГотовые наборы стилей для ссылок — underline / dashed / animated / arrow.
.ks-neon-textGlow-эффект для текста — вывеска в стиле 80s.
.ks-noiseЗерно поверх любого блока — текстура старого фото / плёнки.
.ks-paint-zeroКурсор «рисует» поверх блока — линия следует за движением мыши.
.ks-scrollbarСвой дизайн полосы прокрутки — цвет, толщина, скругление.
.ks-selection-colorМеняем цвет фона/текста при выделении мышью на брендовый.
.ks-shadow-gradТень кнопки — цветной градиент, который анимируется.
.ks-text-limitОбрезает текст до N символов с многоточием. Применяется к товарам/потокам.
.ks-text-scrollДлинный текст скроллится внутри ограниченного контейнера.
.ks-text-strokeКонтурный текст — заливка прозрачная, только бордер.
.ks-x-rayHover открывает «скрытый» слой — как через стекло. Двухслойная картинка.
.ks-before-afterПеретаскиваемая разделительная линия между двумя картинками.
.ks-constructor-videoВидео-фон/видео-баннер внутри Zero с настройками автоплей/мьют.
.ks-music-onКнопка-триггер запускает фоновую музыку на странице.
.ks-pdf-tildaВстраиваем PDF-документ через viewer — без выхода с сайта.
.ks-sound-fxКлик/hover/появление сопровождается коротким звуком — UX-усилитель.
.ks-video-widgetПлеер с кастомными контролами (плей, прогресс, громкость).
.ks-eff-loadСерые плейсхолдеры вместо контента пока он не подгрузился.
.ks-preloaderМинимальный CSS-spinner — без библиотек. Показывается пока сайт грузится.
.ks-preloader-gradientТекст «Загрузка...» с переливающимся градиентом.
.ks-preloader-percentРеальный прогресс загрузки в процентах — от 0 до 100.
.ks-preloader-zeroКастомная заставка из Zero-блока показывается до загрузки страницы.
.ks-calculatorСчиталка по своей формуле (стоимость доставки, тариф, кол-во материала).
.ks-fake-ordersВсплывашка «Алексей купил товар X — 5 мин назад». Социальное доказательство.
.ks-geo-cityПодставляем город пользователя в текст («Доставка в Москве — 1 день»).
.ks-share-goodsWhatsApp / Telegram / VK / Copy link для любого товара.
.ks-time-text«Доброе утро» / «Добрый день» / «Добрый вечер» — автоматически.
.ks-timer-dateДо конкретной даты — DD:HH:MM:SS. Для акций, распродаж.
.ks-tnkf-cardТо же, но на карточке товара в каталоге.
.ks-tnkf-zeroКнопка «Купить в рассрочку Тинькофф» в Zero-блоке.
.ks-airtable-hideВидимость блока зависит от значения поля в Airtable — A/B-тестирование.
.ks-airtable-zeroПодтягиваем строки таблицы → рендерим в Zero-блоке (отзывы, кейсы).
.ks-change-faviconКогда вкладка неактивна — иконка меняется (привлечь внимание).
.ks-color-browsertheme-color — управляем цветом «полоски» Safari/Chrome на мобиле.
.ks-copytextКнопка → копирует заданный текст в буфер обмена + toast «Скопировано».
.ks-google-calКнопка «Добавить в календарь» → создаёт событие в Google Calendar.
.ks-metrika-goalsАвтоматически создаёт цели на клики/сабмиты — не надо в коде прописывать.
.ks-set-nameБерёт имя из cookie/localStorage → подставляет в текст («Привет, Алексей»).
.ks-update-years«© 2026» в футере обновляется сама — никогда не устаревает.
.ks-yandex-mapКарта подгружается только при клике — экономит ресурсы при первом заходе.
.ks-yandex-map-zeroМаркеры на Яндекс-карте берутся из Airtable таблицы.
.ks-auth-pageБлок виден только авторизованным/анонимам — управление видимостью.
.ks-custom-loginПолностью кастомная форма логина в Zero-блоке — со стандартной авторизацией Тильды.
.ks-custom-recoveryСвоя страница восстановления пароля.
.ks-lk-logoutКастомная кнопка logout с подтверждением.
.ks-news-feed-sliderСтатьи из Tilda Flows превращаются в горизонтальный слайдер.
.ks-news-reading-time«5 мин чтения» — рассчитывается из объёма текста статьи.