Как устроены популярные эффекты в Reels

Большинство популярных эффектов в Reels устроены проще, чем кажется. Внутри каждого лежит стопка слоев (твое видео, текст, иногда вырезанная фигура) и правило, по которому эти слои двигаются на каждом кадре. Субтитры и «зум на слове» опираются на расшифровку с точным временем каждого слова. Текст за спиной, стена обложек и орбита добавляют еще один ингредиент: маску, которая отделяет тебя от фона.

Ниже разберем каждый эффект человеческим языком и заодно поймем, как снимать, чтобы он выглядел чисто. Если идея «видео как код» для тебя новая, начни с нашего объяснения, как делают видео кодом.

Две идеи, на которых держится любой эффект

1. Все вычисляется из номера кадра

Reels с частотой 30 кадров в секунду это просто 30 картинок в секунду. В инструментах вроде Remotion любая анимация считается от текущего номера кадра: «на 12-м кадре заголовок виден на 40%». Remotion прямо не советует использовать обычные CSS-анимации: кадры могут рендериться не по порядку или по несколько раз, и все, что не привязано к номеру кадра, начинает мерцать или ломаться.

Основную работу делают две функции. interpolate() переводит диапазон кадров в диапазон значений (кадры с 0 по 20 превращаются в прозрачность от 0 до 1). spring() дает естественное, чуть пружинящее движение от 0 до 1, тот самый «поп», который ты видишь в субтитрах.

2. Слои складываются как бутерброд

Представь три слоя: фон, то, что ты добавляешь (текст, обложки, фигуры), и ты сверху. Если есть только исходное видео, что-то можно поставить лишь перед собой. Чтобы поставить объект за спину, нужна вырезка человека, и здесь появляется сегментация.

Важно: сегментация это модель, которая помечает каждый пиксель как «человек» или «фон». На выходе получается маска, черно-белая картинка, которая работает как трафарет.

Эффекты по очереди

Кинетическая типографика

Это текст, который двигается со смыслом: слова въезжают в такт, ключевое слово растет, список складывается строка за строкой. Технически каждое слово это отдельный элемент со своей анимацией, которая стартует на пару кадров позже предыдущей (такой сдвиг называют stagger). Код здесь простой. Сложно другое: решить, какие слова двигать и насколько, чтобы текст поддерживал голос, а не спорил с ним.

Субтитры по словам

Сначала звук расшифровывают моделью распознавания речи, которая возвращает время начала и конца каждого слова. В документации Remotion перечислено несколько способов это сделать, от Whisper на твоем компьютере до облачных API. Потом слова группируют в короткие «страницы» по два-четыре слова. Функция Remotion createTikTokStyleCaptions() делает именно это: ты задаешь, сколько миллисекунд речи помещается на одну страницу, а у каждого слова сохраняется свое время.

На экране каждое слово проверяет: «меня сейчас произносят?» и, если да, подсвечивается. Правила дизайна (безопасные зоны, шрифтовые пары, длина строки) собраны в нашем гайде по субтитрам.

Вот упрощенный пример одного слова субтитров в Remotion. Оно «выпрыгивает», когда слово начинается, и становится желтым, пока звучит:

