Как это Карточки Стопка Лента Подключить
Живой слой дизайн-системы · 20 эффектов · 2 файла · 0 зависимостей

Живой слой

Страница отвечает на скролл и курсор. Всё, что вы видите ниже, включается одним атрибутом в разметке.

Поводите мышью по заголовку: data-kinetic Наведите, чтобы перемешать буквы ↗
Листайте
(01) data-section-theme="paper"

Этот абзац загорается слово за словом, пока вы прокручиваете страницу. Фон уже сменился с кремового на светлый: каждая секция задаёт свою тему, и страница плавно перекрашивается.

data-reveal="clip" + canvas data-chaos
20

эффектов в наборе

5

светлых тем секций

13

карточек с примерами

0

внешних библиотек

Цифры досчитываются при появлении (data-count), карточки статистики въезжают по очереди (data-reveal="stagger"), картинка слева открылась шторкой, а точки в ней собираются в порядок.

(02) data-section-theme="butter"

Карточки, которые замечают курсор

data-tilt·data-cursor

Наклон
и пятно

Карточка слегка поворачивается за мышью, под курсором идёт тёплое пятно, а сам курсор превращается в подпись.

Стрелка уезжает при наведении ↗
canvas data-chaos

Хаос
в порядок

Наведите: точки соберутся в кольца. Без мыши это происходит само каждые 4 секунды.

data-reveal="up"·--d

Въезд с задержкой

wordscharsupleftclipstaggerzoom
data-magnetic

Магнитные кнопки

Кнопка внизу страницы тянется за курсором. Только для главных призывов.

(03) data-stack

Карточки стопкой

01cream
прилипает

Карточка прилипает к верху

Каждая следующая наезжает сверху со сдвигом 16 px.

02butter
уходит

Предыдущая уходит в глубину

Слегка уменьшается и тонет в цвете фона страницы.

03ink
плывёт

Большое слово плывёт вбок

Курсивное слово на фоне карточки: data-stack-word.

04yellow
финал

От трёх до шести карточек

Больше утомляет. На телефоне эффект сохраняется.

(04) data-hscroll

Лента едет вбок

01
шаг
Подключите CSS

Базовые токены и стили живого слоя.

02
шаг
Подключите JS

Один файл, запускается сам.

03
шаг
Темы секций

data-section-theme на каждой секции.

04
шаг
Въезд заголовков

data-reveal="words" и один mark.

05
шаг
Один большой эффект

Стопка или лента, но не всё сразу.

06
шаг
Проверьте телефон

Ниже 900 px лента становится списком.

начало
готово
Темы ✦ Reveal ✦ Стопка ✦ Лента ✦ Курсор ✦
крутите быстрее ✦ строка наклонится ✦ и разгонится ✦
(05) data-carousel
Двигается то, что важно. Остальное стоит спокойно и не мешает читать.
Принцип 01дозировка
Без JavaScript страница целая и читаемая. Анимация украшает, а не прячет.
Принцип 02надёжность
Кто попросил систему меньше двигаться, тот получает спокойную страницу.
Принцип 03доступность
01 / 03
(06) data-reveal="stagger"

Каждый эффект отдельно

(07) data-section-theme="sun"

Подключите

<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>

Три строки в <head>, дальше только атрибуты. Правила для ИИ-агентов лежат в llms.txt.