Могут ли HyperFrames заменить After Effects? Я протестировал свои собственные видео

Полезным первым проектом в HyperFrames является краткое объяснение, которое вы уже записали. Сохраните голос, добавьте записи экрана или изображения, которые его поддерживают, и попросите вашего кодирующего агента создать графику вокруг сказанного. В конце у вас должен получиться редактируемый монтаж и экспортированный клип, который вы сможете сравнить с исходным материалом.

Это также управляемый способ сравнить HyperFrames с After Effects. Используйте те же исходные материалы и конкретную задачу редактирования: пять проектных карточек, которые появляются при их назывании, или диаграмму, объясняющую, какой инструмент выполняет какую работу. Быстрый рендер мало что скажет, если зритель не сможет следить за объяснением.

Примеры работы здесь взяты из двух тестов Mantis: 25-секундной реконструкции существующей последовательности Sol против Astra и примерно 21-секундного объяснения рабочего процесса игры Opus/Unreal. Они показывают процесс построения и проверки, включая исправления. Примеры команд ниже проверены по текущей документации HyperFrames; они служат руководством по настройке, а не утверждением, что для этой статьи был создан новый монтаж.

Перед началом: выберите одно объяснение и соберите его входные данные

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

Для воссоздания соберите оригинальную запись ведущего, её озвучивание, отснятый материал проекта и имеющийся готовый монтаж. Готовый монтаж служит эталоном для сравнения. Отдельные записи являются материалом, из которого строится новая композиция. Воспроизведение плоского готового видео в проигрывателе сохранит его внешний вид, но не даст редактируемых карточек проекта или меток.

Для нового объяснения сначала соберите доказательства: соответствующую запись приложения, созданное художественное произведение, результат внутри целевого приложения и любые метки, необходимые для их связывания. Сохраняйте оригинальные имена файлов и отмечайте, какая часть каждой записи полезна. Папка с слабо названными видео облегчает агенту выбор визуально правдоподобного, но не относящегося к делу момента.

Используйте короткую подготовительную таблицу:

Подсказка для рассказчика	Что должен видеть зритель	Источник для предоставления	Проверить
Название проекта	Его карточка и узнаваемый результат	Запись этого проекта	Правильный проект появляется в момент озвучки
Объясняется настройка модели	Ярлыки плюс соответствующие предпросмотры	Захват настройки и кадры проекта	Ярлыки остаются читаемыми, пока перемещаются предпросмотры
Объясняется роль инструмента	Инструмент и его результат	Захват приложения плюс полученный ресурс	Связь становится явной
Обсуждается деталь	Детальный крупный план этой детали	Оригинальный захват высокого разрешения	Кадрирование сохраняет доказательства

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

Решите, будете ли вы сохранять существующую звуковую дорожку. В обоих исходных тестах сохранялась записанная повествовательная дорожка и использовались существующие материалы. Второй тест не требовал ни сгенерированного ведущего, ни замены озвучки. Нет причины добавлять что-либо только чтобы использовать инструмент AI для редактирования.

Настройте локальную композицию, которую агент сможет редактировать

Для локальной работы HyperFrames требуется Node.js версии 22 или выше и FFmpeg. Вам также нужна среда AI программирования, которая может читать файлы проекта и навыки HyperFrames. Проверьте зависимости в вашем терминале:

node --version
ffmpeg -version

С быстрому старту Anthropic документирует эти предварительные требования. Если какая-либо зависимость отсутствует, используйте обычный способ установки на вашей платформе, затем повторите проверку версии. Эти проверки устанавливают наличие компонентов, а не готовность конкретного проекта к рендерингу.

Создайте отдельную директорию проекта и установите навыки для вашей среды программирования:

npx hyperframes навыки
npx hyperframes init narrated-clip
cd narrated-clip

Текущий Руководство по HyperFrames CLI документирует создание проекта и цикл редактирования/проверки/рендеринга. Следуйте любым подсказкам в вашей установленной версии. Для опций установленной версии используйте npx hyperframes init --help. Установщик навыков задокументирован в справочнике по каркасу проекта.

HyperFrames хранит композицию в виде кода HTML, CSS и анимации. В своей текущей авторской конвенции, index.html является корнем, сцены находятся под compositions/, а локальные медиа находятся под assets/Агенту необходимо загрузить навык авторинга HyperFrames перед изменением этих файлов. Он содержит правила тайминга и работы с медиа, о которых обычный генератор веб-страниц не будет знать. См. также официальный навык авторства.