import {interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';

type Token = {text: string; fromMs: number; toMs: number};

export const CaptionWord = ({token}: {token: Token}) => {
  const frame = useCurrentFrame(); // считаем, что компонент стоит в начале таймлайна
  const {fps} = useVideoConfig();
  const startFrame = Math.round((token.fromMs / 1000) * fps);
  const endFrame = Math.round((token.toMs / 1000) * fps);

  // 0 до начала слова, потом пружиной до 1 с легким отскоком
  const pop = spring({frame, fps, delay: startFrame, config: {damping: 12}});
  const scale = interpolate(pop, [0, 1], [0.85, 1]);
  const isSpoken = frame >= startFrame && frame < endFrame;

  return (
    <span
      style={{
        display: 'inline-block',
        whiteSpace: 'pre',
        transform: `scale(${scale})`,
        color: isSpoken ? '#FFD400' : '#FFFFFF',
      }}
    >
      {token.text}
    </span>
  );
};

Если по-простому: переводим время слова из миллисекунд в номер кадра, запускаем с этого кадра пружину и меняем цвет, пока слово звучит. Внутри Sequence счетчик кадров начинается заново с нуля, поэтому в реальном проекте сначала вычитают время начала страницы.

Зум на слове

Та же расшифровка управляет «наездом»: когда звучит ключевое слово, все видео немного увеличивается (например, до 110 или 115%) с пружиной и плавно возвращается. Чтобы не обрезать лицо, зум центрируют на нем, а положение лица находит детектор лиц. Лучше всего это работает на одном-двух словах за ролик. Больше уже похоже на нервного оператора.

Текст за спиной

Это бутерброд в действии: внизу исходный кадр, посередине крупный заголовок, сверху твоя вырезка. Один из вариантов это MediaPipe Image Segmenter от Google: у него есть модель для селфи, которая отделяет человека от фона, и режим для видео, где кадры обрабатываются один за другим. SAM 2 от Meta позволяет один раз кликнуть по объекту и дальше сам отслеживает его по всему видео, а SAM 3 понимает еще и текстовые запросы.

Когда вырезка готова как видео с прозрачностью (альфа-каналом), Remotion может положить ее поверх чего угодно.

Стена обложек

Эффект «Covers wall» заменяет или закрывает стену за тобой сеткой обложек твоих роликов, а ты остаешься впереди. Те же три слоя, только вместо заголовка сетка. Обложки обычно появляются по очереди, иногда медленно дрейфуют, чтобы стена выглядела живой.

Орбита

«Orbit» самый эффектный из набора: обложки облетают тебя, проходят за головой и потом перед плечами. Каждая обложка движется по эллипсу. Ее угол растет с каждым кадром, положение по горизонтали берется из косинуса этого угла, а глубина из синуса. Когда глубина говорит «сзади», обложка рисуется в слое под твоей вырезкой. Когда «спереди», переходит в слой над ней. Сзади обложки становятся чуть меньше и темнее, и это продает иллюзию объема.

Шторка до/после

Две версии одного клипа лежат точно друг над другом: снизу исходник, сверху монтаж. Верхнюю обрезают CSS-фигурой inset(), где отступ справа за секунду-другую уходит со 100% до 0%, а по краю идет тонкая линия. Весь фокус в совпадении: если смонтированная версия обрезана иначе, шторка покажет скачок.

Как снимать, чтобы эффекты выглядели чисто

Плохую маску кодом не исправишь. Несколько привычек делают любой эффект выше лучше:

1. Отойди от стены. Пара шагов расстояния дает модели сегментации четкий контур и оставляет место для текста за спиной.
2. Выбери спокойный контрастный фон. Светлая стена за темными волосами или наоборот. Полки с мелочами путают маску.
3. Свет мягкий, ровный, спереди. При слабом свете появляется шум, а шум заставляет края мерцать.
4. Оставь воздух над головой. Орбите и тексту за спиной нужно пустое место сверху и по бокам.
5. Зафиксируй экспозицию и фокус на телефоне. Скачки яркости меняют маску от кадра к кадру.
6. Говори четко. Чище звук, точнее расшифровка, значит субтитры и зумы попадут в нужное слово.

Совет: сними 10 секунд для проверки и примени эффект до того, как записывать весь ролик. Это гораздо быстрее, чем обнаружить грязную маску после двадцати минут съемки.

Нужно ли писать этот код самому?

Нет. Понимание слоев помогает снимать под эффект и точно его просить, но сам код теперь самая простая часть. AI-ассистенты умеют писать компоненты Remotion по описанию, об этом наш разбор Claude Code. В Reel Maker эффекты Orbit и Covers wall уже встроены: выбираешь стиль, загружаешь видео, говоришь, что хочешь, а слои, тайминг и маска делаются за тебя.

Важной остается человеческая часть: выбрать один эффект, который подходит к мысли, а не пять, которые с ней спорят.

Если хочешь попробовать Orbit и Covers wall на своем видео, вставай в лист ожидания Reel Maker или заходи в наше Telegram-сообщество, где мы первыми показываем новые эффекты.