Hyperframes HeyGen Catalog

https://hyperframes.heygen.com/catalog/
Admin
A comprehensive catalog of composable video effects, transitions, and UI components for video...
Tokens:24,256
Snippets:512
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Grid Pixelate Wipe

Source: https://hyperframes.heygen.com/catalog/components/grid-pixelate-wipe

Use the CLI to add the component to your project.

```bash
npx hyperframes add grid-pixelate-wipe
```

--------------------------------

### Install All Code Snippet Themes

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-dark-2026

Install the entire collection of code snippet themes available in the library.

```bash
npx hyperframes add code
```

--------------------------------

### Install Caption Clip Wipe

Source: https://hyperframes.heygen.com/catalog/components/caption-clip-wipe

Use the CLI to add the component to your project.

```bash
npx hyperframes add caption-clip-wipe
```

--------------------------------

### Install Stack Bars Block

Source: https://hyperframes.heygen.com/catalog/blocks/lt-stack-bars

Use the CLI to add the component to your project.

```bash
npx hyperframes add lt-stack-bars
```

--------------------------------

### Install Code 3D Extrude

Source: https://hyperframes.heygen.com/catalog/blocks/code-3d-extrude

Use the CLI to add the component to your project.

```bash
npx hyperframes add code-3d-extrude
```

--------------------------------

### Install Soft Pill Block

Source: https://hyperframes.heygen.com/catalog/blocks/lt-soft-pill

Use the CLI to add the component to your project.

```bash
npx hyperframes add lt-soft-pill
```

--------------------------------

### Install the Mask Reveal block

Source: https://hyperframes.heygen.com/catalog/blocks/lt-mask-reveal

Use the CLI to add the block to your project.

```bash
npx hyperframes add lt-mask-reveal
```

--------------------------------

### Install Destruction Transitions

Source: https://hyperframes.heygen.com/catalog/blocks/transitions-destruction

Use the CLI to add the destruction transition block to your project.

```bash
npx hyperframes add transitions-destruction
```

--------------------------------

### Install Scale Transitions Block

Source: https://hyperframes.heygen.com/catalog/blocks/transitions-scale

Use the CLI to add the transitions-scale block to your project.

```bash
npx hyperframes add transitions-scale
```

--------------------------------

### Install Liquid Glass Media Controls

Source: https://hyperframes.heygen.com/catalog/blocks/liquid-glass-media-controls

Use the CLI to add the block to your project.

```bash
npx hyperframes add liquid-glass-media-controls
```

--------------------------------

### Install Liquid Glass Widgets

Source: https://hyperframes.heygen.com/catalog/blocks/liquid-glass-widgets

Use the CLI to add the liquid-glass-widgets block to your project.

```bash
npx hyperframes add liquid-glass-widgets
```

--------------------------------

### Install 3D UI Reveal block

Source: https://hyperframes.heygen.com/catalog/blocks/ui-3d-reveal

Use the CLI to add the block to your project.

```bash
npx hyperframes add ui-3d-reveal
```

--------------------------------

### Install the Clean Bar block

Source: https://hyperframes.heygen.com/catalog/blocks/lt-clean-bar

Use the CLI to add the block to your project.

```bash
npx hyperframes add lt-clean-bar
```

--------------------------------

### Install Caption Pill Karaoke

Source: https://hyperframes.heygen.com/catalog/components/caption-pill-karaoke

Use the CLI to add the component to your project.

```bash
npx hyperframes add caption-pill-karaoke
```

--------------------------------

### Install Cover Transitions Block

Source: https://hyperframes.heygen.com/catalog/blocks/transitions-cover

Use the CLI to add the transitions-cover block to your project.

```bash
npx hyperframes add transitions-cover
```

--------------------------------

### Install Domain Warp Dissolve

Source: https://hyperframes.heygen.com/catalog/blocks/domain-warp-dissolve

Use the CLI to add the block to your project.

```bash
npx hyperframes add domain-warp-dissolve
```

--------------------------------

### Install Caption Highlight Component

Source: https://hyperframes.heygen.com/catalog/components/caption-highlight

Use the CLI to add the caption-highlight component to your project.

```bash
npx hyperframes add caption-highlight
```

--------------------------------

### Install Blue Sweater Intro Video block

Source: https://hyperframes.heygen.com/catalog/blocks/blue-sweater-intro-video

Use the CLI to add the block to your project.

```bash
npx hyperframes add blue-sweater-intro-video
```

--------------------------------

### Install YouTube Lower Third Block

