Интерактивные элементы

Сделайте так, чтобы читатели не просто "глотали" текст, а взаимодействовали с ним! Эти блоки заставят вашу аудиторию вовлекаться в процесс чтения.

Переключатель аудитории (AudienceSwitch)

Если вашу статью читают разные группы людей (например, обычные игроки и администраторы), нет смысла заставлять их читать всё подряд. Используйте <AudienceSwitch> и <Audience>, чтобы позволить читателю выбрать, кто он, и показать только актуальный для него текст.

Как писать:

<AudienceSwitch>
  <Audience title="Обычный игрок">
    Вам достаточно просто нажать кнопку "Играть" в лаунчере, и вы автоматически подключитесь к серверу.
  </Audience>
  <Audience title="Администратор">
    Перед входом обязательно проверьте логи сервера и убедитесь, что база данных успешно синхронизирована с веб-частью.
  </Audience>
</AudienceSwitch>

Как выглядит:

Дерево решений (Опросник)

Вы можете создать мини-викторину или алгоритм помощи прямо в статье. Читатель отвечает на вопрос (нажимает кнопку), и перед ним плавно появляется следующий этап.

Как писать:

<DecisionTree initial="start">
  <DecisionStep step="start">
    ## 1. Какую кухню вы предпочитаете?
    <DecisionButton target="italian">Итальянскую</DecisionButton>
    <DecisionButton target="asian">Азиатскую</DecisionButton>
  </DecisionStep>
  
  <DecisionStep step="italian">
    ## 2. Отличный выбор! Готовим пасту?
    <DecisionButton target="finish">Да, давайте рецепт!</DecisionButton>
    <DecisionButton target="start">Нет, хочу поменять выбор</DecisionButton>
  </DecisionStep>

  <DecisionStep step="asian">
    ## 2. Супер! Может быть роллы?
    <DecisionButton target="finish">Да, давайте рецепт!</DecisionButton>
    <DecisionButton target="start">Нет, хочу поменять выбор</DecisionButton>
  </DecisionStep>

  <DecisionStep step="finish">
    ## 3. Рецепт готов!
    Приятного аппетита.
    <DecisionButton target="start">Начать заново</DecisionButton>
  </DecisionStep>
</DecisionTree>

Как выглядит:

Чек-листы

Создавайте списки дел с кликабельными галочками. Читатель может сам отмечать, что он уже выполнил. Если вы хотите, чтобы какая-то галочка стояла изначально и её нельзя было убрать, добавьте defaultChecked={true} и disabled={true}.

Как писать:

<Checklist>
  <ChecklistItem defaultChecked={true} disabled={true}>
    Подготовить сковороду (Обязательно)
  </ChecklistItem>
  <ChecklistItem>
    Купить молоко и яйца
  </ChecklistItem>
  <ChecklistItem>
    Сделать тесто
  </ChecklistItem>
</Checklist>

Как выглядит:

Кнопка копирования (Сниппет)

Если вы указываете короткую ссылку, промокод, IP-адрес или номер телефона, оформите его в виде смарт-кнопки. При клике на неё текст мгновенно скопируется в буфер обмена читателя.

Как писать:

Подарочный промокод на скидку: <Snippet>PANCAKE2026</Snippet>.

Как выглядит: Подарочный промокод на скидку: PANCAKE2026

Информационная карточка при наведении

Избавьте статью от лишней воды. Если вы используете сложный термин, не нужно писать его расшифровку в скобках. Спрячьте её в карточку, которая плавно всплывет, если читатель наведет курсор на это слово. Туда даже можно добавить поясняющую картинку!

Как писать:

Млечный Путь — это <HoverCard title="Галактика" description="Гравитационно-связанная система из звёзд, звёздных скоплений, межзвёздного газа и пыли, тёмной материи, планет." image="/media/tutorial/galactic.jpg">гигантская звездная система</HoverCard>, в которой находится Земля.

Как выглядит: Млечный Путь — это гигантская звездная системаГалактикаГравитационно-связанная система из звёзд, звёздных скоплений, межзвёздного газа и пыли, тёмной материи, планет., в которой находится Земля.

Светящаяся неоновая сетка

Выделите главные преимущества вашего продукта или правила в виде карточек. Их границы элегантно подсвечиваются неоновым светом, который следует за курсором мыши читателя.

Как писать:

<GlowGrid>
  <GlowCard title="Быстро">
    Готовится всего за 15 минут.
  </GlowCard>
  <GlowCard title="Вкусно">
    Идеальный баланс сладости и текстуры.
  </GlowCard>
</GlowGrid>

Как выглядит:

Окно с Параллаксом (Визуальная пауза)

Длинные статьи сильно утомляют читателя. Используйте этот блок на всю ширину страницы, чтобы дать глазам отдохнуть. Картинка внутри него "приклеена" к фону, создавая красивую иллюзию объема при скролле (параллакс-эффект). Внутрь можно вписать красивую цитату или заголовок новой главы.

Как писать:

<ParallaxWindow src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=1200" height="300px">
  ## Новая Эра
  Мы переходим к следующему этапу.
</ParallaxWindow>

Как выглядит:

3D Голографическая Карточка

Выделите что-то по-настоящему особенное. Карточка будет физически наклоняться за мышью и переливаться внутренним светом, словно коллекционный артефакт в видеоигре.

Как писать:

<HoloCard>
  ## Секретный ингредиент
  Это тот самый бабушкин рецепт, который передавался из поколения в поколение.
</HoloCard>

Как выглядит: