Liquid Glass Widgets

Live preview needs the chrome://flags/#canvas-draw-element flag switched on. Without it this item’s screen renders black. Rendering from the CLI switches it on for you. How it works

Add it to your video

It runs for 8 seconds at 1920×1080. Paste this into your composition:

index.html

<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>

Move it in time with data-start. Put it on a different timeline row with data-track-index. See data attributes for the rest.Tagged html-in-canvas liquid-glass-html-in-canvas webgpu.

Catalog

Add it to your video

Related topics