# Free HyperFrames Motion Templates in HTML and GSAP

Get 65 free HyperFrames video templates for AI chat, devices, titles, charts and product demos. Customize the HTML and GSAP or edit in Subclip.

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

These free HyperFrames video templates use editable HTML, CSS and GSAP timelines. Browse AI chat inputs, screen and device showcases, kinetic titles, product demos, social cards, charts and maps. Preview each animation, edit its variables in Subclip, or download the portable code where available.

## HTML with a paused GSAP timeline

Each HyperFrames template is an HTML document. Layout is HTML and CSS, and motion is a GSAP timeline that starts paused. Rather than letting the browser play it in real time, the renderer seeks the timeline to each frame and captures it. Every frame is deterministic, so the render matches the preview.

Editable values are exposed as variables: name, handle and count on the follow overlays, title, subtitle and values on the maps, periods and series on Bar Chart Race, and accent colors on many others. Change a variable and the scene redraws with it. Because the source is ordinary HTML, you can also read it, restyle it with CSS or add elements the way you would on a web page.

Many templates here are overlays. Instagram Follow, TikTok Follow, YouTube Lower Third, macOS Notification and Neon Border keep a transparent background so they sit over your footage.

## What the HyperFrames set covers

Social media animations are a strong point. iOS Notification stacks four banners in a vertical frame, X Post Card and Reddit Post Card animate a like or an upvote with the count going up, Comment Cards types two comments in, and ChatGPT Exchange and Claude Exchange replay a scripted assistant chat in 9:16.

For data and places there are the US, France, Spain and India maps with editable region values, US Flow Map with weighted arcs between cities, Bar Chart Race, Minimal Line Graph, Animated Bar and Data Chart. Hand-drawn pieces include Hand Drawn Scribble, Squiggle Marks, Whiteboard Bulb and Stitched Text Draw. UI flows include Settings Toggle, Skeleton Reveal, Swipe Rail and Parallax Zoom.

## Using HyperFrames templates in Subclip

All HyperFrames templates are free and pre-installed in Subclip, the desktop AI video editor for Mac and Windows. Place one on the timeline over your footage, then ask the AI agent to change it: replace the map values with your sales by state, switch the follow overlay to your handle, or give the lower third your channel name and subscriber count. The agent edits the variables for you, and you export the video when it is ready.

## Getting the HTML for Claude or Codex

The current HyperFrames templates all have a code pack, available after a free sign-in. Copy the code with a prompt to put the full HTML and an agent-ready prompt on your clipboard, then paste it into Claude or Codex and say what to change. The prompt lists the variables, so the agent knows where your text, colors and data go.

Or download the zip: index.html, props.json with the default variable values, a README on running it in the HyperFrames player, and AGENTS.md and CLAUDE.md files that describe what is editable. That gives a coding agent enough context to restyle a template, add a scene, or produce several versions with different data.

## 65 templates

