Anamorphic Streak Flare

Add it to your video

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

index.html

<div
  data-composition-id="vfx-anamorphic-flare"
  data-composition-src="compositions/vfx-anamorphic-flare.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:

--intensity — Streak intensity. Defaults to 5.
--threshold — High-pass threshold. Defaults to 0.3.
--streaklength — Streak length gain. Defaults to 1.
--tint — Streak tint. Defaults to #7a8aff.
--bloomradius — Bloom radius. Defaults to 0.
--timescale — Drift rate. Defaults to 0.5.
--emitters — Emitter count. Defaults to 140.
--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
`intensity`	`5`	0 to 20, step 0.1
`threshold`	`0.3`	0 to 1, step 0.01
`streakLength`	`1`	0.1 to 6, step 0.05
`tint`	`#7a8aff`	color
`bloomRadius`	`0`	0px to 80px, step 1px
`timeScale`	`0.5`	0 to 3, step 0.05
`emitters`	`140`	1 to 400, step 1
`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="vfx-anamorphic-flare"
  data-composition-src="compositions/vfx-anamorphic-flare.html"
  data-variable-values='{"intensity":5,"threshold":0.3,"streakLength":1,"tint":"#7a8aff","bloomRadius":0,"timeScale":0.5,"emitters":140,"backdrop":"#04040a"}'
></div>

Tagged vfx background showcase optical canvas.

Catalog

Anamorphic Streak Flare

Add it to your video

Change how it looks

Variables

Related topics