Source: https://hyperframes.heygen.com/catalog/blocks/yt-lower-third

Use the CLI to add the block to your project.

```bash
npx hyperframes add yt-lower-third
```

--------------------------------

### Install All Apple Terminal Themes

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-apple-terminal-clear-dark

Use this command to install the entire collection of Apple Terminal themes.

```bash
npx hyperframes add apple-terminal
```

--------------------------------

### Install the Block

Source: https://hyperframes.heygen.com/catalog/blocks/nyc-paris-flight

Use the npx command to add the nyc-paris-flight block to your project.

```bash
npx hyperframes add nyc-paris-flight
```

--------------------------------

### Install Liquid Glass Context Menu

Source: https://hyperframes.heygen.com/catalog/blocks/liquid-glass-context-menu

Use the Hyperframes CLI to add the block to your project.

```bash
npx hyperframes add liquid-glass-context-menu
```

--------------------------------

### Install Code 3D Extrude

Source: https://hyperframes.heygen.com/catalog

Use the npx command to add the block to your project.

```bash
npx hyperframes add code-3d-extrude
```

--------------------------------

### Install Vignette Component

Source: https://hyperframes.heygen.com/catalog/components/vignette

Use the CLI to add the vignette component to your project.

```bash
npx hyperframes add vignette
```

--------------------------------

### Install Code Particle Assemble

Source: https://hyperframes.heygen.com/catalog/blocks/code-particle-assemble

Use the CLI to add the block to your project.

```bash
npx hyperframes add code-particle-assemble
```

--------------------------------

### Install Caption Blend Difference

Source: https://hyperframes.heygen.com/catalog/components/caption-blend-difference

Use the npx command to add the component to your project.

```bash
npx hyperframes add caption-blend-difference
```

--------------------------------

### Install vfx-iphone-device block

Source: https://hyperframes.heygen.com/catalog/blocks/vfx-iphone-device

Use the CLI to add the vfx-iphone-device block to your project.

```bash
npx hyperframes add vfx-iphone-device
```

--------------------------------

### Install Flash Through White block

Source: https://hyperframes.heygen.com/catalog/blocks/flash-through-white

Use the CLI to add the transition block to your project.

```bash
npx hyperframes add flash-through-white
```

--------------------------------

### Install Parallax Zoom component

Source: https://hyperframes.heygen.com/catalog/components/parallax-zoom

Use the CLI command to add the component to your project.

```bash
npx hyperframes add parallax-zoom
```

--------------------------------

### Install Apple Terminal Man Page Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-apple-terminal-man-page

Use these commands to install the specific block or the entire collection of Apple Terminal themes.

```bash
npx hyperframes add code-snippet-apple-terminal-man-page
```

```bash
npx hyperframes add apple-terminal
```

--------------------------------

### Install App Showcase block

Source: https://hyperframes.heygen.com/catalog/blocks/app-showcase

Use the npx command to add the App Showcase block to your project.

```bash
npx hyperframes add app-showcase
```

--------------------------------

### Install News Ticker Block

Source: https://hyperframes.heygen.com/catalog/blocks/news-ticker

Use the CLI to add the news-ticker block to your project.

```bash
npx hyperframes add news-ticker
```

--------------------------------

### Install World Map Block

Source: https://hyperframes.heygen.com/catalog/blocks/world-map

Use the CLI to add the world-map block to your project.

```bash
npx hyperframes add world-map
```

--------------------------------

### Texture Mask Text Example Card

Source: https://hyperframes.heygen.com/catalog/components/texture-mask-text

Example structure for a texture mask card using inline styles for the mask URL and specific CSS classes for styling.

```jsx
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/fabric-080.png')" }}>
        <div className="hf-texture-example-meta"><div className="hf-texture-example-label">Fabric 080</div><code className="hf-texture-example-class">hf-texture-fabric-080</code></div>
        <div className="hf-texture-example-shadow"><div className="hf-texture-example-word">FABRIC</div></div>
        <div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-fabric-080</code></div>
      </div>
```

--------------------------------

### Install Transitions Other Block

Source: https://hyperframes.heygen.com/catalog/blocks/transitions-other

Use the npx command to add the transitions-other block to your project.

```bash
npx hyperframes add transitions-other
```

--------------------------------

### Install Light Transitions Block

Source: https://hyperframes.heygen.com/catalog/blocks/transitions-light

Use the terminal command to add the transitions-light block to your project.

```bash
npx hyperframes add transitions-light
```

--------------------------------

### Install Lower Third Side Rule

