Cosmic Orb

Add it to your video

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

index.html

<div
  data-composition-id="cosmic-orb"
  data-composition-src="compositions/cosmic-orb.html"
  data-start="0"
  data-duration="10"
  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 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.

Variables

Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element:

Variable	Default	Accepts
`hue`	`268`	0deg to 360deg, step 1deg
`accent`	`196`	0deg to 360deg, step 1deg
`spin`	`0.035`	0turns/s to 0.5turns/s, step 0.005turns/s
`stars`	`1`	0 to 2, step 0.05
`glow`	`1`	0 to 2, step 0.05
`size`	`0.86`	0.2 to 1.2, step 0.01
`pulse`	`0`	0 to 1, step 0.01
`pulseEnvelope`	“	string
`backdrop`	`#04040a`	color

Set them with data-variable-values on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one:

<div
  data-composition-id="cosmic-orb"
  data-composition-src="compositions/cosmic-orb.html"
  data-variable-values='{"hue":268,"accent":196,"spin":0.035,"stars":1,"glow":1,"size":0.86,"pulse":0,"pulseEnvelope":"","backdrop":"#04040a"}'
></div>

Tagged webgl shader background showcase 3d.

Catalog

Add it to your video

Change how it looks

Variables

Related topics