- [Subclip Scenic Reel Composer](https://www.subclip.app/motion-graphics-templates/hyperframes/subclip-scenic-reel-composer) (HyperFrames, AI Chat Input): Animate a glass prompt and rotating photo gallery in this video template.
- [Subclip Momentum Growth Headline](https://www.subclip.app/motion-graphics-templates/hyperframes/subclip-momentum-growth-headline) (HyperFrames, Titles): Animate a typed headline with a growing chart in this video template.
- [Subclip Guided Word Spotlight](https://www.subclip.app/motion-graphics-templates/hyperframes/subclip-guided-word-spotlight) (HyperFrames, Titles): Animate word-by-word text with a tracking camera in this video template.
- [Subclip Hinged Laptop Showcase](https://www.subclip.app/motion-graphics-templates/hyperframes/subclip-hinged-laptop-showcase) (HyperFrames, Screens & Devices): Animate a hinged laptop and a cinematic screen zoom in this video template.
- [Subclip Aurora Brand Signature](https://www.subclip.app/motion-graphics-templates/hyperframes/subclip-aurora-brand-signature) (HyperFrames, Titles): Animate a logo and wordmark over soft gradients in this video template.
- [Subclip Creative Brief Launcher](https://www.subclip.app/motion-graphics-templates/hyperframes/subclip-creative-brief-launcher) (HyperFrames, AI Chat Input): Animate a typed creative brief with a send confirmation in this video template.
- [Subclip Panorama Device Gallery](https://www.subclip.app/motion-graphics-templates/hyperframes/subclip-panorama-device-gallery) (HyperFrames, Screens & Devices): Animate four perspective phones around a product headline in this video template.
- [Subclip Mobile Action Spotlight](https://www.subclip.app/motion-graphics-templates/hyperframes/subclip-mobile-action-spotlight) (HyperFrames, Screens & Devices): Animate a phone button close-up and animated closing titles in this video template.
- [Subclip Pocket AI Composer](https://www.subclip.app/motion-graphics-templates/hyperframes/subclip-pocket-ai-composer) (HyperFrames, AI Chat Input): Animate a mobile AI composer with a send-button zoom in this video template.
- [Subclip Release-to-Video Assistant](https://www.subclip.app/motion-graphics-templates/hyperframes/subclip-release-to-video-assistant) (HyperFrames, AI Chat Input): Animate an AI response with a video results table in this video template.
- [Subclip Connected Creative Workspace](https://www.subclip.app/motion-graphics-templates/hyperframes/subclip-connected-creative-workspace) (HyperFrames, AI Chat Input): Animate AI asset connections and a creative workspace in this video template.
- [Subclip Intent Search Animation](https://www.subclip.app/motion-graphics-templates/hyperframes/subclip-intent-search-animation) (HyperFrames, AI Chat Input): Animate a search query selected and replaced as you type in this video template.
- [Subclip Production Progress Tracker](https://www.subclip.app/motion-graphics-templates/hyperframes/subclip-production-progress-tracker) (HyperFrames, AI Chat Input): Animate a task checklist with spinners and completion marks in this video template.
- [iOS Notification](https://www.subclip.app/motion-graphics-templates/hyperframes/notification-cascade) (HyperFrames, Social & chat): A vertical notification overlay where four iPhone-style banners stack one after another, then clear away for a closing headline and logo card.
- [Instant Carousel](https://www.subclip.app/motion-graphics-templates/hyperframes/share-sheet-carousel) (HyperFrames, Social & chat): A vertical image carousel that cycles four photos inside a white rounded card, with a soft blurred copy of the current image filling the background.
- [macOS Notification](https://www.subclip.app/motion-graphics-templates/hyperframes/macos-notification) (HyperFrames, Social & chat): A widescreen overlay where macOS-style notification banners arrive one at a time in the top right corner and stack into a column.
- [Instagram Follow](https://www.subclip.app/motion-graphics-templates/hyperframes/instagram-follow) (HyperFrames, Social & chat): A transparent vertical overlay with a compact profile pill whose Follow button switches to Following, made to prompt viewers to follow your account.
- [TikTok Follow](https://www.subclip.app/motion-graphics-templates/hyperframes/tiktok-follow) (HyperFrames, Social & chat): A transparent 9:16 profile overlay where a rose-red Follow button springs into a Following state with a checkmark.
- [X Post Card](https://www.subclip.app/motion-graphics-templates/hyperframes/x-post) (HyperFrames, Social & chat): A widescreen social post card in a dark theme that shows a profile, post text and an action row, then animates a like with a count increase.
- [Reddit Post Card](https://www.subclip.app/motion-graphics-templates/hyperframes/reddit-post) (HyperFrames, Social & chat): A widescreen community post card with a subreddit line, bold headline and body text, ending with an upvote that springs and raises the score.
- [Thread Message](https://www.subclip.app/motion-graphics-templates/hyperframes/thread-message-stack) (HyperFrames, Social & chat): A widescreen text conversation where gray incoming and blue outgoing bubbles appear one after another over a soft, blurred color field.
- [Comment Cards](https://www.subclip.app/motion-graphics-templates/hyperframes/yt-comment-card) (HyperFrames, Social & chat): A widescreen overlay where two viewer comments appear in sequence, each with an initials avatar, username, time label, typed text and a reaction row.
- [YouTube Lower Third](https://www.subclip.app/motion-graphics-templates/hyperframes/yt-lower-third) (HyperFrames, Lower thirds & CTAs): A transparent widescreen lower third showing a channel avatar and name next to a Subscribe button that springs into a Subscribed state.
- [Grid Pixelate](https://www.subclip.app/motion-graphics-templates/hyperframes/grid-pixelate) (HyperFrames, Transitions): A pixel grid transition where square tiles grow to cover the whole frame and then shrink away, leaving a clean moment to cut between scenes.
- [Hand Drawn Scribble](https://www.subclip.app/motion-graphics-templates/hyperframes/hw-callout-circle) (HyperFrames, Annotations): A hand-drawn callout where a wobbly white ellipse circles a subject, marker hatching fills it, and a curved connector leads to a handwritten label.
- [Squiggle Marks](https://www.subclip.app/motion-graphics-templates/hyperframes/hw-underline) (HyperFrames, Annotations): A handwritten text annotation where three lines are marked in turn with a wavy underline, a double strikethrough and a curved bracket.
- [Multiplayer Cursor](https://www.subclip.app/motion-graphics-templates/hyperframes/multiplayer-cursors) (HyperFrames, Clicks): A collaboration animation where two to six colored cursors with name tags glide along set paths and gather around a glowing focus ring.
- [Parallax Device Dive](https://www.subclip.app/motion-graphics-templates/hyperframes/parallax-device-dive) (HyperFrames, Screens & Devices): A phone mockup animation where a device showing a dashboard rises, holds, and then zooms to fill the frame as its UI layers pull apart.
- [Parallax Unzoom](https://www.subclip.app/motion-graphics-templates/hyperframes/parallax-unzoom) (HyperFrames, Titles): A pull-back transition where a full-screen card shrinks into the center of a three-by-three grid as eight colored neighbors move in around it.
- [Parallax Zoom](https://www.subclip.app/motion-graphics-templates/hyperframes/parallax-zoom) (HyperFrames, Titles): A zoom transition that starts on a three-by-three grid of colored cards and pushes into the center card until it fills the frame.
- [Settings Toggle](https://www.subclip.app/motion-graphics-templates/hyperframes/settings-toggle-flow) (HyperFrames, UI): A settings panel animation in which three labeled rows appear on a white card and their toggle switches slide into on or off.
- [Store Badge](https://www.subclip.app/motion-graphics-templates/hyperframes/store-badge-lockup) (HyperFrames, Lower thirds & CTAs): An app download end card where a large headline appears first, followed by App Store and Google Play style badges beneath it.
- [Neon Border](https://www.subclip.app/motion-graphics-templates/hyperframes/lt-neon-border) (HyperFrames, Lower thirds & CTAs): A transparent lower third with a dark name card whose border is traced by two opposing neon arcs with a soft glow.
- [Skeleton Reveal](https://www.subclip.app/motion-graphics-templates/hyperframes/skeleton-reveal) (HyperFrames, UI): A short loading state animation where a shimmering skeleton placeholder crossfades into a card with a bold name and a detail line.
- [Staggered Fade Up](https://www.subclip.app/motion-graphics-templates/hyperframes/staggered-fade-up) (HyperFrames, Titles): A simple word-by-word text reveal where each word fades in, scales up slightly and slides a short distance into its final spot.
- [Text Stagger](https://www.subclip.app/motion-graphics-templates/hyperframes/text-stagger) (HyperFrames, Titles): A one-line headline that rises and scales into place in a stagger, then gets a single pass of colored shimmer across the text.
- [Intro Video](https://www.subclip.app/motion-graphics-templates/hyperframes/intro-video) (HyperFrames, Product Demos): A scripted product demo intro that opens with kinetic text, types a prompt into an assistant input, clicks send and reveals a project result card.
- [ChatGPT Exchange](https://www.subclip.app/motion-graphics-templates/hyperframes/chatgpt-exchange) (HyperFrames, AI Chat Input): A vertical dark-mode chat animation where a question is typed in, a reply streams back with a four-row workflow table, and the view scrolls to read it.
- [Claude Exchange](https://www.subclip.app/motion-graphics-templates/hyperframes/claude-exchange) (HyperFrames, AI Chat Input): A vertical warm dark chat animation where a typed question leads to planning and search steps and a long serif answer that streams and scrolls.
- [Gallery Tunnel](https://www.subclip.app/motion-graphics-templates/hyperframes/gallery-tunnel) (HyperFrames, Product Demos): A perspective tunnel where bright colored panels and thin grid lines line a corridor that travels toward a central vanishing point.
- [Chat Thread 2](https://www.subclip.app/motion-graphics-templates/hyperframes/chat-thread-2) (HyperFrames, Social & chat): A vertical phone-framed text conversation with typed replies, a link preview, emoji reactions and read receipts that ends on a closing card.
- [Minimal Line Graph](https://www.subclip.app/motion-graphics-templates/hyperframes/minimal-line-graph) (HyperFrames, Charts): A clean two-series line chart on a transparent background, with value labels on each point, month labels along the bottom and a small legend.
- [Spain Map](https://www.subclip.app/motion-graphics-templates/hyperframes/spain-map) (HyperFrames, Maps): An animated map of Spain's regions colored by value, including the Balearic and Canary Islands, with a title, subtitle and color legend.
- [India Map](https://www.subclip.app/motion-graphics-templates/hyperframes/india-map) (HyperFrames, Maps): A 12-second India map that colors each state and union territory by value, with labels, a title, a subtitle and a Low to High legend.
- [France Map](https://www.subclip.app/motion-graphics-templates/hyperframes/france-map) (HyperFrames, Maps): A choropleth map of metropolitan France with every region shaded by your values, region names, a title, a subtitle and a color scale.
- [US Map](https://www.subclip.app/motion-graphics-templates/hyperframes/us-map) (HyperFrames, Maps): A US state map that reveals regions in sequence and colors each state by value, with Alaska, Hawaii, state labels and a color legend.
- [US Flow Map](https://www.subclip.app/motion-graphics-templates/hyperframes/us-flow-map) (HyperFrames, Maps): A dark US map where curved blue arcs link major cities and small dots travel along them, showing city-to-city flows.
- [ChatGPT Chat](https://www.subclip.app/motion-graphics-templates/hyperframes/ai-chat-reveal) (HyperFrames, AI Chat Input): A 9:16 assistant chat animation with a typed question, a streamed answer with bullet points and a closing call-to-action card.
- [Animated Bar](https://www.subclip.app/motion-graphics-templates/hyperframes/animated-bar) (HyperFrames, Charts): A compact monochrome chart card with growing bars, a smooth trend curve and a large percentage callout in the top right corner.
- [Bar Chart Race](https://www.subclip.app/motion-graphics-templates/hyperframes/bar-chart-race) (HyperFrames, Charts): A ranked horizontal bar chart that animates through time periods, with overtakes, a highlighted leader, a rescaling axis and a period counter.
- [Data Chart](https://www.subclip.app/motion-graphics-templates/hyperframes/data-chart) (HyperFrames, Charts): An editorial combo chart that pairs monthly revenue bars with a conversion-rate line, value labels, a legend and a source note.
- [Camera Follow Captions](https://www.subclip.app/motion-graphics-templates/hyperframes/caption-camera-follow) (HyperFrames, Titles): Kinetic captions where each new word lands in a growing block of bold capitals while the camera pulls back to reveal the whole sentence.
- [Whiteboard Bulb](https://www.subclip.app/motion-graphics-templates/hyperframes/whiteboard-bulb) (HyperFrames, Annotations): A whiteboard-style sketch of a light bulb drawn stroke by stroke with a moving pen, a colored accent mark and a caption underneath.
- [Whiteboard Rocket](https://www.subclip.app/motion-graphics-templates/hyperframes/whiteboard-rocket) (HyperFrames, Annotations): A pen-drawn rocket sketch with fins, exhaust lines and a colored window, followed by a short launch caption on a paper background.
- [Chat Thread](https://www.subclip.app/motion-graphics-templates/hyperframes/chat-thread) (HyperFrames, Social & chat): A 9:16 dark-mode text message thread with incoming and outgoing bubbles, typing dots, a link preview card and read receipts.
- [CTA Lockup](https://www.subclip.app/motion-graphics-templates/hyperframes/cta-lockup) (HyperFrames, Lower thirds & CTAs): A closing call-to-action screen with a large headline, a pill-shaped button and a small line of supporting copy on black.
- [Notes Typing](https://www.subclip.app/motion-graphics-templates/hyperframes/notes-typing) (HyperFrames, UI): A 9:16 phone notes animation that types a title and seven lines with an on-screen keyboard, then ends on a checklist card with your brand.
- [Outline Draw](https://www.subclip.app/motion-graphics-templates/hyperframes/outline-draw) (HyperFrames, Annotations): A thin rounded-corner outline that draws clockwise with a transparent center, used to frame and highlight part of your video.
- [Oversized Cursor](https://www.subclip.app/motion-graphics-templates/hyperframes/oversized-cursor) (HyperFrames, Clicks): A big arrow cursor that moves to a button, clicks it so it reacts with a check mark, and then exits the frame.
- [Social Proof Card](https://www.subclip.app/motion-graphics-templates/hyperframes/social-proof-card) (HyperFrames, Social Proof): A cream-colored closing card with a brand name, five-star row, customer quote, three feature icons and a call-to-action button.
- [Stitched Text Draw](https://www.subclip.app/motion-graphics-templates/hyperframes/stitched-text-draw) (HyperFrames, Annotations): An uppercase word drawn as dashed thread stitches, with needle holes and a moving needle, on a black background.
- [Swipe Rail](https://www.subclip.app/motion-graphics-templates/hyperframes/swipe-rail) (HyperFrames, Transitions): A horizontal rail of numbered cards that swipes with momentum and snaps one card into the center on a dark navy background.
- [Ask Subclip](https://www.subclip.app/motion-graphics-templates/hyperframes/ask-subclip) (HyperFrames, AI Chat Input): A promo scene for an AI video editor where a request is typed into a prompt box under a heading, followed by a result and a closing line.
- [Build console](https://www.subclip.app/motion-graphics-templates/hyperframes/build-console) (HyperFrames, UI): A dark terminal window that runs a render command through several stages, with check marks, a progress bar and a ready badge.
- [Spatial deck](https://www.subclip.app/motion-graphics-templates/hyperframes/spatial-deck) (HyperFrames, Product Demos): A sequence of teal, numbered cards that travel through layered 3D perspective, each showing a step title and a short description.

## More Free HyperFrames Motion Templates in HTML and GSAP

- [HyperFrames: Titles](https://www.subclip.app/motion-graphics-templates/hyperframes/text-animations)
- [HyperFrames: Screens & Devices](https://www.subclip.app/motion-graphics-templates/hyperframes/screen-device-animations)
- [HyperFrames: Charts](https://www.subclip.app/motion-graphics-templates/hyperframes/animated-charts)
- [HyperFrames: AI Chat Input](https://www.subclip.app/motion-graphics-templates/hyperframes/ai-chat-animations)
- [HyperFrames: Maps](https://www.subclip.app/motion-graphics-templates/hyperframes/animated-maps)
- [HyperFrames: Social & chat](https://www.subclip.app/motion-graphics-templates/hyperframes/social-media-animations)
- [HyperFrames: Lower thirds & CTAs](https://www.subclip.app/motion-graphics-templates/hyperframes/lower-thirds)
- [HyperFrames: Annotations](https://www.subclip.app/motion-graphics-templates/hyperframes/hand-drawn-annotations)
- [HyperFrames: UI](https://www.subclip.app/motion-graphics-templates/hyperframes/ui-animations)