# Бесплатные шаблоны движения HyperFrames в HTML и GSAP

Получите 65 шаблонов видео HyperFrames для ИИ-чата, устройств, титров и демо. Меняйте HTML и GSAP или редактируйте в Subclip.

Canonical URL: https://www.subclip.app/ru/motion-graphics-templates/hyperframes

Шаблоны HyperFrames представляют собой анимированную графику, написанную в виде простого HTML с приостановленной временной шкалой GSAP. Эта страница предназначена для разработчиков и пользователей AI-агентов, которым нужны видеосцены, которые можно читать и редактировать, как веб-страницу. Он содержит сообщения в социальных сетях, уведомления, потоки чата, региональные карты, диаграммы, нижние трети, нарисованные от руки аннотации и потоки пользовательского интерфейса, и все это с редактируемыми переменными.

## HTML с приостановленной временной шкалой GSAP

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

Редактируемые значения представлены как переменные: имя, дескриптор и количество на последующих наложениях, заголовок, подзаголовок и значения на картах, периоды и серии на Bar Chart Race, а также цвета акцентов на многих других. Измените переменную, и сцена перерисуется с ее помощью. Поскольку исходным кодом является обычный HTML, вы также можете читать его, изменять его стиль с помощью CSS или добавлять элементы так же, как на веб-странице.

Многие шаблоны здесь являются наложениями. Instagram Follow, TikTok Follow, YouTube Lower Third, macOS Notification и Neon Border сохраняют прозрачный фон и располагаются поверх отснятого материала.

## Что включает в себя набор HyperFrames

Анимация для социальных сетей -- сильная сторона. iOS Notification объединяет четыре баннера в вертикальную рамку, X Post Card и Reddit Post Card анимируют лайк или голосование с увеличением счетчика, Comment Cards вводит два комментария, а ChatGPT Exchange и Claude Exchange воспроизводят скриптовый чат помощника в 9:16.

Для данных и мест имеются карты США, Франции, Испании и Индии с редактируемыми значениями регионов, US Flow Map со взвешенными дугами между городами, Bar Chart Race, Minimal Line Graph, Animated Bar и Data Chart. Нарисованные от руки фигуры включают Hand Drawn Scribble, Squiggle Marks, Whiteboard Bulb и Stitched Text Draw. Потоки пользовательского интерфейса включают Settings Toggle, Skeleton Reveal, Swipe Rail и Parallax Zoom.

## Использование шаблонов HyperFrames в Subclip

Все шаблоны HyperFrames бесплатны и предварительно установлены в Subclip, настольном видеоредакторе AI для Mac и Windows. Поместите его на временную шкалу поверх отснятого материала, а затем попросите агента AI изменить его: замените значения карты на ваши продажи по штатам, переключите наложение отслеживания на свой дескриптор или укажите в нижних титров название вашего канала и количество подписчиков. Агент редактирует переменные за вас, а вы экспортируете видео, когда оно будет готово.

## Получение HTML для Claude или Codex

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

Или загрузите zip-архив: index.html, props.json со значениями переменных по умолчанию, README при запуске в проигрывателе HyperFrames, а также файлы AGENTS.md и CLAUDE.md, описывающие, что можно редактировать. Это дает агенту кодирования достаточный контекст для изменения стиля шаблона, добавления сцены или создания нескольких версий с разными данными.

## Шаблонов: 65

