macOS Tahoe Liquid Glass Desktop

html-in-canvas 3d macos tahoe gltf

Requires Chrome flag. Enable chrome://flags/#canvas-draw-element for live preview. Rendering via CLI enables the flag automatically. Learn more.

Add it to a project

Ask your agent

Add the macOS Tahoe Liquid Glass Desktop block from the HyperFrames Catalog to this project.
Replace the demo content with mine and match the existing design and timing.

Install from the terminal

npx hyperframes add macos-tahoe-liquid-glass

Details

Property	Value
Type	Block
Dimensions	1920×1080
Duration	15s

Installed files

File	Target	Type
`macos-tahoe-liquid-glass.html`	`compositions/macos-tahoe-liquid-glass.html`	hyperframes:composition
`models/macbook.glb`	`models/macbook.glb`	hyperframes:asset
`assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg`	`assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg`	hyperframes:asset
`assets/icons/finder.png`	`assets/icons/finder.png`	hyperframes:asset
`assets/icons/safari.jpg`	`assets/icons/safari.jpg`	hyperframes:asset
`assets/icons/mail.jpg`	`assets/icons/mail.jpg`	hyperframes:asset
`assets/icons/calendar.jpg`	`assets/icons/calendar.jpg`	hyperframes:asset
`assets/icons/photos.jpg`	`assets/icons/photos.jpg`	hyperframes:asset
`assets/icons/messages.jpg`	`assets/icons/messages.jpg`	hyperframes:asset
`assets/icons/toast-messages.jpg`	`assets/icons/toast-messages.jpg`	hyperframes:asset
`assets/icons/music.jpg`	`assets/icons/music.jpg`	hyperframes:asset
`assets/icons/brave.jpg`	`assets/icons/brave.jpg`	hyperframes:asset
`assets/icons/slack.jpg`	`assets/icons/slack.jpg`	hyperframes:asset
`assets/icons/files.jpg`	`assets/icons/files.jpg`	hyperframes:asset
`assets/icons/dock-finder.png`	`assets/icons/dock-finder.png`	hyperframes:asset
`assets/icons/dock-safari.jpg`	`assets/icons/dock-safari.jpg`	hyperframes:asset
`assets/icons/dock-mail.jpg`	`assets/icons/dock-mail.jpg`	hyperframes:asset
`assets/icons/dock-photos.jpg`	`assets/icons/dock-photos.jpg`	hyperframes:asset
`assets/icons/dock-music.jpg`	`assets/icons/dock-music.jpg`	hyperframes:asset

Use it

Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video. Wiring it by hand. The installed block can be added to a host composition with:

<div data-composition-id="macos-tahoe-liquid-glass" data-composition-src="compositions/macos-tahoe-liquid-glass.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>

⌘I

Overview

Code Animations

Captions

Interface & VFX

Social Overlays

Lower Thirds

Transitions

Code Themes

Complete Scenes

Data & Diagrams

Effects & Annotations

Titles & Layouts

macOS Tahoe Liquid Glass Desktop

Add it to a project

Ask your agent

Install from the terminal

Details

Use it

​Add it to a project

​Ask your agent

​Install from the terminal

​Details

​Use it

​Related topics

Add it to a project

Ask your agent

Install from the terminal

Details

Use it

Related topics