Source: https://hyperframes.heygen.com/catalog/blocks/lt-side-rule

Use the CLI to add the block to your project.

```bash
npx hyperframes add lt-side-rule
```

--------------------------------

### Install 3D Transitions Block

Source: https://hyperframes.heygen.com/catalog/blocks/transitions-3d

Use the CLI command to add the 3D transitions block to your project.

```bash
npx hyperframes add transitions-3d
```

--------------------------------

### Install Caption Weight Shift

Source: https://hyperframes.heygen.com/catalog/components/caption-weight-shift

Use the Hyperframes CLI to add the component to your project.

```bash
npx hyperframes add caption-weight-shift
```

--------------------------------

### Install Lower Third Color Block

Source: https://hyperframes.heygen.com/catalog/blocks/lt-color-block

Use the CLI command to add the component to your project.

```bash
npx hyperframes add lt-color-block
```

--------------------------------

### Install Spotify Now Playing block

Source: https://hyperframes.heygen.com/catalog/blocks/spotify-card

Use the CLI command to add the Spotify card block to your project.

```bash
npx hyperframes add spotify-card
```

--------------------------------

### Install the BILD Lower Third block

Source: https://hyperframes.heygen.com/catalog/blocks/lower-third-bild

Use the CLI to add the block to your project.

```bash
npx hyperframes add lower-third-bild
```

--------------------------------

### Install Caption Texture component

Source: https://hyperframes.heygen.com/catalog/components/caption-texture

Use the Hyperframes CLI to add the component to your project.

```bash
npx hyperframes add caption-texture
```

--------------------------------

### Install Caption Particle Burst

Source: https://hyperframes.heygen.com/catalog/components/caption-particle-burst

Use the Hyperframes CLI to add the component to your project.

```bash
npx hyperframes add caption-particle-burst
```

--------------------------------

### Install Push Transitions Block

Source: https://hyperframes.heygen.com/catalog/blocks/transitions-push

Use the Hyperframes CLI to add the transitions-push block to your project.

```bash
npx hyperframes add transitions-push
```

--------------------------------

### Install Glitch block

Source: https://hyperframes.heygen.com/catalog/blocks/glitch

Use the CLI to add the Glitch block to your project.

```bash
npx hyperframes add glitch
```

--------------------------------

### Install Grid Transitions Block

Source: https://hyperframes.heygen.com/catalog/blocks/transitions-grid

Use the npx command to add the transitions-grid block to your project.

```bash
npx hyperframes add transitions-grid
```

--------------------------------

### Install VPN YouTube Spot Block

Source: https://hyperframes.heygen.com/catalog/blocks/vpn-youtube-spot

Run this command in your terminal to add the block to your project.

```bash
npx hyperframes add vpn-youtube-spot
```

--------------------------------

### Install Caption Gradient Fill

Source: https://hyperframes.heygen.com/catalog/components/caption-gradient-fill

Use the Hyperframes CLI to add the component to your project.

```bash
npx hyperframes add caption-gradient-fill
```

--------------------------------

### Install Visual Studio Light Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-visual-studio-light

Use the CLI to add the specific Visual Studio Light block to your project.

```bash
npx hyperframes add code-snippet-visual-studio-light
```

--------------------------------

### Install Liquid Background Block

Source: https://hyperframes.heygen.com/catalog/blocks/vfx-liquid-background

Use the CLI to add the liquid background block to your project.

```bash
npx hyperframes add vfx-liquid-background
```

--------------------------------

### Install VFX Portal Block

Source: https://hyperframes.heygen.com/catalog/blocks/vfx-portal

Use the CLI to add the VFX portal block to your project.

```bash
npx hyperframes add vfx-portal
```

--------------------------------

### Install Glitch RGB Component

Source: https://hyperframes.heygen.com/catalog/components/caption-glitch-rgb

Use the Hyperframes CLI to add the component to your project.

```bash
npx hyperframes add caption-glitch-rgb
```

--------------------------------

### Install Data Chart Block

Source: https://hyperframes.heygen.com/catalog/blocks/data-chart

Use the CLI to add the data-chart block to your project.

```bash
npx hyperframes add data-chart
```

--------------------------------

### Install High Contrast Light Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-high-contrast-light

Use the CLI to add the specific block or all available code snippet themes to your project.

```bash
npx hyperframes add code-snippet-high-contrast-light
```

```bash
npx hyperframes add code
```

--------------------------------

### Install Lower Third Kicker Name

Source: https://hyperframes.heygen.com/catalog/blocks/lt-kicker-name