Практическое отличие от обычного веб-сайта заключается во времени. У карточки должен быть определённый вход, видимая продолжительность и выход; рендереру должна быть предоставлена возможность перемотки к определённому кадру и получения ожидаемого состояния. Случайное движение, контент из сети в реальном времени или таймер, который срабатывает во время воспроизведения, могут нарушить эти ожидания. Позвольте агенту использовать соглашения временной шкалы фреймворка, вместо того чтобы импровизировать анимацию в браузере, которая работает только при воспроизведении с начала.

Тесты Mantis использовали Codex с навыком HyperFrames и локальный просмотр в браузере. Новые элементы управления рисованием и комментированием в настольном ассистенте явно не тестировались. Вы можете оценивать работу с файлами, не рассматривая эти отдельные элементы управления как демонстрируемую функцию этих тестов.

Дайте агенту краткое задание по времени, затем просмотрите один проход

Опишите желаемое объяснение перед запросом анимации. Полезная краткая информация указывает исходную запись, контент, который должен оставаться редактируемым, и то, что зритель должен понять. Например:

Создайте краткое объяснение вокруг этого повествования. Сохраняйте его формулировки и время. Показывайте каждую карточку проекта, когда произносится её название, используя предоставленные материалы для этого проекта. Сохраняйте метки редактируемыми. Обрежьте записи до соответствующего результата и держите вставку ведущего свободной от меток. Покажите мне композицию перед финальным экспортом.

Это адаптированное исходное задание, а не точный запрос, использованный в источнике. Замените общие ссылки на свои имена файлов и измеренные времена подсказок. Если вы хотите точную реконструкцию, предоставьте старый экспорт в качестве справочного материала и укажите детали, которые должны совпадать: шрифт, порядок карточек, стартовые кадры предпросмотра, интервалы и время раскрытия.

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

В тесте Sol/Astra восстановленная последовательность сохранила структуру из пяти проектов, демонстрацию гонки и графику настройки Codex. Она сохранила повествование и редактируемый текст и графику. Шрифт отличался, а некоторые движущиеся превью начинались на других кадрах. Это конкретные результаты проверки: приемлемо для нового объяснения, но не завершено, если задание требует точного визуального соответствия.

Используйте отдельную обратную связь для содержания и времени. «Используйте запись с механических часов для этой карточки» исправляет проблему выбора источника. «Показывать карточку при начале названия проекта» исправляет синхронизацию. «Совпадение с эталонным шрифтом» исправляет визуальную согласованность. Объединение всех трёх в «сделать ближе» затрудняет оценку следующей редакции.

Стройте диаграммы вокруг порядка объяснения

Диаграмма работает лучше всего, когда отвечает на вопрос, уже возникающий в повествовании. Во втором тесте этот вопрос заключался в том, как Opus, Cursor, Blender, Unreal Engine и Higgsfield связаны между собой. Показывать все пять названий сразу означало бы, что зрителю придется разбирать ещё один список, слушая.

Полезная последовательность заключалась в том, чтобы сначала установить координатора, а затем показать инструменты и их результаты. Opus в Cursor координировал работу; Blender создавал геометрию; Unreal собирал игру; Higgsfield предоставлял художественные материалы. В композиции использовались реальные записи разговоров и приложений, поэтому диаграмма связывала ярлыки с доказательствами, а не полагалась на общие значки.

Для объяснения вашего собственного рабочего процесса, напишите одно простое предложение для каждой связи: «Этот инструмент создаёт этот элемент, который используется здесь». Затем решите, когда эта связь должна появляться. Держите координатор видимым достаточно долго, чтобы последующие ветви имели ясного родителя. Зрителю не нужно помнить узел, который исчез до появления его результата.

После первого прохода наблюдайте без паузы. Если вы понимаете диаграмму только при осмотре неподвижного изображения, она может быть слишком плотной или слишком быстрой. Уменьшите конкурирующее движение, удерживайте связь дольше или разделите объяснение на две сцены. Источник поддерживает одну короткую последовательность диаграмм; полный эпизод потребует такого же обзора в нескольких сценах и переходах.

Устраните проблемы с размещением, кадрированием и выбором источника

Использовать npx hyperframes lint для структурной обратной связи, пока агент создаёт композицию. После того как редактирование будет готово, выполните полную проверку и просмотрите снимки в каталоге проекта:

npx hyperframes проверка --json
npx hyperframes снимок --обзор

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

