# Дизайн-система Ilya Gamburg · живой слой (ig-motion 1.0)

Для любого ИИ-агента Ильи Гамбурга (Claude, ChatGPT, Codex, Гермес, Open Minis).
Правило Ильи (29.10.2026): любой его сайт, лендинг, артефакт или интерфейс делается на этой
дизайн-системе вместе с живым слоем анимаций. Напоминать не нужно. Исключение: проекты со
своим брендом (Гастролаб) используют свою дизайн-систему, анимации отсюда можно брать как приёмы.

## Подключение (одна вставка в <head>)

<link rel="stylesheet" href="https://igdesignsystem.gamburg.work/colors_and_type.css">
<link rel="stylesheet" href="https://igdesignsystem.gamburg.work/motion/ig-motion.css">
<script src="https://igdesignsystem.gamburg.work/motion/ig-motion.js" defer></script>

Если внешние файлы запрещены (артефакты claude.ai, письма, офлайн), скачай эти три файла
и вставь их содержимое в страницу inline. Не переписывай анимации по памяти.

## Файлы

- Полные правила бренда (цвет, шрифты, отступы, тон текстов, движение): https://igdesignsystem.gamburg.work/README.md
- Базовые токены CSS: https://igdesignsystem.gamburg.work/colors_and_type.css
- Живой слой: https://igdesignsystem.gamburg.work/motion/ig-motion.css и https://igdesignsystem.gamburg.work/motion/ig-motion.js
- Правила каждого эффекта: https://igdesignsystem.gamburg.work/components/<Имя>/README.md
  Имена: MotionThemes, MotionReveal, MotionHighlight, MotionStack, MotionHScroll, MotionMarquee,
  MotionParallax, MotionCounter, MotionPointer, MotionKinetic, MotionCarousel, MotionCurtain, MotionChaos
- Живой пример каждого эффекта: https://igdesignsystem.gamburg.work/components/<Имя>/preview.html
- Шаблон страницы со всеми эффектами (исходник для копирования): https://igdesignsystem.gamburg.work/templates/motion-landing.html
- Демо на весь экран: https://igdesignsystem.gamburg.work/

## Эффекты (всё через атрибуты, JS писать не нужно)

- Смена цветовой гаммы по секциям: data-section-theme="cream|paper|butter|sun|ink" на <section>
- Подсветка пункта меню текущей секции: data-spy на контейнере ссылок
- Въезд: data-reveal="words|chars|up|left|clip|stagger|zoom"; <mark> внутри заголовка = жёлтый маркер
- Слова абзаца загораются при скролле: data-highlight
- Стопка карточек: <div data-stack><article class="ig-stack-card"><div class="ig-stack-inner">…
- Горизонтальный скролл: <section data-hscroll><div class="ig-hscroll-pin">…<div data-hscroll-track><div data-hscroll-step>…</div></div><div data-hscroll-bar><i></i></div>
- Бегущая строка: <div data-marquee="-1"><span>…</span></div>
- Параллакс: data-zoom="1.18" (обёртка картинки), data-parallax="0.15"
- Счётчик: <span data-count="640">640</span>
- Свой курсор: data-ig-cursor на <html>; подпись data-cursor="Читать"
- Наклон карточки с тёплым пятном: data-tilt + внутренний .ig-tilt-body
- data-magnetic="0.3", data-scramble, data-wave
- Толщина букв за курсором: <span data-kinetic>Имя</span>
- Карусель цитат: data-carousel, data-slides, data-slide, data-slide-text, data-slide-meta, data-carousel-prev/next/count/bars
- Шторка смены языка: data-curtain="English" data-curtain-value="en" (событие ig:curtain); меню: .ig-burger[data-menu-toggle] + .ig-menu; IGMotion.toast("…")
- Хаос точек собирается в порядок: <canvas data-chaos>
- Прогресс чтения: <div data-ig-progress><i></i></div>

## Правила

- Только светлые темы. ink максимум одна короткая секция, по умолчанию не использовать.
- На одном экране не больше двух эффектов, привязанных к скроллу.
- data-highlight, data-kinetic, data-hscroll, data-stack по одному разу на страницу.
- Reveal только на заголовках, лидах, карточках, картинках. Основной текст статей не анимировать.
- Документы, уроки, каталоги: только words на заголовках и смена тем секций.
- Цвета внутри секций: var(--ig-bg), var(--ig-fg), var(--ig-muted), var(--ig-line), var(--ig-card).
- Инерционный скролл (html data-ig-smooth) и лоадер выключены по умолчанию, не включать для книг и курсов.
- Иврит: dir="rtl" работает сам. После смены языка вызвать IGMotion.refresh().
- Тексты: без длинных тире, без шаблонных ИИ-оборотов, с юмором. Отзывы только настоящие.