Jonathon's AI Wiki

HyperFrames Catalog — VFX, Liquid Glass & Device Frames

7 min read

Source: HeyGen HyperFrames catalog — VFX, liquid glass & device frames (https://hyperframes.heygen.com/catalog), pulled 2026-06-27; pages archived under ai-research/hyperframes-block-*.md.

This is the GPU-effects corner of the HyperFrames block catalog: WebGL VFX shaders (shatter, portal, magnetic, liquid background/glass, chromatic text), the Apple-style WebGPU “liquid glass” UI family (iOS 26 home screen, frosted widgets, notifications, context menus, media controls), and 3D device-frame showcases that render live HTML onto GLTF iPhone/MacBook models (iPhone & MacBook 3D, iOS 26, macOS Tahoe). Every entry is a 1920×1080 Block installed with npx hyperframes add <slug> and dropped into a host composition. Most rely on the html-in-canvas pipeline and need a Chrome flag for live preview; the CLI render path enables that flag automatically.

Key Takeaways

  • Install + place is identical for every block: npx hyperframes add <slug> copies the composition (and any assets) into compositions/, then you add <div data-composition-id="<slug>" data-composition-src="compositions/<slug>.html" data-start="0" data-duration="<seconds>" data-track-index="1" data-width="1920" data-height="1080"></div> to your host composition. All 15 blocks are 1920×1080.
  • Most need a Chrome flag for live preview — chrome://flags/#canvas-draw-element — because they use the html-in-canvas pipeline. Rendering via the CLI enables the flag automatically, so it only matters for in-browser preview. The two exceptions that carry no flag warning are ui-3d-reveal and macos-notification (plain DOM/CSS, not canvas-composited) ^[inferred from the absence of the html-in-canvas tag and the Chrome-flag warning on those two pages].
  • GPU tiers (from tags): WebGL shader VFX — vfx-liquid-background, vfx-liquid-glass, vfx-magnetic, vfx-portal, vfx-shatter; canvas shader/3D — vfx-text-cursor, vfx-iphone-device; WebGPU “liquid glass” — ios26-liquid-glass and the four liquid-glass-* UI blocks. WebGPU blocks are the most GPU-demanding ^[inferred: WebGPU + real-time aurora shader is heavier than the WebGL/DOM blocks].
  • Device frames render live HTML onto a GLTF model: vfx-iphone-device (iPhone 15 Pro Max + MacBook Pro), ios26-liquid-glass (iPhone), and macos-tahoe-liquid-glass (MacBook) bundle .glb models. The device “screen” is live HTML-in-Canvas, so you stage your own UI/screenshot/clip as that screen content ^[inferred: the catalog calls it “live HTML-in-Canvas screen content”; swapping in your own markup is the implied product-demo workflow].
  • Liquid-glass UI family (liquid-glass-context-menu, -media-controls, -notification, -widgets) share one look: frosted glass panels (menus, media controls, notification cards, stat/pill widgets) drifting over a WebGPU aurora shader background — 8s each, ideal as Apple-style overlay reveals.
  • When to use: VFX shaders for hero moments / transitions / logo stings; device frames for app & product demos; the liquid-glass family for premium Apple-flavored UI reveals and overlays.

VFX, Liquid Glass & Device Blocks

BlockslugDurationRender tech (tags)Chrome flag
iPhone & MacBook 3D Showcasevfx-iphone-device15shtml-in-canvas, 3D/GLTFYes
Liquid Backgroundvfx-liquid-background12sWebGL displacementYes
Liquid Glassvfx-liquid-glass20sWebGLYes
Magneticvfx-magnetic15sWebGLYes
Portalvfx-portal10sWebGLYes
Shattervfx-shatter12sWebGLYes
VFX Text Cursorvfx-text-cursor8shtml-in-canvas shaderYes
3D UI Revealui-3d-reveal13sCSS 3D (DOM)No
iOS 26 Liquid Glass Home Screenios26-liquid-glass15sWebGPU + 3D/GLTFYes
Liquid Glass Context Menuliquid-glass-context-menu8sWebGPU auroraYes
Liquid Glass Media Controlsliquid-glass-media-controls8sWebGPU auroraYes
Liquid Glass Notificationliquid-glass-notification8sWebGPU auroraYes
Liquid Glass Widgetsliquid-glass-widgets8sWebGPU auroraYes
macOS Notificationmacos-notification5sDOM/CSS overlayNo
macOS Tahoe Liquid Glass Desktopmacos-tahoe-liquid-glass15shtml-in-canvas, 3D/GLTFYes

iPhone & MacBook 3D Showcase (vfx-iphone-device)

  • Renders: real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, a morphing glass lens, product-review camera choreography, and a 360° turntable.
  • Tags: html-in-canvas 3d device iphone macbook gltf
  • Assets bundled: models/iphone.glb, models/macbook.glb, plus hyperframes-mobile.png / hyperframes-desktop.png placeholder screens — swap your own UI/screenshot into the screen content.
  • Usage: npx hyperframes add vfx-iphone-device; place at 15s. Needs the Chrome flag for preview.

Liquid Background (vfx-liquid-background)

  • Renders: organic liquid simulation via vertex displacement on a subdivided plane; HTML content floats above a rippling fluid surface with real-time wave dynamics.
  • Tags: html-in-canvas liquid webgl displacement background
  • Props/assets: single composition file; WebGL background layer behind your foreground HTML.
  • Usage: npx hyperframes add vfx-liquid-background; place at 12s. Needs the Chrome flag for preview.

Liquid Glass (vfx-liquid-glass)

  • Renders: WebGL “liquid glass” VFX composition (the catalog page gives only a minimal “VFX composition block” description).
  • Tags: html-in-canvas webgl
  • Props/assets: single composition file. Longest VFX block at 20s.
  • Usage: npx hyperframes add vfx-liquid-glass; place at 20s. Needs the Chrome flag for preview.

Magnetic (vfx-magnetic)

  • Renders: WebGL “magnetic” VFX composition (minimal catalog description) ^[inferred: behaviour beyond the “magnetic” name not detailed on the catalog page].
  • Tags: html-in-canvas webgl
  • Props/assets: single composition file.
  • Usage: npx hyperframes add vfx-magnetic; place at 15s. Needs the Chrome flag for preview.

Portal (vfx-portal)

  • Renders: WebGL “portal” VFX composition (minimal catalog description). Shortest of the pure-shader VFX blocks.
  • Tags: html-in-canvas webgl
  • Props/assets: single composition file.
  • Usage: npx hyperframes add vfx-portal; place at 10s. Needs the Chrome flag for preview.

Shatter (vfx-shatter)

  • Renders: WebGL “shatter” VFX composition (minimal catalog description) — a shatter/break effect ^[inferred from the name; effect mechanics not detailed on the page].
  • Tags: html-in-canvas webgl
  • Props/assets: single composition file.
  • Usage: npx hyperframes add vfx-shatter; place at 12s. Needs the Chrome flag for preview.

VFX Text Cursor (vfx-text-cursor)

  • Renders: dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage; canvas-based shader post-processing with spectral color edges.
  • Tags: html-in-canvas text shader cursor chromatic
  • Props/assets: single composition file; the headline/text is the content you customize ^[inferred: it is a text-reveal block].
  • Usage: npx hyperframes add vfx-text-cursor; place at 8s. Needs the Chrome flag for preview.

3D UI Reveal (ui-3d-reveal)

  • Renders: perspective 3D reveal animation for UI elements.
  • Tags: showcase 3d reveal
  • Props/assets: single composition file; standard DOM/CSS — no Chrome flag warning on the page, so no flag needed ^[inferred from the absence of the html-in-canvas tag and Chrome-flag warning].
  • Usage: npx hyperframes add ui-3d-reveal; place at 13s.

iOS 26 Liquid Glass Home Screen (ios26-liquid-glass)

  • Renders: 3D iPhone with a normal iOS 26 home screen — liquid-glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model.
  • Tags: liquid-glass-html-in-canvas webgpu 3d iphone ios26 notifications gltf html-in-canvas
  • Assets bundled: models/iphone.glb and lib/liquid-glass.iife.js (the shared liquid-glass runtime). WebGPU — most GPU-demanding tier.
  • Usage: npx hyperframes add ios26-liquid-glass; place at 15s. Needs the Chrome flag for preview.

Liquid Glass Context Menu (liquid-glass-context-menu)

  • Renders: a frosted-glass context-menu panel drifting over an aurora shader background.
  • Tags: html-in-canvas liquid-glass-html-in-canvas webgpu
  • Props/assets: single composition file; part of the WebGPU liquid-glass UI family.
  • Usage: npx hyperframes add liquid-glass-context-menu; place at 8s. Needs the Chrome flag for preview.

Liquid Glass Media Controls (liquid-glass-media-controls)

  • Renders: frosted-glass media-control panels spreading over an aurora shader background.
  • Tags: html-in-canvas liquid-glass-html-in-canvas webgpu
  • Props/assets: single composition file; part of the WebGPU liquid-glass UI family.
  • Usage: npx hyperframes add liquid-glass-media-controls; place at 8s. Needs the Chrome flag for preview.

Liquid Glass Notification (liquid-glass-notification)

  • Renders: frosted-glass notification cards floating over an aurora shader background.
  • Tags: html-in-canvas liquid-glass-html-in-canvas webgpu
  • Props/assets: single composition file; part of the WebGPU liquid-glass UI family. (Compare macos-notification for a lighter DOM-only banner.)
  • Usage: npx hyperframes add liquid-glass-notification; place at 8s. Needs the Chrome flag for preview.

Liquid Glass Widgets (liquid-glass-widgets)

  • Renders: frosted-glass stat cards, a showcase panel, and pill chips over an aurora shader background.
  • Tags: html-in-canvas liquid-glass-html-in-canvas webgpu
  • Props/assets: single composition file; part of the WebGPU liquid-glass UI family.
  • Usage: npx hyperframes add liquid-glass-widgets; place at 8s. Needs the Chrome flag for preview.

macOS Notification (macos-notification)

  • Renders: an animated macOS-style notification banner with app icon and message.
  • Tags: social overlay notification
  • Props/assets: single composition file; standard DOM/CSS overlay — no Chrome flag warning, so no flag needed ^[inferred from the absence of the html-in-canvas tag and Chrome-flag warning]. Shortest block at 5s.
  • Usage: npx hyperframes add macos-notification; place at 5s.

macOS Tahoe Liquid Glass Desktop (macos-tahoe-liquid-glass)

  • Renders: 3D MacBook with a macOS Tahoe-style desktop — glass menu bar, Finder window, dock — and a cinematic device camera move.
  • Tags: html-in-canvas 3d macos tahoe gltf
  • Assets bundled: models/macbook.glb and models/iphone.glb.
  • Usage: npx hyperframes add macos-tahoe-liquid-glass; place at 15s. Needs the Chrome flag for preview.

Try It

  • Add a hero VFX background: npx hyperframes add vfx-liquid-background, then place the div at data-track-index="0" (or below your text track) so your headline floats over the rippling fluid.
  • Build a product demo: npx hyperframes add vfx-iphone-device, swap the placeholder hyperframes-mobile.png / hyperframes-desktop.png screen content for your own app UI, and let the 360° turntable + camera choreography carry the reveal.
  • Stack a premium UI overlay: add liquid-glass-notification or liquid-glass-widgets on a track above your base composition for an 8s Apple-style frosted-glass beat.
  • Preview locally: enable chrome://flags/#canvas-draw-element before previewing any html-in-canvas block; skip it if you go straight to npx hyperframes render, which sets the flag for you.
  • Pick the lighter notification (macos-notification, no flag, 5s) when you just need a quick banner; reach for liquid-glass-notification (WebGPU aurora) when you want the premium look.

Graph View

Backlinks