# HTML 和 GSAP 格式的免费 HyperFrames 运动模板

获取65个免费HyperFrames视频模板，用于AI聊天、设备、标题、图表和产品演示。自定义HTML和GSAP，或在Subclip中编辑。

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

HyperFrames 模板是以纯 HTML 编写的动态图形，带有暂停的 GSAP 时间线。此页面适用于希望可以像网页一样阅读和编辑视频场景的开发人员和 AI 代理用户。它包含社交媒体帖子、通知、聊天线程、区域地图、图表、字幕条、手绘注释和 UI 流程，所有这些都带有可编辑变量。

## 带有暂停 GSAP 时间线的 HTML

每个 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。 UI 流包括 Settings Toggle、Skeleton Reveal、Swipe Rail 和 Parallax Zoom。

## 在 Subclip 中使用 HyperFrames 模板

所有 HyperFrames 模板都是免费的，并预装在 Subclip（适用于 Mac 和 Windows 的桌面 AI 视频编辑器）中。将一个放在时间轴上的镜头上，然后要求 AI 代理更改它：将地图值替换为按州划分的销售额，将跟随叠加层切换到您的手柄，或者在字幕条处提供您的频道名称和订阅者数量。代理会为您编辑变量，并在视频准备好后导出视频。

## 获取 Claude 或 Codex 的 HTML

目前的HyperFrames模板均带有代码包，免费登录后即可使用。复制带有提示的代码，将完整的 HTML 和代理就绪提示放在剪贴板上，然后将其粘贴到 Claude 或 Codex 中并说出要更改的内容。提示列出了变量，因此代理知道您的文本、颜色和数据的去向。

或者下载 zip：index.html、具有默认变量值的 props.json、在 HyperFrames 播放器中运行时的 README，以及描述可编辑内容的 AGENTS.md 和 CLAUDE.md 文件。这为编码代理提供了足够的上下文来重新设计模板、添加场景或使用不同数据生成多个版本。

## 65 个模板