Use the CLI to add the block to your project.

```bash
npx hyperframes add lt-kicker-name
```

--------------------------------

### Install Blur Transitions Block

Source: https://hyperframes.heygen.com/catalog/blocks/transitions-blur

Use the npx command to add the blur transition block to your project.

```bash
npx hyperframes add transitions-blur
```

--------------------------------

### Install Matrix Decode Component

Source: https://hyperframes.heygen.com/catalog/components/caption-matrix-decode

Use the hyperframes CLI to add the component to your project.

```bash
npx hyperframes add caption-matrix-decode
```

--------------------------------

### Install Kinetic Slam component

Source: https://hyperframes.heygen.com/catalog/components/caption-kinetic-slam

Use the hyperframes CLI to add the component to your project.

```bash
npx hyperframes add caption-kinetic-slam
```

--------------------------------

### Install Reddit Post Block

Source: https://hyperframes.heygen.com/catalog/blocks/reddit-post

Use the CLI to add the Reddit post block to your project.

```bash
npx hyperframes add reddit-post
```

--------------------------------

### Install Code Highlight Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-highlight

Use the npx command to add the code-highlight block to your project.

```bash
npx hyperframes add code-highlight
```

--------------------------------

### Install Liquid Glass Notification

Source: https://hyperframes.heygen.com/catalog/blocks/liquid-glass-notification

Use the CLI to add the liquid-glass-notification block to your project.

```bash
npx hyperframes add liquid-glass-notification
```

--------------------------------

### Install Texture Mask Text

Source: https://hyperframes.heygen.com/catalog/components/texture-mask-text

Run this command in the project root to add the component.

```bash
npx hyperframes add texture-mask-text
```

--------------------------------

### Install Parallax Layers Component

Source: https://hyperframes.heygen.com/catalog/components/caption-parallax-layers

Use the Hyperframes CLI to add the component to your project.

```bash
npx hyperframes add caption-parallax-layers
```

--------------------------------

### Install Editorial Emphasis Component

Source: https://hyperframes.heygen.com/catalog/components/caption-editorial-emphasis

Use the Hyperframes CLI to add the component to your project.

```bash
npx hyperframes add caption-editorial-emphasis
```

--------------------------------

### Install Light Leak block

Source: https://hyperframes.heygen.com/catalog/blocks/light-leak

Use the CLI to add the light-leak block to your project.

```bash
npx hyperframes add light-leak
```

--------------------------------

### Install Magnetic Block

Source: https://hyperframes.heygen.com/catalog/blocks/vfx-magnetic

Use the Hyperframes CLI to add the Magnetic block to your project.

```bash
npx hyperframes add vfx-magnetic
```

--------------------------------

### Install Flowchart Block

Source: https://hyperframes.heygen.com/catalog/blocks/flowchart

Use the npx command to add the flowchart block to your project.

```bash
npx hyperframes add flowchart
```

--------------------------------

### Install Morph Text component

Source: https://hyperframes.heygen.com/catalog/components/morph-text

Use the CLI to add the Morph Text component to your project.

```bash
npx hyperframes add morph-text
```

--------------------------------

### Install Code Typing Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-typing

Use the npx command to add the code-typing block to your project.

```bash
npx hyperframes add code-typing
```

--------------------------------

### Install US Map block

Source: https://hyperframes.heygen.com/catalog/blocks/us-map

Use the CLI to add the US Map block to your project.

```bash
npx hyperframes add us-map
```

--------------------------------

### Install the Accent Underline block

Source: https://hyperframes.heygen.com/catalog/blocks/lt-accent-underline

Use the npx command to add the block to your project.

```bash
npx hyperframes add lt-accent-underline
```

--------------------------------

### Install Light+ block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-light-plus

Use the CLI to add the specific Light+ code snippet block to your project.

```bash
npx hyperframes add code-snippet-light-plus
```

--------------------------------

### Install Code Shader Dissolve

Source: https://hyperframes.heygen.com/catalog/blocks/code-shader-dissolve

Use the npx command to add the block to your project.

```bash
npx hyperframes add code-shader-dissolve
```

--------------------------------

### Install Liquid Glass Block

Source: https://hyperframes.heygen.com/catalog/blocks/vfx-liquid-glass

Use the npx command to add the Liquid Glass block to your project.

```bash
npx hyperframes add vfx-liquid-glass
```

--------------------------------

### Add Block to Composition

Source: https://hyperframes.heygen.com/catalog/blocks/apple-money-count