- [Subclip Scenic Reel Composer](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/subclip-scenic-reel-composer) (HyperFrames, Ввод в ИИ-чате): Анимируйте стеклянный запрос и вращающуюся фотогалерею в этом шаблоне видео.
- [Subclip Momentum Growth Headline](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/subclip-momentum-growth-headline) (HyperFrames, Титры): Анимируйте печатный заголовок с растущим графиком в этом шаблоне видео.
- [Subclip Guided Word Spotlight](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/subclip-guided-word-spotlight) (HyperFrames, Титры): Анимируйте пословный текст с движением камеры в этом шаблоне видео.
- [Subclip Hinged Laptop Showcase](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/subclip-hinged-laptop-showcase) (HyperFrames, Экраны и устройства): Анимируйте раскрывающийся ноутбук с приближением экрана в этом шаблоне видео.
- [Subclip Aurora Brand Signature](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/subclip-aurora-brand-signature) (HyperFrames, Титры): Анимируйте логотип и название на мягких градиентах в этом шаблоне видео.
- [Subclip Creative Brief Launcher](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/subclip-creative-brief-launcher) (HyperFrames, Ввод в ИИ-чате): Анимируйте ввод задания с подтверждением отправки в этом шаблоне видео.
- [Subclip Panorama Device Gallery](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/subclip-panorama-device-gallery) (HyperFrames, Экраны и устройства): Анимируйте четыре телефона в перспективе и заголовок в этом шаблоне видео.
- [Subclip Mobile Action Spotlight](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/subclip-mobile-action-spotlight) (HyperFrames, Экраны и устройства): Анимируйте крупный план кнопки телефона и финальные титры в этом шаблоне видео.
- [Subclip Pocket AI Composer](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/subclip-pocket-ai-composer) (HyperFrames, Ввод в ИИ-чате): Анимируйте мобильный ИИ-чат с приближением кнопки отправки в этом шаблоне видео.
- [Subclip Release-to-Video Assistant](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/subclip-release-to-video-assistant) (HyperFrames, Ввод в ИИ-чате): Анимируйте ответ ИИ с таблицей результатов видео в этом шаблоне видео.
- [Subclip Connected Creative Workspace](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/subclip-connected-creative-workspace) (HyperFrames, Ввод в ИИ-чате): Анимируйте подключение файлов и рабочее пространство в этом шаблоне видео.
- [Subclip Intent Search Animation](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/subclip-intent-search-animation) (HyperFrames, Ввод в ИИ-чате): Анимируйте выделение и повторный ввод поискового запроса в этом шаблоне видео.
- [Subclip Production Progress Tracker](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/subclip-production-progress-tracker) (HyperFrames, Ввод в ИИ-чате): Анимируйте список задач с индикаторами и отметками в этом шаблоне видео.
- [iOS Notification](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/notification-cascade) (HyperFrames, Соцсети и чат): Вертикальное наложение уведомлений, в котором четыре баннера в стиле iPhone складываются один за другим, а затем исчезают, образуя заключительный заголовок и карточку с логотипом.
- [Instant Carousel](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/share-sheet-carousel) (HyperFrames, Соцсети и чат): Вертикальная карусель изображений, которая циклически перемещает четыре фотографии внутри белой закругленной карточки с мягкой размытой копией текущего изображения, заполняющей фон.
- [macOS Notification](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/macos-notification) (HyperFrames, Соцсети и чат): Широкоэкранное наложение, в котором баннеры уведомлений в стиле macOS появляются по одному в правом верхнем углу и складываются в столбец.
- [Instagram Follow](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/instagram-follow) (HyperFrames, Соцсети и чат): Прозрачное вертикальное наложение с компактной табличкой профиля, кнопка "Подписаться" которой переключается на "Подписка", призванная предложить зрителям подписаться на вашу учетную запись.
- [TikTok Follow](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/tiktok-follow) (HyperFrames, Соцсети и чат): Прозрачное наложение профиля 9:16, где розово-красная кнопка "Подписаться" переходит в состояние "Подписка" с галочкой.
- [X Post Card](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/x-post) (HyperFrames, Соцсети и чат): Широкоэкранная социальная открытка в темной теме, на которой отображается профиль, текст публикации и строка действий, а затем анимируется лайк с увеличением количества.
- [Reddit Post Card](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/reddit-post) (HyperFrames, Соцсети и чат): Широкоэкранная открытка сообщества со строкой субреддита, жирным заголовком и основным текстом, заканчивающаяся голосованием "за", которое поднимает оценку.
- [Thread Message](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/thread-message-stack) (HyperFrames, Соцсети и чат): Широкоэкранный текстовый разговор, в котором серые входящие и синие исходящие пузыри появляются один за другим на мягком, размытом цветовом поле.
- [Comment Cards](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/yt-comment-card) (HyperFrames, Соцсети и чат): Широкоэкранное наложение, на котором последовательно появляются два комментария зрителя, каждый из которых имеет инициалы аватара, имя пользователя, временную метку, напечатанный текст и строку реакции.
- [YouTube Lower Third](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/yt-lower-third) (HyperFrames, Плашки и призывы к действию): Прозрачная широкоэкранная нижняя треть экрана с аватаром и названием канала рядом с кнопкой "Подписаться", которая переходит в состояние "Подписка".
- [Grid Pixelate](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/grid-pixelate) (HyperFrames, Переходы): Переход пиксельной сетки, при котором квадратные плитки увеличиваются, покрывая весь кадр, а затем сжимаются, оставляя чистый момент для перехода между сценами.
- [Hand Drawn Scribble](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/hw-callout-circle) (HyperFrames, Аннотации): Нарисованная от руки выноска, в которой шаткий белый эллипс окружает объект, его заполняет штриховка маркером, а изогнутый соединитель ведет к рукописной метке.
- [Squiggle Marks](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/hw-underline) (HyperFrames, Аннотации): Рукописная текстовая аннотация, в которой три строки по очереди отмечены волнистым подчеркиванием, двойным перечеркиванием и изогнутой скобкой.
- [Multiplayer Cursor](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/multiplayer-cursors) (HyperFrames, Клики): Анимация для совместной работы, в которой от двух до шести цветных курсоров с метками имен скользят по заданным траекториям и собираются вокруг светящегося кольца фокусировки.
- [Parallax Device Dive](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/parallax-device-dive) (HyperFrames, Экраны и устройства): Анимация макета телефона, в которой устройство, показывающее панель управления, поднимается, удерживается, а затем масштабируется, заполняя кадр по мере разделения слоев пользовательского интерфейса.
- [Parallax Unzoom](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/parallax-unzoom) (HyperFrames, Титры): Откатный переход, при котором полноэкранная карточка сжимается в центр сетки три на три, когда вокруг нее перемещаются восемь цветных соседей.
- [Parallax Zoom](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/parallax-zoom) (HyperFrames, Титры): Переход масштабирования, который начинается с сетки цветных карточек размером три на три и продвигается к центральной карточке, пока не заполнит кадр.
- [Settings Toggle](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/settings-toggle-flow) (HyperFrames, Интерфейс): Анимация панели настроек, в которой на белой карточке появляются три строки с метками, а их переключатели включаются или выключаются.
- [Store Badge](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/store-badge-lockup) (HyperFrames, Плашки и призывы к действию): Конечная карточка загрузки приложения, где сначала отображается большой заголовок, а под ним -- значки в стиле App Store и Google Play.
- [Neon Border](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/lt-neon-border) (HyperFrames, Плашки и призывы к действию): Прозрачная нижняя треть с темной визитной карточкой, границу которой очерчивают две противоположные неоновые дуги с мягким свечением.
- [Skeleton Reveal](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/skeleton-reveal) (HyperFrames, Интерфейс): Короткая анимация состояния загрузки, в которой мерцающий заполнитель скелета переходит в карточку с жирным названием и линией детализации.
- [Staggered Fade Up](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/staggered-fade-up) (HyperFrames, Титры): Простой пословный текст показывает, где каждое слово появляется, слегка увеличивается и перемещается на небольшое расстояние до своего последнего места.
- [Text Stagger](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/text-stagger) (HyperFrames, Титры): Заголовок в одну строку, который поднимается и масштабируется в шахматном порядке, а затем покрывается одним проходом цветного мерцания по тексту.
- [Intro Video](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/intro-video) (HyperFrames, Демо продуктов): Демоверсия продукта по сценарию, которая открывается кинетическим текстом, вводит подсказку в поле ввода помощника, нажимает кнопку "Отправить" и открывает карточку с результатами проекта.
- [ChatGPT Exchange](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/chatgpt-exchange) (HyperFrames, Ввод в ИИ-чате): Вертикальная анимация чата в темном режиме, в которой вводится вопрос, возвращается ответ с таблицей рабочего процесса из четырех строк, а представление прокручивается для его чтения.
- [Claude Exchange](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/claude-exchange) (HyperFrames, Ввод в ИИ-чате): Вертикальная теплая темная анимация чата, в которой набранный вопрос ведет к шагам планирования и поиска, а длинный ответ с засечками транслируется и прокручивается.
- [Gallery Tunnel](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/gallery-tunnel) (HyperFrames, Демо продуктов): Перспективный туннель, в котором яркие цветные панели и тонкие линии сетки образуют коридор, ведущий к центральной точке схода.
- [Chat Thread 2](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/chat-thread-2) (HyperFrames, Соцсети и чат): Вертикальный текстовый разговор в телефонной рамке с напечатанными ответами, предварительным просмотром ссылки, реакциями в виде смайликов и уведомлениями о прочтении, который заканчивается на закрывающей карточке.
- [Minimal Line Graph](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/minimal-line-graph) (HyperFrames, Графики): Чистая линейная диаграмма из двух рядов на прозрачном фоне с метками значений в каждой точке, метками месяцев внизу и небольшой легендой.
- [Spain Map](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/spain-map) (HyperFrames, Карты): Анимированная карта регионов Испании, раскрашенная по значениям, включая Балеарские и Канарские острова, с заголовком, подзаголовком и цветовой легендой.
- [India Map](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/india-map) (HyperFrames, Карты): 12-секундная карта Индии, на которой каждый штат и союзная территория раскрашены по значениям, с надписями, заголовком, подзаголовком и легендой от низкого до высокого.
- [France Map](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/france-map) (HyperFrames, Карты): Картографическая карта метрополии Франции, на которой каждый регион затенен вашими значениями, названиями регионов, заголовком, подзаголовком и цветовой шкалой.
- [US Map](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/us-map) (HyperFrames, Карты): Карта штатов США, на которой последовательно показаны регионы и раскрашен каждый штат по значению, включая Аляску, Гавайи, названия штатов и цветовую легенду.
- [US Flow Map](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/us-flow-map) (HyperFrames, Карты): Темная карта США, на которой изогнутые синие дуги соединяют крупные города, а вдоль них проходят маленькие точки, показывающие потоки транспорта из города в город.
- [ChatGPT Chat](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/ai-chat-reveal) (HyperFrames, Ввод в ИИ-чате): Анимация чата помощника в 9:16 с напечатанным вопросом, потоковым ответом с маркерами и заключительным призывом к действию.
- [Animated Bar](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/animated-bar) (HyperFrames, Графики): Компактный монохромный график с растущими полосами, плавной кривой тренда и большой выноской в процентах в правом верхнем углу.
- [Bar Chart Race](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/bar-chart-race) (HyperFrames, Графики): Ранжированная горизонтальная гистограмма, которая анимируется по периодам времени, с обгонами, выделенным лидером, осью масштабирования и счетчиком периодов.
- [Data Chart](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/data-chart) (HyperFrames, Графики): Редакционная комбинированная диаграмма, в которой столбцы ежемесячных доходов сочетаются с линией коэффициента конверсии, метками значений, легендой и примечанием к источнику.
- [Camera Follow Captions](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/caption-camera-follow) (HyperFrames, Титры): Кинетические субтитры, в которых каждое новое слово попадает в растущий блок жирных заглавных букв, а камера отодвигается, чтобы показать все предложение.
- [Whiteboard Bulb](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/whiteboard-bulb) (HyperFrames, Аннотации): Эскиз лампочки в стиле доски, нарисованный штрих за штрихом движущейся ручкой, с цветным знаком акцента и подписью под ним.
- [Whiteboard Rocket](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/whiteboard-rocket) (HyperFrames, Аннотации): Нарисованный пером эскиз ракеты с плавниками, линиями выхлопа и цветным окном, за которым следует короткая надпись о запуске на бумажном фоне.
- [Chat Thread](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/chat-thread) (HyperFrames, Соцсети и чат): Ветка текстовых сообщений в темном режиме продолжительностью 9:16 с входящим и исходящим всплывающим окном, точками для ввода, карточкой предварительного просмотра ссылки и уведомлениями о прочтении.
- [CTA Lockup](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/cta-lockup) (HyperFrames, Плашки и призывы к действию): Закрывающий экран призыва к действию с большим заголовком, кнопкой в форме таблетки и небольшой строкой вспомогательного текста на черном фоне.
- [Notes Typing](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/notes-typing) (HyperFrames, Интерфейс): Анимация телефонных заметок продолжительностью 9:16, в которой с помощью экранной клавиатуры вводится заголовок и семь строк, а затем заканчивается карточка с контрольным списком с вашим брендом.
- [Outline Draw](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/outline-draw) (HyperFrames, Аннотации): Тонкий контур с закругленными углами, который рисуется по часовой стрелке с прозрачным центром и используется для обрамления и выделения части вашего видео.
- [Oversized Cursor](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/oversized-cursor) (HyperFrames, Клики): Большой курсор-стрелка, который перемещается к кнопке, щелкает ее, в результате чего она реагирует галочкой, а затем выходит из кадра.
- [Social Proof Card](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/social-proof-card) (HyperFrames, Социальное доказательство): Завершающая карточка кремового цвета с названием бренда, строкой с пятью звездами, цитатой клиента, тремя значками функций и кнопкой призыва к действию.
- [Stitched Text Draw](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/stitched-text-draw) (HyperFrames, Аннотации): Слово в верхнем регистре, нарисованное пунктирными нитками, с отверстиями для иглы и движущейся иглой на черном фоне.
- [Swipe Rail](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/swipe-rail) (HyperFrames, Переходы): Горизонтальная полоса пронумерованных карт, которая быстро перемещается и прикрепляет одну карту к центру на темно-синем фоне.
- [Ask Subclip](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/ask-subclip) (HyperFrames, Ввод в ИИ-чате): Промо-сцена видеоредактора с искусственным интеллектом, в которой в поле под заголовком вводится запрос, за которым следует результат и закрывающая строка.
- [Build console](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/build-console) (HyperFrames, Интерфейс): Темное окно терминала, в котором команда рендеринга проходит в несколько этапов, с галочками, индикатором выполнения и значком готовности.
- [Spatial deck](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/spatial-deck) (HyperFrames, Демо продуктов): Последовательность бирюзовых пронумерованных карточек, перемещающихся в многоуровневой трехмерной перспективе, каждая из которых содержит название шага и краткое описание.

## Еще: Бесплатные шаблоны движения HyperFrames в HTML и GSAP

- [HyperFrames: Титры](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/text-animations)
- [HyperFrames: Экраны и устройства](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/screen-device-animations)
- [HyperFrames: Графики](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/animated-charts)
- [HyperFrames: Ввод в ИИ-чате](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/ai-chat-animations)
- [HyperFrames: Карты](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/animated-maps)
- [HyperFrames: Соцсети и чат](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/social-media-animations)
- [HyperFrames: Плашки и призывы к действию](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/lower-thirds)
- [HyperFrames: Аннотации](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/hand-drawn-annotations)
- [HyperFrames: Интерфейс](https://www.subclip.app/ru/motion-graphics-templates/hyperframes/ui-animations)