---
contractVersion: 1
title: Демонстрация движения и глубины
description: Страница Cinematic с прокруткой сцен, появлением элементов, глубиной, наклоном и полным отключением анимации по системной настройке.
language: ru
---

# Движение ведёт рассказ

**Вымышленный пример.** Места, показатели, статусы и выводы на этой странице нужны для демонстрации движка
отчётов. Перед использованием замените их проверенными данными своего проекта.

::::actions{placement="inline"}
::action[Открыть первую сцену]{href="#opening" kind="primary" effect="magnetic"}
::action[Посмотреть ленту изображений]{href="#rail" kind="secondary"}
::action[Проверить режим без движения]{href="#fallback" kind="quiet"}
::::

:::::section{title="Глубина следует за вниманием" id="opening" nav="Глубина" recipe="hero" scene="none" interaction="depth"}
:::lead
При прокрутке меняется взаимное положение изображения и рамки. Мышь или трекпад добавляют глубину, но
читать страницу и переходить по ней можно и без этого эффекта.
:::

![Северное сияние изгибается над тёмным горным хребтом](assets/aurora.jpg)

:::callout{kind="info" title="Двигайте указатель, прокручивайте или просто читайте"}
Пакет задаёт границы эффекта и отвечает за вариант без движения. В исходнике остаётся обычный Markdown.
:::
:::::

:::::section{title="Непрерывная лента остаётся внутри контейнера" id="rail" nav="Лента" recipe="rail" scene="progress"}
::::cards
:::card{title="Минеральный свет"}
![Красная минеральная плоскость, рассечённая чёрными геологическими линиями](assets/gallery-red.jpg)
:::
:::card{title="Ночной рельеф"}
![Тёмный рельеф пересекает мягкий атмосферный свет](assets/terrain.jpg)
:::
:::card{title="Дальний сигнал"}
![Кинематографический горизонт под узкой полосой света](assets/cinematic.jpg)
:::
::::
:::::

:::::section{title="Последовательность упрощает просмотр доказательств" id="sequence" nav="Последовательность" recipe="metrics"}
::::cards
:::card{title="Появление"}
Раздел входит в кадр, когда становится нужен.
:::
:::card{title="Каскад"}
Связанные элементы появляются в авторском порядке.
:::
:::card{title="Прогресс"}
Глубина сцены следует за положением страницы при прокрутке.
:::
:::card{title="Указатель"}
Реакция на мышь или трекпад действует только внутри элемента и обновляется не чаще одного кадра.
:::
::::
:::::

:::::section{title="Эффект не подменяет смысл" id="fallback" nav="Без движения" recipe="evidence" interaction="tilt"}
![Широкий освещённый пейзаж с ясной линией горизонта](assets/terrain.jpg)

:::decision{title="Сохранить всё содержание без движения"}
Когда в системе отключена анимация, изображения, карточки, кнопки и выводы остаются на месте и читаются в
прежнем порядке. Исчезает только движение.
:::

:::popover{title="За что отвечает пакет?" trigger="Посмотреть границу"}
Среда выполнения задаёт время и расстояние, учитывает тип указателя и видимую область страницы, а также
отключает движение по системной настройке. В исходнике выбирается только декларативный тип эффекта.
:::

::::actions{placement="bottom"}
::action[Вернуться к глубине]{href="#opening" kind="primary" effect="magnetic"}
::action[Открыть историю Cinematic]{href="../cinematic-story/index.html" kind="secondary"}
::::
:::::