HTML snippet to integrate the installed block into a host composition.

```html
<div data-composition-id="apple-money-count" data-composition-src="compositions/apple-money-count.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
```

--------------------------------

### Install Dissolve Transition Block

Source: https://hyperframes.heygen.com/catalog/blocks/transitions-dissolve

Use the terminal to add the dissolve transition block to your project.

```bash
npx hyperframes add transitions-dissolve
```

--------------------------------

### Install macOS Notification Block

Source: https://hyperframes.heygen.com/catalog/blocks/macos-notification

Use the CLI to add the notification block to your project.

```bash
npx hyperframes add macos-notification
```

--------------------------------

### Install Distortion Transitions Block

Source: https://hyperframes.heygen.com/catalog/blocks/transitions-distortion

Use the npx command to add the distortion transition block to your project.

```bash
npx hyperframes add transitions-distortion
```

--------------------------------

### Install X Post Card block

Source: https://hyperframes.heygen.com/catalog/blocks/x-post

Use the CLI command to add the X Post Card block to your project.

```bash
npx hyperframes add x-post
```

--------------------------------

### Install Code Snippet Flight

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-flight

Use the npx command to add the block to your project.

```bash
npx hyperframes add code-snippet-flight
```

--------------------------------

### Install Cross Warp Morph

Source: https://hyperframes.heygen.com/catalog/blocks/cross-warp-morph

Use the npx command to add the block to your project.

```bash
npx hyperframes add cross-warp-morph
```

--------------------------------

### Install radial transitions block

Source: https://hyperframes.heygen.com/catalog/blocks/transitions-radial

Use the CLI command to add the radial transitions block to your project.

```bash
npx hyperframes add transitions-radial
```

--------------------------------

### Install Whip Pan Block

Source: https://hyperframes.heygen.com/catalog/blocks/whip-pan

Use the terminal to add the Whip Pan block to your project.

```bash
npx hyperframes add whip-pan
```

--------------------------------

### Install iOS 26 Liquid Glass Block

Source: https://hyperframes.heygen.com/catalog/blocks/ios26-liquid-glass

Use the CLI to add the block to your project.

```bash
npx hyperframes add ios26-liquid-glass
```

--------------------------------

### Install Mechanical Transitions Block

Source: https://hyperframes.heygen.com/catalog/blocks/transitions-mechanical

Use the npx command to add the mechanical transitions block to your project.

```bash
npx hyperframes add transitions-mechanical
```

--------------------------------

### Install Light Modern Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-light-modern

Use the CLI to add the specific Light Modern block or the entire code snippet collection to your project.

```bash
npx hyperframes add code-snippet-light-modern
```

```bash
npx hyperframes add code
```

--------------------------------

### Install Light 2026 Theme Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-light-2026

Use the CLI to add the specific Light 2026 theme block or the entire collection of code snippet themes.

```bash
npx hyperframes add code-snippet-light-2026
```

```bash
npx hyperframes add code
```

--------------------------------

### Install Chromatic Radial Split

Source: https://hyperframes.heygen.com/catalog/blocks/chromatic-radial-split

Use the npx command to add the block to your project.

```bash
npx hyperframes add chromatic-radial-split
```

--------------------------------

### Install Cinematic Zoom Block

Source: https://hyperframes.heygen.com/catalog/blocks/cinematic-zoom

Use the npx command to add the cinematic-zoom block to your project.

```bash
npx hyperframes add cinematic-zoom
```

--------------------------------

### Install Thermal Distortion Block

Source: https://hyperframes.heygen.com/catalog/blocks/thermal-distortion

Use the CLI to add the thermal distortion block to your project.

```bash
npx hyperframes add thermal-distortion
```

--------------------------------

### Install Parallax Unzoom via CLI

Source: https://hyperframes.heygen.com/catalog/components/parallax-unzoom

Use the Hyperframes CLI to add the component to your project.

```bash
npx hyperframes add parallax-unzoom
```

--------------------------------

### Install Caption Emoji Pop component

Source: https://hyperframes.heygen.com/catalog/components/caption-emoji-pop

Use the Hyperframes CLI to add the component to your project.

```bash
npx hyperframes add caption-emoji-pop
```

--------------------------------

### Install Lower Third Bold Block

Source: https://hyperframes.heygen.com/catalog/blocks/lt-bold-block

Use the npx command to add the block to your project.

```bash
npx hyperframes add lt-bold-block
```

--------------------------------

### Install Gravitational Lens block

Source: https://hyperframes.heygen.com/catalog/blocks/gravitational-lens

