Component · Behaviors Wire Graph

01 · Trigger → Action → Target3-node wire

Triggerfires when

When

Actiondoes

Then

Targeton

On

cta

spec · cta-pulse-01

02 · Two triggers fan into one actionmulti-wire

Trigger Afires when

On click

Trigger Bfires when

On scroll

Actionboth routes

Reveal aurora

03 · Compile-to-JSON readoutBehaviour spec

{
  "id": "cta-pulse-01",
  "when": "click",
  "do": "scale",
  "on": "#cta",
  "duration": 320,
  "easing": "cubic-bezier(0.22, 1, 0.36, 1)"
}

UsageAPI surface

Authoring contract

Each .lsd-bwg__node declares its data-role and exposes ports. The host computes bezier paths between port positions, animates a packet along the wire on run, then applies the action to the chosen target via data-fx. The dropdown selections compile to a JSON Behaviour spec.

Hook	Values	Effect
`data-role`	trigger · action · target	Node type. Drives port placement + color.
`data-port`	ident	Hook for wire endpoints.
`data-fx` on host	scale · fade · toggle	Which CSS transition the target plays on run.
`data-running`	boolean	True during packet travel.
JS event	`bwg:run`	Fires with `detail.spec` (JSON).
`prefers-reduced-motion`	—	Packet snap to target; action still runs.

View HTML

<div class="lsd-bwg" data-fx="scale">
  <svg class="lsd-bwg__svg"><path class="lsd-bwg__wire" d="…"/></svg>
  <div class="lsd-bwg__node" data-role="trigger">…</div>
  <div class="lsd-bwg__node" data-role="action">…</div>
  <div class="lsd-bwg__node" data-role="target">…</div>
</div>