Jonathon's AI Wiki

HyperFrames Catalog — Caption Styles & Overlay Components

7 min read

Source: HeyGen HyperFrames catalog — caption styles & overlay components (https://hyperframes.heygen.com/catalog), pulled 2026-06-27; pages archived under ai-research/hyperframes-component-*.md.

This page catalogs the HeyGen HyperFrames components — paste-in HTML snippets that style captions or layer an effect onto a composition, as distinct from catalog blocks (standalone sub-compositions mounted on a timeline track; see hyperframes-block-catalog). It covers the 16 animated caption/subtitle styles — word-level karaoke, neon, glitch, kinetic, gradient, texture and more — plus 8 overlay, transition, and text-effect components (film grain, vignette, parallax zoom/unzoom, gooey morph-text, shimmer sweep, texture-masked text). Every item installs with npx hyperframes add <slug> and is then pasted into your composition. Caption styles that highlight the active word (highlight, pill-karaoke, particle-burst) sync to per-word transcript timing. ^[inferred]

Key Takeaways

  • Components are paste-in snippets, not mounted sub-compositions. Every item here has Type: Component, installs to compositions/components/<slug>.html as a hyperframes:snippet, and is used by pasting its contents into an existing composition — unlike catalog blocks, which install as standalone hyperframes:composition files mounted on a timeline track via data-composition-id / data-start / data-duration. ^[inferred — contrast drawn against hyperframes-block-catalog; the snippet-vs-composition file types are stated in each source]
  • One install command for all of them: npx hyperframes add <slug> (e.g. npx hyperframes add caption-pill-karaoke). It copies the HTML into your project; open the file’s comment header for per-component instructions.
  • 16 caption styles + 8 overlay/transition/text-effect components. Captions render word- or line-level subtitle styling; overlays (grain, vignette) and transitions (grid-pixelate-wipe, parallax-zoom/unzoom) and text effects (shimmer-sweep, morph-text, texture-mask-text) sit on top of, or between, scenes.
  • Caption components are the concrete render of the prompt-guide’s caption-tone vocabulary. Prompting an agent with a tone — “hype captions with scale-pop”, “karaoke-style word highlighting”, “social/TikTok” — maps to a matching caption component (e.g. karaoke → caption-pill-karaoke, TikTok highlight → caption-highlight, hype → caption-kinetic-slam). ^[inferred — the prompt guide’s caption-tone table does not name catalog slugs; see hyperframes-prompt-guide]
  • Active-word / karaoke styles need word-level transcript timing. Components that highlight, reveal, or burst on the current word (caption-highlight, caption-pill-karaoke, caption-clip-wipe, caption-kinetic-slam, caption-particle-burst) depend on per-word timestamps to sync. ^[inferred from the per-word / active-word language in each source]
  • A few ship assets or expose variables. caption-texture installs 6 texture PNGs (lava, marble, metal, wood, concrete, rock) and is set via the texture variable; texture-mask-text ships 66 material classes across 6 groups; morph-text exposes data-font / data-color / data-morph-speed / data-morph-pause.

Caption Styles

Blend Difference (caption-blend-difference)

  • Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against whatever is behind it, so it stays legible over any background.
  • Tags: text effect blend-mode contrast inversion
  • Add: npx hyperframes add caption-blend-difference. Reach for it when text sits over unpredictable or moving footage.

Clip Wipe (caption-clip-wipe)

  • Left-to-right clip-path wipe that reveals each word in turn.
  • Tags: captions caption-style wipe clip-path reveal
  • Per-word reveal — needs word-level transcript timing to land on each word. ^[inferred]

Editorial Emphasis (caption-editorial-emphasis)

  • Dual-font system with dramatic size contrast on emphasis words — magazine/editorial feel.
  • Tags: captions caption-style editorial typography emphasis
  • Add: npx hyperframes add caption-editorial-emphasis.

Emoji Pop (caption-emoji-pop)

  • Emoji integration with stroked text and a horizontal-squeeze entrance — social/short-form energy.
  • Tags: captions caption-style emoji social
  • Add: npx hyperframes add caption-emoji-pop.

Glitch RGB (caption-glitch-rgb)

  • RGB chromatic aberration with a CRT scanline overlay — cyber/tech look.
  • Tags: captions caption-style glitch cyber tech
  • Add: npx hyperframes add caption-glitch-rgb.

Gradient Fill (caption-gradient-fill)

  • Gradient-clipped text with an elastic bounce entrance.
  • Tags: captions caption-style gradient colorful
  • Add: npx hyperframes add caption-gradient-fill.

Highlight (caption-highlight)

  • Red background sweep behind each active word, TikTok-style.
  • Tags: captions caption-style highlight social tiktok
  • “Active word” highlight — syncs to per-word transcript timing. ^[inferred]

Kinetic Slam (caption-kinetic-slam)

  • Full-screen single-word display with alternating entrance directions — high-impact/hype.
  • Tags: captions caption-style kinetic typography slam
  • One word on screen at a time — depends on word-level timing. ^[inferred]

Matrix Decode (caption-matrix-decode)

  • Character-scramble animation that resolves into the text (decode reveal).
  • Tags: captions caption-style matrix scramble decode
  • Add: npx hyperframes add caption-matrix-decode.

Neon Accent (caption-neon-accent)

  • Multi-color neon glow accents with a wiggle drift animation.
  • Tags: captions caption-style neon glow accent
  • Add: npx hyperframes add caption-neon-accent.

Neon Glow (caption-neon-glow)

  • Cyan and magenta neon glow with keyword accent colors — gaming aesthetic.
  • Tags: captions caption-style neon glow gaming
  • Keyword accent colors imply tagging specific words for emphasis. ^[inferred]

Parallax Layers (caption-parallax-layers)

  • Behind-subject 3D text layering with a vertical stretch effect for depth.
  • Tags: captions caption-style parallax 3d depth
  • Add: npx hyperframes add caption-parallax-layers.

Particle Burst (caption-particle-burst)

  • Keyword words trigger colored particle explosions.
  • Tags: captions caption-style particles burst effects
  • Keyword-triggered — needs word-level timing plus keyword tagging. ^[inferred]

Pill Karaoke (caption-pill-karaoke)

  • Pill-shaped container with per-word karaoke color highlight.
  • Tags: captions caption-style karaoke pill
  • Karaoke highlight — syncs to per-word transcript timing. ^[inferred]

Texture (caption-texture)

  • Flowing texture mask over large uppercase text; ships 6 textures (lava, marble, metal, wood, concrete, rock), selectable via the texture variable.
  • Tags: captions caption-style texture mask
  • Installs the snippet plus the 6 texture PNG assets into compositions/components/. Caption-style sibling of the richer texture-mask-text text effect.

Weight Shift (caption-weight-shift)

  • Elegant font-weight transition between caption lines — minimal/storytelling tone.
  • Tags: captions caption-style minimal typography
  • Add: npx hyperframes add caption-weight-shift.

Overlay & Texture Components

Grain Overlay (grain-overlay)

  • Animated film-grain texture overlay using CSS keyframes — adds warmth and analog character to any composition.
  • Tags: texture grain overlay film
  • Composition-wide finishing layer; add: npx hyperframes add grain-overlay.

Grid Pixelate Wipe (grid-pixelate-wipe)

  • Transition where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes.
  • Tags: transition wipe grid pixelate
  • Add: npx hyperframes add grid-pixelate-wipe.

Morph Text (morph-text)

  • Gooey text morph that cycles through an editable word list using an SVG threshold + GSAP-driven blur for a fluid transition.
  • Tags: text text-effect typography morph gooey kinetic animation
  • Variables: edit the <ol id="morph-words"> list; each <li> accepts data-font (CSS font-family) and data-color (hex); the root accepts data-morph-speed (seconds per transition) and data-morph-pause (hold time).

Parallax Unzoom (parallax-unzoom)

  • Reveal transition: the focus card scales down from full frame as siblings parallax in to form a grid (the reverse of parallax-zoom).
  • Tags: transition reveal unzoom parallax grid hero
  • Add: npx hyperframes add parallax-unzoom.

Parallax Zoom (parallax-zoom)

  • Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition.
  • Tags: transition zoom parallax grid hero
  • Add: npx hyperframes add parallax-zoom.

Shimmer Sweep (shimmer-sweep)

  • Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals.
  • Tags: text shimmer highlight effect
  • Add: npx hyperframes add shimmer-sweep.

Texture Mask Text (texture-mask-text)

  • Photographic material texture masked into large text; 66 material classes across 6 groups (Masonry, Stone, Ground/Road, Wood, Metal, Organic/Soft).
  • Tags: text texture mask effect
  • Usage: base class hf-texture-text is always required, plus one hf-texture-<material> modifier (e.g. hf-texture-brick). Animate by moving --mask-position with GSAP; apply drop shadow on a wrapper element (<div style="filter: drop-shadow(...)">), never on the text itself. Richer text-effect sibling of caption-texture.

Vignette (vignette)

  • Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center.
  • Tags: vignette overlay cinematic effect
  • Composition-wide finishing layer; add: npx hyperframes add vignette.

Try It

  • TikTok-style captions: run npx hyperframes add caption-highlight, paste the snippet into your composition, then sync it to your transcript’s per-word timings.
  • Premium product reveal: combine shimmer-sweep on the headline with vignette + grain-overlay for a cinematic finish.
  • Material headline: npx hyperframes add texture-mask-text, apply class="hf-texture-text hf-texture-brick" to a word, wrap it in <div style="filter: drop-shadow(...)"> for shadow, and animate --mask-position with a GSAP timeline.
  • Match a prompt tone to a component: ask for “karaoke word highlighting” (→ caption-pill-karaoke) or “hype captions” (→ caption-kinetic-slam); keep the caption-tone table from hyperframes-prompt-guide open while prompting.
  • Browse the rest: the web catalog is at hyperframes.heygen.com/catalog; see hyperframes-block-catalog for the block (sub-composition) half of the registry.

Graph View

Backlinks