Use the npx command to add the gravitational-lens block to your project.

```bash
npx hyperframes add gravitational-lens
```

--------------------------------

### Install Logo Outro Block

Source: https://hyperframes.heygen.com/catalog/blocks/logo-outro

Use the npx command to add the logo-outro block to your project.

```bash
npx hyperframes add logo-outro
```

--------------------------------

### Install Ripple Waves Block

Source: https://hyperframes.heygen.com/catalog/blocks/ripple-waves

Use the CLI command to add the Ripple Waves block to your project.

```bash
npx hyperframes add ripple-waves
```

--------------------------------

### Install Lower Third Dark Card

Source: https://hyperframes.heygen.com/catalog/blocks/lt-dark-card

Use the npx command to add the block to your project.

```bash
npx hyperframes add lt-dark-card
```

--------------------------------

### Install US Bubble Map

Source: https://hyperframes.heygen.com/catalog/blocks/us-map-bubble

Use the npx command to add the us-map-bubble block to your project.

```bash
npx hyperframes add us-map-bubble
```

--------------------------------

### Install Neon Glow Component

Source: https://hyperframes.heygen.com/catalog/components/caption-neon-glow

Use the CLI command to add the neon glow caption component to your project.

```bash
npx hyperframes add caption-neon-glow
```

--------------------------------

### Install Neon Accent component via CLI

Source: https://hyperframes.heygen.com/catalog/components/caption-neon-accent

Use the Hyperframes CLI to add the component to your project.

```bash
npx hyperframes add caption-neon-accent
```

--------------------------------

### Install Code Morph Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-morph

Use the CLI to add the Code Morph block to your project.

```bash
npx hyperframes add code-morph
```

--------------------------------

### Install High Contrast Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-high-contrast

Use the CLI to add the specific high-contrast code snippet block to your project.

```bash
npx hyperframes add code-snippet-high-contrast
```

--------------------------------

### Install TikTok Follow Block

Source: https://hyperframes.heygen.com/catalog/blocks/tiktok-follow

Use the npx command to add the TikTok follow block to your project.

```bash
npx hyperframes add tiktok-follow
```

--------------------------------

### Install Monokai Snippet

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-monokai

Use the CLI to add the specific Monokai code snippet block to your project.

```bash
npx hyperframes add code-snippet-monokai
```

--------------------------------

### Install Visual Studio Dark Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-visual-studio-dark

Use the CLI to add the specific Visual Studio Dark block to your project.

```bash
npx hyperframes add code-snippet-visual-studio-dark
```

--------------------------------

### Install Solarized Light Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-solarized-light

Use the CLI to add the specific Solarized Light block or the entire code snippet collection to your project.

```bash
npx hyperframes add code-snippet-solarized-light
```

```bash
npx hyperframes add code
```

--------------------------------

### Install Code Diff Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-diff

Use the npx command to add the code-diff block to your project.

```bash
npx hyperframes add code-diff
```

--------------------------------

### Install Dark+ block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-dark-plus

Use the CLI to add the specific Dark+ code snippet block to your project.

```bash
npx hyperframes add code-snippet-dark-plus
```

--------------------------------

### Install Grain Overlay via CLI

Source: https://hyperframes.heygen.com/catalog/components/grain-overlay

Use the hyperframes CLI to add the grain-overlay component to your project.

```bash
npx hyperframes add grain-overlay
```

--------------------------------

### Install Swirl Vortex Block

Source: https://hyperframes.heygen.com/catalog/blocks/swirl-vortex

Use the npx command to add the Swirl Vortex block to your project.

```bash
npx hyperframes add swirl-vortex
```

--------------------------------

### Install Spain Map block

Source: https://hyperframes.heygen.com/catalog/blocks/spain-map

Use the npx command to add the Spain Map block to your project.

```bash
npx hyperframes add spain-map
```

--------------------------------

### Install Code Scroll block

Source: https://hyperframes.heygen.com/catalog/blocks/code-scroll

Use the npx command to add the code-scroll block to your project.

```bash
npx hyperframes add code-scroll
```

--------------------------------

### Install North Korea Locked Down Block

Source: https://hyperframes.heygen.com/catalog/blocks/north-korea-locked-down

Command to add the block to your project via the terminal.

```bash
npx hyperframes add north-korea-locked-down
```

--------------------------------

### Agent Usage Instructions

Source: https://hyperframes.heygen.com/catalog/components/texture-mask-text

Instructions for an AI agent to implement the texture mask component, including CSS setup and drop shadow application.

