Liquid Glass Widgets

Frosted glass stat cards, showcase panel and pill chips over an aurora shader background

Liquid Glass Widgets

Frosted glass stat cards, showcase panel and pill chips over an aurora shader background

html-in-canvas liquid-glass-html-in-canvas webgpu

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

Install

Terminal

npx hyperframes add liquid-glass-widgets

Details

Property	Value
Type	Block
Dimensions	1920×1080
Duration	8s

Files

File	Target	Type
liquid-glass-widgets.html	compositions/liquid-glass-widgets.html	hyperframes:composition

Usage

After installing, add the block to your host composition:

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