HyperFrames Catalog — Social Cards & Platform UI

Source: HeyGen HyperFrames catalog — social cards & platform UI (https://hyperframes.heygen.com/catalog), pulled 2026-06-27; pages archived under ai-research/hyperframes-block-*.md.

This is the detailed, per-block companion to the HyperFrames Block Catalog, covering ten catalog blocks for social-platform UI and product storytelling. Five are platform-styled cards / follow CTAs (Instagram, TikTok, Reddit, X, Spotify) you drop as overlays on top of footage to add social proof or a call-to-action; four are product/app showcase scenes (App Showcase, VPN YouTube Spot, Apple Money Count, Blue Sweater Intro); and one is a cinematic Logo Outro. Each installs with npx hyperframes add <slug> and mounts as a timed sub-composition on a timeline track. The catalog pages document each block’s size, duration, bundled files, and mount markup — they do not publish a formal variable/props schema, so per-card content (handles, post text, metric counts, album art) is edited directly in the installed composition HTML.^[inferred — the per-card “edit in HTML” mechanism is not stated on these block pages; it follows the catalog’s documented add→edit pattern, and the sibling Block Catalog logs the same open question]

Key Takeaways

• Add then mount. npx hyperframes add <slug> copies the block’s HTML into compositions/<slug>.html (yours to edit), then you reference it from a host composition with a <div> carrying data-composition-id, data-composition-src, data-start, data-duration, data-track-index, data-width, data-height.
• No props schema — edit the HTML. None of these pages expose named variables. Customize a card’s handle, post text, metric counts, album art, logo, or tagline by editing the installed composition HTML directly.^[inferred — mechanism not documented per-page; see intro note]
• Two orientations. Instagram, TikTok, and Spotify ship 1080×1920 (vertical, 9:16 — Reels/Shorts/Stories). Reddit, X, and every showcase + outro block ship 1920×1080 (landscape, 16:9).
• Use cards as overlays, showcases as scenes. Follow/post cards are meant to sit on a higher track over your main footage; App Showcase, VPN Spot, Apple Money Count, Blue Sweater Intro, and Logo Outro are full-frame standalone scenes.^[inferred — usage framing; the pages give only the block descriptions]
• Some blocks bundle replaceable assets. Instagram/TikTok ship assets/avatar.jpg; VPN Spot ships assets/vpn-sfx.wav; Apple Money Count ships assets/sfx-production.wav; Blue Sweater Intro ships assets/joe-sai-avatar.png + a melodic-tech SFX mix.
• Three are community-contributed and carry a reusable Source Prompt. VPN YouTube Spot and Apple Money Count (by Stronkter) and Blue Sweater Intro (by Joe Sai) — the first two include the natural-language prompt that generated them, so you can remix the prompt rather than the HTML.

Social & Platform UI Blocks

Block	add slug	Dimensions	Duration	Bundled assets
Instagram Follow	instagram-follow	1080×1920	4.5s	assets/avatar.jpg
TikTok Follow	tiktok-follow	1080×1920	4.5s	assets/avatar.jpg
Reddit Post Card	reddit-post	1920×1080	5s	—
X Post Card	x-post	1920×1080	5s	—
Spotify Now Playing	spotify-card	1080×1920	5s	—
VPN YouTube Spot	vpn-youtube-spot	1920×1080	7s	assets/vpn-sfx.wav
App Showcase	app-showcase	1920×1080	5.5s	—
Apple Money Count	apple-money-count	1920×1080	5s	assets/sfx-production.wav
Blue Sweater Intro Video	blue-sweater-intro-video	1920×1080	12s	avatar PNG + SFX mix
Logo Outro	logo-outro	1920×1080	6s	—

Every block mounts the same way; only id, src, duration, and dimensions change. Full mount markup for one block:

<div data-composition-id="instagram-follow"
     data-composition-src="compositions/instagram-follow.html"
     data-start="0" data-duration="4.5"
     data-track-index="1" data-width="1080" data-height="1920"></div>

Instagram Follow (instagram-follow)

• Renders: animated Instagram follow overlay with a profile card and a follow button.
• Tags: social overlay instagram. 1080×1920 vertical, 4.5s.
• Edit: swap assets/avatar.jpg; set the profile handle/name and follow-button label in the HTML.^[inferred — fields drawn from the block’s own “profile card and follow button” description]
• Usage: npx hyperframes add instagram-follow, then mount at 1080×1920 for 4.5s on an overlay track above your footage.

TikTok Follow (tiktok-follow)

• Renders: animated TikTok follow overlay with a profile card and a follow button.
• Tags: social overlay tiktok. 1080×1920 vertical, 4.5s.
• Edit: swap assets/avatar.jpg; set the profile handle/name and follow-button label in the HTML.^[inferred — fields from the block’s description]
• Usage: npx hyperframes add tiktok-follow, then mount at 1080×1920 for 4.5s on an overlay track.

Reddit Post Card (reddit-post)

• Renders: animated Reddit post card overlay with upvotes and comments.
• Tags: social overlay reddit. 1920×1080 landscape, 5s. No bundled assets.
• Edit: post title/body, upvote count, and comment count (and subreddit/author) in the HTML.^[inferred — upvotes/comments are named in the description; subreddit/author are extrapolated]
• Usage: npx hyperframes add reddit-post, then mount at 1920×1080 for 5s as an overlay.

X Post Card (x-post)

• Renders: animated X/Twitter post card overlay with engagement metrics.
• Tags: social overlay twitter. 1920×1080 landscape, 5s. No bundled assets.
• Edit: post text, author handle/name, and the engagement metrics in the HTML.^[inferred — fields from the “engagement metrics” description]
• Usage: npx hyperframes add x-post, then mount at 1920×1080 for 5s as an overlay.

Spotify Now Playing (spotify-card)

• Renders: animated Spotify now-playing card with album art and a progress bar.
• Tags: social overlay spotify. 1080×1920 vertical, 5s. No bundled assets.
• Edit: track title, artist, album art image, and progress position in the HTML.^[inferred — fields from the “album art and progress bar” description]
• Usage: npx hyperframes add spotify-card, then mount at 1080×1920 for 5s as an overlay.

VPN YouTube Spot (vpn-youtube-spot)

• Renders: snappy Apple-style YouTube insert — a phone scrolls an app store, taps a friendly VPN app, installs it, then snaps down and fades to white, with sound effects. Created by Stronkter.
• Tags: app showcase youtube sfx. 1920×1080 landscape, 7s. Ships assets/vpn-sfx.wav.
• Edit: ships a reusable Source Prompt (Apple-style bold font, app-store scroll → install → fade, 60fps, 1920×1080) — remix the prompt to retheme the app/brand; SFX is assets/vpn-sfx.wav.
• Usage: npx hyperframes add vpn-youtube-spot, then mount at 1920×1080 for 7s as a full-frame scene.

App Showcase (app-showcase)

• Renders: a fitness-app product showcase with three floating smartphone screens.
• Tags: showcase app 3d. 1920×1080 landscape, 5.5s. No bundled assets.
• Edit: replace the three phone screen images with your own app screenshots in the HTML.^[inferred — from the “three floating smartphone screens” description]
• Usage: npx hyperframes add app-showcase, then mount at 1920×1080 for 5.5s as a full-frame scene.

Apple Money Count (apple-money-count)

• Renders: an Apple-style finance counter that counts $0\to$10,000, flashes green at the top, then bursts money icons across the screen, with sound. Created by Stronkter.
• Tags: showcase finance kinetic youtube sfx. 1920×1080 landscape, 5s. Ships assets/sfx-production.wav.
• Edit: ships a reusable Source Prompt — change the target amount, flash color, and burst behavior by editing the prompt or HTML; SFX is assets/sfx-production.wav.
• Usage: npx hyperframes add apple-money-count, then mount at 1920×1080 for 5s as a full-frame scene.

Blue Sweater Intro Video (blue-sweater-intro-video)

• Renders: a warm AI-creator intro sequence that resolves into an X follow card for @blue_sweater. Created by Joe Sai.
• Tags: showcase ai creator sfx. 1920×1080 landscape, 12s (longest block here). Ships assets/joe-sai-avatar.png + assets/sfx/integrated-melodic-tech-mix.wav.
• Edit: swap assets/joe-sai-avatar.png, set the resolving X handle, and replace the SFX mix in the HTML.^[inferred — handle/avatar/SFX are the named components]
• Usage: npx hyperframes add blue-sweater-intro-video, then mount at 1920×1080 for 12s as a full-frame intro scene.

Logo Outro (logo-outro)

• Renders: a cinematic logo reveal — piece-by-piece assembly, glow bloom, tagline fade-in, and a URL pill.
• Tags: branding outro logo. 1920×1080 landscape, 6s. No bundled assets.
• Edit: drop in your logo, tagline text, and URL-pill text in the HTML.^[inferred — from the “tagline fade-in, and URL pill” description]
• Usage: npx hyperframes add logo-outro, then mount at 1920×1080 for 6s as a closing scene.

Try It

• Add a follow card to a vertical clip: scaffold a 1080×1920 project, run npx hyperframes add instagram-follow, swap assets/avatar.jpg, edit the handle, and mount the <div> (above) on data-track-index="1" so it overlays your footage; npx hyperframes preview to check timing.
• Stack an overlay over a scene: put a full-frame app-showcase on track 0 and an x-post card on a higher track to confirm layering and CTA placement.
• Remix a prompt-based block: run npx hyperframes add apple-money-count, then reuse its Source Prompt with a different amount/color to regenerate a variant instead of hand-editing the HTML.
• Close with branding: chain logo-outro (6s) after your main scene as a standalone outro, dropping in your logo, tagline, and URL.

Related

• hyperframes-block-catalog
• hyperframes
• hyperframes-prompt-guide
• hyperframes-launch-video-playbook

Open Questions

• No documented props schema. The block pages specify size, duration, files, and mount markup, but not whether content (handles, post text, metric counts, album art, logo, tagline) is passed as props or edited directly in the installed HTML. The sibling Block Catalog logs the same gap — unresolved.
• Are bundled avatar/SFX files placeholders or fixed? The asset paths (assets/avatar.jpg, assets/joe-sai-avatar.png, the SFX wavs) suggest they are meant to be replaced, but the pages do not state this.^[inferred]