- [Subclip Scenic Reel Composer](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/subclip-scenic-reel-composer) (HyperFrames, AI聊天输入): 此视频模板展示玻璃输入框与旋转照片图库。
- [Subclip Momentum Growth Headline](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/subclip-momentum-growth-headline) (HyperFrames, 标题): 此视频模板展示逐字输入的标题与增长图表。
- [Subclip Guided Word Spotlight](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/subclip-guided-word-spotlight) (HyperFrames, 标题): 此视频模板展示镜头跟随的逐词文字。
- [Subclip Hinged Laptop Showcase](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/subclip-hinged-laptop-showcase) (HyperFrames, 屏幕与设备): 此视频模板展示开合笔记本电脑与屏幕缩放。
- [Subclip Aurora Brand Signature](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/subclip-aurora-brand-signature) (HyperFrames, 标题): 此视频模板展示柔和渐变上的标志与品牌文字。
- [Subclip Creative Brief Launcher](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/subclip-creative-brief-launcher) (HyperFrames, AI聊天输入): 此视频模板展示创意需求输入与发送确认。
- [Subclip Panorama Device Gallery](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/subclip-panorama-device-gallery) (HyperFrames, 屏幕与设备): 此视频模板展示四个透视手机画面与产品标题。
- [Subclip Mobile Action Spotlight](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/subclip-mobile-action-spotlight) (HyperFrames, 屏幕与设备): 此视频模板展示手机按钮特写与结尾标题。
- [Subclip Pocket AI Composer](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/subclip-pocket-ai-composer) (HyperFrames, AI聊天输入): 此视频模板展示镜头拉近发送按钮的移动AI输入框。
- [Subclip Release-to-Video Assistant](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/subclip-release-to-video-assistant) (HyperFrames, AI聊天输入): 此视频模板展示带视频结果表格的AI回复。
- [Subclip Connected Creative Workspace](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/subclip-connected-creative-workspace) (HyperFrames, AI聊天输入): 此视频模板展示素材连接与创意工作界面。
- [Subclip Intent Search Animation](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/subclip-intent-search-animation) (HyperFrames, AI聊天输入): 此视频模板展示选中并重新输入的搜索词。
- [Subclip Production Progress Tracker](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/subclip-production-progress-tracker) (HyperFrames, AI聊天输入): 此视频模板展示带进度指示与完成标记的任务列表。
- [iOS Notification](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/notification-cascade) (HyperFrames, 社交与聊天): 垂直通知叠加层，其中四个 iPhone 风格的横幅依次堆叠，然后清除为结束标题和徽标卡。
- [Instant Carousel](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/share-sheet-carousel) (HyperFrames, 社交与聊天): 垂直图像轮播，在白色圆角卡片内循环四张照片，并填充当前图像的柔和模糊副本。
- [macOS Notification](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/macos-notification) (HyperFrames, 社交与聊天): 一种宽屏叠加层，其中 macOS 风格的通知横幅一次到达右上角并堆叠成一列。
- [Instagram Follow](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/instagram-follow) (HyperFrames, 社交与聊天): 透明的垂直覆盖层，带有紧凑的轮廓药丸，其"关注"按钮切换为"关注"，旨在提示观看者关注您的帐户。
- [TikTok Follow](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/tiktok-follow) (HyperFrames, 社交与聊天): 透明的 9:16 个人资料覆盖层，其中玫瑰红色的"关注"按钮会弹出带有复选标记的"关注"状态。
- [X Post Card](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/x-post) (HyperFrames, 社交与聊天): 深色主题的宽屏社交明信片，显示个人资料、帖子文本和操作行，然后以动画形式点赞并增加计数。
- [Reddit Post Card](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/reddit-post) (HyperFrames, 社交与聊天): 一张宽屏社区明信片，带有 Reddit 子版块、粗体标题和正文，最后以点赞形式结束并提高评分。
- [Thread Message](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/thread-message-stack) (HyperFrames, 社交与聊天): 一种宽屏文本对话，灰色的传入气泡和蓝色的传出气泡在柔和、模糊的色域上相继出现。
- [Comment Cards](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/yt-comment-card) (HyperFrames, 社交与聊天): 宽屏叠加层，其中两个观众评论按顺序出现，每个评论都有姓名缩写头像、用户名、时间标签、键入的文本和反应行。
- [YouTube Lower Third](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/yt-lower-third) (HyperFrames, 字幕条与行动号召): 透明宽屏字幕条显示频道头像和名称，旁边是"订阅"按钮，该按钮会弹出"已订阅"状态。
- [Grid Pixelate](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/grid-pixelate) (HyperFrames, 转场): 像素网格过渡，其中方形图块生长以覆盖整个框架，然后缩小，在场景之间留下清晰的剪切时刻。
- [Hand Drawn Scribble](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/hw-callout-circle) (HyperFrames, 注释): 手绘标注，其中一个不稳定的白色椭圆围绕一个主题，标记阴影填充它，弯曲的连接器通向手写标签。
- [Squiggle Marks](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/hw-underline) (HyperFrames, 注释): 一种手写文本注释，其中三行依次用波浪下划线、双删除线和弯括号标记。
- [Multiplayer Cursor](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/multiplayer-cursors) (HyperFrames, 点击): 协作动画，其中两到六个带有名称标签的彩色光标沿着设定路径滑动并聚集在发光的聚焦环周围。
- [Parallax Device Dive](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/parallax-device-dive) (HyperFrames, 屏幕与设备): 手机模型动画，其中显示仪表板的设备升起、保持，然后在其 UI 层分开时缩放以填充框架。
- [Parallax Unzoom](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/parallax-unzoom) (HyperFrames, 标题): 回拉过渡，全屏卡片收缩到 3x3 网格的中心，八个彩色邻居在其周围移动。
- [Parallax Zoom](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/parallax-zoom) (HyperFrames, 标题): 缩放过渡从三乘三的彩色卡片网格开始，并推入中心卡片，直到填满框架。
- [Settings Toggle](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/settings-toggle-flow) (HyperFrames, 界面): 设置面板动画，其中三个带标签的行出现在白卡上，并且它们的切换开关滑入打开或关闭状态。
- [Store Badge](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/store-badge-lockup) (HyperFrames, 字幕条与行动号召): 应用程序下载结束卡，首先出现一个大标题，下面是 App Store 和 Google Play 风格的徽章。
- [Neon Border](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/lt-neon-border) (HyperFrames, 字幕条与行动号召): 透明的字幕条带有深色名片，其边界由两个相对的霓虹灯弧线描绘，发出柔和的光芒。
- [Skeleton Reveal](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/skeleton-reveal) (HyperFrames, 界面): 一段简短的加载状态动画，其中闪烁的骨架占位符交叉淡入淡出为带有粗体名称和细节线的卡片。
- [Staggered Fade Up](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/staggered-fade-up) (HyperFrames, 标题): 一个简单的逐字文本显示了每个单词淡入的位置，稍微放大并滑动一小段距离到达最终位置。
- [Text Stagger](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/text-stagger) (HyperFrames, 标题): 单行标题以一种交错的方式升起并缩放到位，然后在文本上呈现出单行彩色闪光。
- [Intro Video](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/intro-video) (HyperFrames, 产品演示): 脚本化的产品演示介绍，以动态文本打开，在助理输入中输入提示，单击发送并显示项目结果卡。
- [ChatGPT Exchange](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/chatgpt-exchange) (HyperFrames, AI聊天输入): 垂直暗模式聊天动画，其中输入问题，回复带有四行工作流程表，并且视图滚动以阅读它。
- [Claude Exchange](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/claude-exchange) (HyperFrames, AI聊天输入): 垂直的暖暗聊天动画，其中输入的问题会导致规划和搜索步骤，以及流式传输和滚动的长衬线答案。
- [Gallery Tunnel](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/gallery-tunnel) (HyperFrames, 产品演示): 一条透视隧道，明亮的彩色面板和细网格线排列在通往中央消失点的走廊上。
- [Chat Thread 2](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/chat-thread-2) (HyperFrames, 社交与聊天): 垂直的手机框架文本对话，包含键入的回复、链接预览、表情符号反应和以结束卡结尾的已读收据。
- [Minimal Line Graph](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/minimal-line-graph) (HyperFrames, 图表): 透明背景上干净的两系列折线图，每个点上都有值标签，底部有月份标签和一个小图例。
- [Spain Map](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/spain-map) (HyperFrames, 地图): 西班牙地区的动画地图，按值着色，包括巴利阿里群岛和加那利群岛，带有标题、副标题和颜色图例。
- [India Map](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/india-map) (HyperFrames, 地图): 一张 12 秒的印度地图，按值对每个邦和联邦领土进行着色，并带有标签、标题、副标题和从低到高的图例。
- [France Map](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/france-map) (HyperFrames, 地图): 法国大都市的分区统计图，每个区域都用您的值、区域名称、标题、副标题和色标进行着色。
- [US Map](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/us-map) (HyperFrames, 地图): 美国州地图，按顺序显示区域，并按值对每个州进行着色，包括阿拉斯加、夏威夷、州标签和颜色图例。
- [US Flow Map](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/us-flow-map) (HyperFrames, 地图): 一张深色的美国地图，弯曲的蓝色弧线连接着主要城市，小点沿着它们移动，显示了城市之间的流动。
- [ChatGPT Chat](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/ai-chat-reveal) (HyperFrames, AI聊天输入): 一个 9 分 16 秒的助理聊天动画，其中包含输入的问题、带有要点的流式回答以及结束号召性用语卡。
- [Animated Bar](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/animated-bar) (HyperFrames, 图表): 紧凑的单色图表卡，带有不断增长的条形、平滑的趋势曲线以及右上角的大百分比标注。
- [Bar Chart Race](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/bar-chart-race) (HyperFrames, 图表): 排名水平条形图，通过时间段动画显示，具有超车、突出显示的领导者、重新缩放轴和周期计数器。
- [Data Chart](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/data-chart) (HyperFrames, 图表): 编辑组合图，将每月收入条形图与转化率线、值标签、图例和来源注释配对。
- [Camera Follow Captions](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/caption-camera-follow) (HyperFrames, 标题): 动态字幕，每个新单词都会出现在不断增长的粗体大写字母块中，同时镜头向后拉以显示整个句子。
- [Whiteboard Bulb](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/whiteboard-bulb) (HyperFrames, 注释): 用移动笔一笔一笔绘制的灯泡白板式草图，下方有彩色重音标记和标题。
- [Whiteboard Rocket](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/whiteboard-rocket) (HyperFrames, 注释): 钢笔绘制的火箭草图，带有翅片、排气管和彩色窗口，后面是纸质背景上的简短发射说明。
- [Chat Thread](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/chat-thread) (HyperFrames, 社交与聊天): 9:16 的暗模式短信线程，包含传入和传出的气泡、键入点、链接预览卡和已读收据。
- [CTA Lockup](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/cta-lockup) (HyperFrames, 字幕条与行动号召): 最后的号召性用语屏幕上有一个大标题、一个药丸形状的按钮和一小行黑色的支持文字。
- [Notes Typing](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/notes-typing) (HyperFrames, 界面): 一段 9 分 16 秒的电话笔记动画，使用屏幕键盘输入标题和七行内容，然后在带有您的品牌的清单卡上结束。
- [Outline Draw](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/outline-draw) (HyperFrames, 注释): 一个细圆角轮廓，顺时针绘制，中心透明，用于框住和突出显示视频的一部分。
- [Oversized Cursor](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/oversized-cursor) (HyperFrames, 点击): 一个大箭头光标移动到一个按钮，单击它，它会出现一个复选标记，然后退出框架。
- [Social Proof Card](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/social-proof-card) (HyperFrames, 社会认同): 奶油色的结束卡，上面有品牌名称、五星级行、客户报价、三个功能图标和一个号召性用语按钮。
- [Stitched Text Draw](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/stitched-text-draw) (HyperFrames, 注释): 在黑色背景上绘制为虚线针迹的大写单词，带有针孔和移动的针。
- [Swipe Rail](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/swipe-rail) (HyperFrames, 转场): 编号卡片的水平导轨，可以快速滑动，并将一张卡片卡入深色海军背景的中心。
- [Ask Subclip](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/ask-subclip) (HyperFrames, AI聊天输入): AI 视频编辑器的宣传场景，其中在标题下的提示框中输入请求，然后是结果和结束行。
- [Build console](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/build-console) (HyperFrames, 界面): 一个黑色终端窗口，通过多个阶段运行渲染命令，带有复选标记、进度条和就绪徽章。
- [Spatial deck](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/spatial-deck) (HyperFrames, 产品演示): 一系列青色编号卡片，通过分层 3D 视角进行展示，每张卡片都显示步骤标题和简短说明。

## 更多HTML 和 GSAP 格式的免费 HyperFrames 运动模板

- [HyperFrames: 标题](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/text-animations)
- [HyperFrames: 屏幕与设备](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/screen-device-animations)
- [HyperFrames: 图表](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/animated-charts)
- [HyperFrames: AI聊天输入](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/ai-chat-animations)
- [HyperFrames: 地图](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/animated-maps)
- [HyperFrames: 社交与聊天](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/social-media-animations)
- [HyperFrames: 字幕条与行动号召](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/lower-thirds)
- [HyperFrames: 注释](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/hand-drawn-annotations)
- [HyperFrames: 界面](https://www.subclip.app/zh/motion-graphics-templates/hyperframes/ui-animations)