```text
Use the Texture Mask Text catalog component.

1. From the project root, run:
   npx hyperframes add texture-mask-text
2. That command creates this installed snippet:
   compositions/components/texture-mask-text/texture-mask-text.html
3. Open that file and paste the real <style> block
   near the bottom into the composition once. That CSS defines
   hf-texture-text and every hf-texture-* class.
4. Apply this class to the target text:
   class="hf-texture-text hf-texture-brick"
5. For another material, copy one hf-texture-* class
   from the Texture Examples cards.
6. This is the proper way to apply drop shadow
   to textured text: wrap the text and put
   filter on the wrapper, not on the text.
   Use this markup:
   <div style="filter: drop-shadow(1px 2px 1px rgba(0,0,0,0.48))">
     <div class="hf-texture-text hf-texture-brick">TEXT</div>
   </div>
```

--------------------------------

### Install Shimmer Sweep via CLI

Source: https://hyperframes.heygen.com/catalog/components/shimmer-sweep

Use the Hyperframes CLI to add the Shimmer Sweep component to your project.

```bash
npx hyperframes add shimmer-sweep
```

--------------------------------

### Install US Hex Grid Map

Source: https://hyperframes.heygen.com/catalog/blocks/us-map-hex

Use the CLI to add the US Hex Grid Map block to your project.

```bash
npx hyperframes add us-map-hex
```

--------------------------------

### Install Flowchart Vertical Block

Source: https://hyperframes.heygen.com/catalog/blocks/flowchart-vertical

Use the npx command to add the flowchart-vertical block to your project.

```bash
npx hyperframes add flowchart-vertical
```

--------------------------------

### Install VFX Shatter Block

Source: https://hyperframes.heygen.com/catalog/blocks/vfx-shatter

Use the Hyperframes CLI to add the shatter effect block to your project.

```bash
npx hyperframes add vfx-shatter
```

--------------------------------

### Install macOS Tahoe Liquid Glass Block

Source: https://hyperframes.heygen.com/catalog/blocks/macos-tahoe-liquid-glass

Use the Hyperframes CLI to add the block to your project.

```bash
npx hyperframes add macos-tahoe-liquid-glass
```

--------------------------------

### Install Ridged Burn via CLI

Source: https://hyperframes.heygen.com/catalog/blocks/ridged-burn

Use the npx command to add the ridged-burn block to your project.

```bash
npx hyperframes add ridged-burn
```

--------------------------------

### Install SDF Iris block

Source: https://hyperframes.heygen.com/catalog/blocks/sdf-iris

Use the npx command to add the SDF Iris block to your project.

```bash
npx hyperframes add sdf-iris
```

--------------------------------

### Install Dark 2026 Theme

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-dark-2026

Use the CLI to add the specific Dark 2026 theme block to your project.

```bash
npx hyperframes add code-snippet-dark-2026
```

--------------------------------

### Install Instagram Follow Block

Source: https://hyperframes.heygen.com/catalog/blocks/instagram-follow

Use the npx command to add the Instagram Follow block to your project.

```bash
npx hyperframes add instagram-follow
```

--------------------------------

### Install Apple Money Count Block

Source: https://hyperframes.heygen.com/catalog/blocks/apple-money-count

Command to add the block to your project via the HyperFrames CLI.

```bash
npx hyperframes add apple-money-count
```

--------------------------------

### Install VFX Text Cursor block

Source: https://hyperframes.heygen.com/catalog/blocks/vfx-text-cursor

Use the CLI to add the VFX Text Cursor block to your project.

```bash
npx hyperframes add vfx-text-cursor
```

--------------------------------

### Install US Flow Map Block

Source: https://hyperframes.heygen.com/catalog/blocks/us-map-flow

Use the CLI command to add the US Flow Map block to your project.

```bash
npx hyperframes add us-map-flow
```

--------------------------------

### Install Dark Modern block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-dark-modern

Use the CLI to add the specific Dark Modern code snippet block to your project.

```bash
npx hyperframes add code-snippet-dark-modern
```

--------------------------------

### Install Apple Terminal Solid Colors Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-apple-terminal-solid-colors

Use the CLI to add the specific block or the entire collection of Apple Terminal themes to your project.

```bash
npx hyperframes add code-snippet-apple-terminal-solid-colors
```

```bash
npx hyperframes add apple-terminal
```

--------------------------------

### Install Apple Terminal Basic Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-apple-terminal-basic

Use the CLI to add the specific Apple Terminal Basic block to your project.