Автоматические проверки полезны для переполнения и контраста. Они не могут определить, является ли запись экрана правильным доказательством для предложения. Исходные тесты требовали оба типа проверки: образец настройки имел обрезанные субтитры и плохой контраст текста, тогда как клипы реального проекта требовали более точного кадрирования экрана и отрегулированного вставки ведущего.

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

Проверьте изображение с ведущим отдельно. Оно должно оставлять видимыми доказательства и подписи на протяжении всего материала, включая появление новых карточек. Оцените композицию в том размере, в котором люди будут её фактически смотреть. Подпись, которая помещается в рамку на большом мониторе, может быть нечитаемой на телефоне.

Когда субтитры обрезаются, исправьте размер, перенос строк или доступное пространство. Когда контраст низкий, измените соотношение переднего и заднего плана. Когда появляется неправильный видеоматериал, замените выбранный источник. Это разные ошибки, и одна просьба «улучшить макет» может оставить настоящую проблему нетронутой.

Предварительный просмотр, экспорт и проверка экспортированного файла

После того как проверки и просмотр отдельных кадров будут удовлетворительными, запустите предварительный просмотр и используйте URL проекта, который он выводит:

npx hyperframes предварительный просмотр

Воспроизведите весь фрагмент с звуком. Вы можете продолжить редактирование того же проекта в настольном приложении HyperFrames, если предпочитаете; тесты источника использовали предварительный просмотр в браузере. Сохраняйте ясное различие при сравнении вашей собственной настройки с записанными результатами.

После утверждения этого предварительного просмотра, рендерьте MP4:

npx hyperframes рендер --output narrated-clip.mp4

С руководство по рендерингу документирует эту базовую команду. Установите предназначенное разрешение и частоту кадров в композиции и убедитесь, что выходные данные соответствуют им. Исходные клипы были экспортированы в 1080p и 30 fps; эти измеренные выходные параметры не гарантируют настройки по умолчанию для каждого проекта.

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

Проверки команды не выявили заметного смещения аудио в двух протестированных экспортируемых файлах. Это важно, потому что в одном из предыдущих эпизодов After Effects потребовалась корректировка смещения аудио. Это устанавливает результат для этих файлов, а не постоянный иммунитет к ошибкам синхронизации.

Сравните всю работу по редактированию перед изменением рабочих процессов.

Записывайте четыре раза отдельно: подготовка входных данных, построение сцен, просмотр и исправления, и экспорт. Примерно минутные значения HyperFrames в источнике относятся к локальному экспорту двух коротких клипов на тестовом Mac. Они не включают работу до рендеринга.

Рон также описал, что выполнение заданий в After Effects занимало, по опыту команды, как минимум около получаса. Объемы работ не совпадали, поэтому эти наблюдения не могут подтвердить утверждение о тридцатикратном ускорении полного эпизода. Сравните эквивалентные фрагменты с одинаковым требуемым завершением, затем учтите время, необходимое для внесения последующей правки.

Прежде чем называть проект повторно используемым, измените одну метку и один сигнал. Можете ли вы найти редактируемый элемент, внести изменения без пересборки несвязанных сцен и экспортировать правильную версию? Это проверяет пользу, которую вы хотели получить от общего проекта. Сохранение только MP4 теряет эту часть результата; сохраните композицию, медиа, шрифты и brief вместе.

Ранее выполненная работа в After Effects также использовала стрелки и контуры для объяснения механических часов, а также скриншоты с доказательствами и анимированные выделения. Она всё ещё требовала редакционных исправлений: отделения изображений от их подписей, корректировки появления элементов и исправления смещения звука при экспорте Dots. Учтите эти требования к проверке для любого инструмента.

After Effects оставался установленным Mantis способом создания полных эпизодов. Команда уже использовала его для почти семиминутного сравнения Sol и почти шестиминутного эпизода Dots, а также накопила шаблоны Envato и визуальные инструкции. Эти ссылки уменьшают объём работы по передаче желаемого стиля. HyperFrames также может выиграть от используемых повторно ссылок, но этот тест не заменил всю библиотеку.

Используйте свой первый короткий клип, чтобы определить, где HyperFrames займет место: это может быть краткое объяснение по времени, редактируемая схема или раздел, собранный из существующих записей. Расширяйте его, когда эта работа пройдет ревизии и проверку на экспорт. Ваш следующий этап — надежный раздел эпизода с читаемыми доказательствами и правильным звуком, который вы все еще сможете редактировать завтра.