Skip to main content

​
Install

Terminal
That writes one file: compositions/cosmic-orb.html.

​
Add it to your video

It runs for 10 seconds at 1920×1080. Paste this into your composition:
index.html
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 how it looks

Set these CSS variables on the block:
  • --hue — Nebula hue. Defaults to 268.
  • --accent — Accent hue. Defaults to 196.
  • --spin — Spin rate (turns per second). Defaults to 0.035.
  • --stars — Star density. Defaults to 1.
  • --glow — Glow intensity. Defaults to 1.
  • --size — Orb size (fraction of frame height). Defaults to 0.86.
  • --pulse — Beat pulse (0-1, flat value when no envelope is set). Defaults to 0.
  • --pulseenvelope — Beat pulse envelope: comma-separated 0-1 samples spread evenly across the clip. Defaults to “.
  • --backdrop — Backdrop. Defaults to #04040a.
Tagged webgl shader background showcase 3d.