Liquid Background

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 12 seconds at 1920×1080. Paste this into your composition:

index.html

<div
  data-composition-id="vfx-liquid-background"
  data-composition-src="compositions/vfx-liquid-background.html"
  data-start="0"
  data-duration="12"
  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.

Change the colors

Set these CSS variables on the block:

--bg-color — Background. Defaults to #0a0e17.
--text-color — Text color. Defaults to #e2e8f0.

Tagged html-in-canvas liquid webgl displacement background.

Catalog

Add it to your video

Change the colors

Related topics