Component

Interface

The component in isolation, at the scale the program draws it: 128×86 clip cells with an 18px label strip, 3px corners, 1px hairlines, one amber accent for anything live and cue blue for anything sent to the preview monitor only.

Back to the site

Warehouse Set • Composition 1

Triggered Drop on every layer 59.9 fps

Master

opacity 82%

gain 1.00

bpm 128.00 size w 1920 h 1080

2 groups · 3 layers · 5 columns

Layers + ×

Master Normal

Opacity 82%

Beds

Opacity 100%

Texture

Opacity 64%

auto Next clip

Screen

Gain 0.84

Backdrop bypassed

Opacity 35%

Add

Content

Opacity 88%

Text

Opacity 100%

auto Off

Normal

+ layer

Beds 100% · Normal

Texture 64% Screen

Backdrop 35% Add

Content 88% · Screen

Text 100% Normal

Click a thumbnail to trigger · click a label to cue it to the preview only · Space fires the selected column

Preview Composition

Inspector Layer · Texture

Kaleidoscope

Segments 9

Rotation 101

lfo · sine · 1/4 on beats

Bloom

Threshold 66%

Amount 40%

audio · band 2 peak

drop an effect here

Outputs 2 targets

• Projector DP-2 · 1920×1080 · Fill

• LED wall HDMI-1 · 2560×720 · Fit

Effects search… drag one onto a clip, a layer, a group or the master

Colour correct HSV shift Levels Duotone Posterize Threshold Colour pass Invert

Using it

The markup lives in components/app-ui.fragment.html and is injected into this page and the landing page by node scripts/build-html.js. Edit the fragment, never the copies. Styles come from the component layer in src/input.css; behaviour is optional and lives in assets/app-ui.js.