```bash
npx hyperframes add code-snippet-apple-terminal-basic
```

--------------------------------

### Install Apple Terminal Clear Light

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-apple-terminal-clear-light

Use the npx command to add the specific Clear Light terminal block to your project.

```bash
npx hyperframes add code-snippet-apple-terminal-clear-light
```

--------------------------------

### Install Apple Terminal Grass block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-apple-terminal-grass

Use the npx command to add the specific Grass theme block to your project.

```bash
npx hyperframes add code-snippet-apple-terminal-grass
```

--------------------------------

### Install Apple Terminal Pro block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-apple-terminal-pro

Use the npx command to add the specific Apple Terminal Pro block to your project.

```bash
npx hyperframes add code-snippet-apple-terminal-pro
```

--------------------------------

### Install Apple Terminal Ocean Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-apple-terminal-ocean

Use the CLI to add the specific Apple Terminal Ocean block to your project.

```bash
npx hyperframes add code-snippet-apple-terminal-ocean
```

--------------------------------

### Install Apple Terminal Homebrew Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-apple-terminal-homebrew

Use the CLI to add the specific Homebrew theme block or the entire collection of Apple Terminal themes to your project.

```bash
npx hyperframes add code-snippet-apple-terminal-homebrew
```

```bash
npx hyperframes add apple-terminal
```

--------------------------------

### Generate VPN YouTube Spot Video

Source: https://hyperframes.heygen.com/catalog/blocks/vpn-youtube-spot

Use this prompt with HyperFrames by HeyGen to generate the 7-second video asset.

```text
HyperFrames by HeyGen make me a 7s video with Apple-style bold font and styling: a phone scrolling in an app store, clicking on a friendly VPN app called VPN, installing it, then snapping down and fading to a white background. Make it snappy and polished for a YouTube insert, with sound effects, 60fps, and 1920x1080.
```

--------------------------------

### Embed Blue Sweater Intro Video in composition

Source: https://hyperframes.heygen.com/catalog/blocks/blue-sweater-intro-video

Add the block to your host composition using the data-composition-id and associated attributes.

```html
<div data-composition-id="blue-sweater-intro-video" data-composition-src="compositions/blue-sweater-intro-video.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
```

--------------------------------

### Integrate App Showcase in composition

Source: https://hyperframes.heygen.com/catalog/blocks/app-showcase

Add the block to your host composition using the data-composition-id attribute and associated configuration parameters.

```html
<div data-composition-id="app-showcase" data-composition-src="compositions/app-showcase.html" data-start="0" data-duration="5.5" data-track-index="1" data-width="1920" data-height="1080"></div>
```

--------------------------------

### Add Visual Studio Light to Composition

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-visual-studio-light

Include the block in your HTML composition by defining the composition ID and source path.

```html
<div
  data-composition-id="code-snippet-visual-studio-light"
  data-composition-src="compositions/code-snippet-visual-studio-light.html"
  data-start="0"
  data-duration="11"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>
```

--------------------------------

### Install Apple Terminal Clear Dark Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-apple-terminal-clear-dark

Use the npx command to add the specific terminal block to your project.

```bash
npx hyperframes add code-snippet-apple-terminal-clear-dark
```

--------------------------------

### Integrate Spotify Now Playing block

Source: https://hyperframes.heygen.com/catalog/blocks/spotify-card

Add the block to your host composition using the data-composition-id and associated configuration attributes.

```html
<div data-composition-id="spotify-card" data-composition-src="compositions/spotify-card.html" data-start="0" data-duration="5" data-track-index="1" data-width="1080" data-height="1920"></div>
```

--------------------------------

### Install Apple Terminal Silver Aerogel

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-apple-terminal-silver-aerogel

Use the npx command to add the specific Silver Aerogel terminal block to your project.

```bash
npx hyperframes add code-snippet-apple-terminal-silver-aerogel
```

--------------------------------

### Install Apple Terminal Novel Block

Source: https://hyperframes.heygen.com/catalog/blocks/code-snippet-apple-terminal-novel

Use the npx command to add the specific Apple Terminal Novel block to your project.

```bash
npx hyperframes add code-snippet-apple-terminal-novel
```

--------------------------------

### Implement Mechanical Transitions in HTML

Source: https://hyperframes.heygen.com/catalog/blocks/transitions-mechanical

Add the block to your host composition using the data-composition-id and associated configuration attributes.

```html
<div data-composition-id="transitions-mechanical" data-composition-src="compositions/transitions-mechanical.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
```
Tokens:
Raw