Laserglow Component Library

01 · Map

Global Reach Map

Equirectangular world map with ringed headquarters markers and pulsing distributor pins. Pins are plotted from latitude / longitude via a plate-carrée projection, so the network is data-driven and easy to update.

How to use

SourceFirst Contact Sales Deck, Slide 3

NeedsDesign tokens (:root) + the map image assets/Equirectangular_projection_SW.jpg

Add it

Copy the lg-worldmap CSS block (and the lg-map-legend styles if you want the key).
Drop in an empty container: <div class="lg-worldmap" id="myMap"></div>
Plot the pins: LG.worldmap(document.getElementById('myMap'))

Customize

Change the network: edit the distributors and hq arrays (each is [lat, lon]) inside LG.worldmap.
Pin look: tune .lg-wpin-dep / .lg-wpin-hq (size, glow, pulse).
Map fade: adjust opacity and the mask-image on .lg-worldmap::before.

lg-worldmap Live network

Headquarters (US & Canada) Distributor network

02 · Diagram

Safety Island

A facility grid that animates the core doctrine point: one validated zone is a starting point, not the finish line. It cycles between a single controlled "island" and facility-wide operational maturity, with a dynamic caption and a risk-warning card.

How to use

SourceFirst Contact Sales Deck, Slide 12

NeedsDesign tokens (:root) only. No external assets.

Add it

Copy the lg-island* CSS block.
Paste the markup: the lg-island-label, the lg-island-map grid (keep the data-island-* hooks), and the warn card.
Init: LG.island(rootEl) where rootEl wraps those nodes.

Customize

Rename zones by editing the .lg-island-tile text; mark the starting zone with data-island-center + class on.
Cycle speed: change the 5000 (ms) interval in LG.island.
Captions: edit the LABELS map; risk copy lives in the .lg-warn-card.
Static (no cycling): drop the setInterval and just call set('validated').

lg-island Cycling

One validated zone, the rest uncontrolled

Dock

Roll-up
door

Aisle

Blind
corner

Validated
zone

Crane
zone

Walkway

MHE
zone

Intersection

The risk: A Safety Island that never expands into a full rollout leaves the rest of the environment inconsistent. Validation has to lead to facility-wide coverage.

03 · Chart

Forgetting Curve

Ebbinghaus' retention decay: recall drops sharply after training and keeps falling without reinforcement. The second line shows retention held high when cues are embedded in the environment, and the shaded band is the memory gap that continuous visual control closes.

How to use

SourceScientific Proofs KB, Forgetting Curve (Ebbinghaus)

NeedsDesign tokens (:root) + the shared .lg-chart / .lg-curve-svg styles. No assets, no libraries.

Add it

Copy the shared curve CSS block and the inline SVG markup.
Draw / replay it: LG.forgetting(rootEl) (adds .playing to the SVG).

Customize

Reshape the curves by editing the two <path class="draw"> d values (retention is the Y axis, time the X).
Edit the shaded .fade path to match if you move the lines.
Draw speed: the 1.7s in @keyframes-driven .draw rule; reveal timing via the .delay / .fade animation-delays.
Relabel axis ticks and legend text in the markup.

lg-forgetting Retention decay

Training alone (recall decays) With continuous visual reinforcement Memory gap Laserglow closes

04 · Chart

Bradley Curve

DuPont's safety-culture maturity model. Incident rates fall as organizations move through four stages, from Reactive to Interdependent. Most facilities sit at Dependent, leaning on rules and supervision; the animated marker shows the climb Laserglow accelerates by strengthening environmental controls.

How to use

SourceScientific Proofs KB, Bradley Curve (DuPont)

NeedsDesign tokens (:root) + the shared .lg-chart / .lg-curve-svg styles. No assets, no libraries.

Add it

Copy the shared curve CSS block and the inline SVG markup.
Draw / replay it: LG.bradley(rootEl) (adds .playing to the SVG).

Customize

Rename the four stages in the <text> labels; move nodes by editing their cx/cy and the curve d.
Change "you are here": move the .node.now ring + caption to a different stage.
The travelling marker follows the #bcJourney path via animateMotion; edit that path to change where the climb starts and ends.

lg-bradley Maturity path

Incident rate falls as culture matures Typical starting point: Dependent

05 · Diagram

Safety Island · Intersections

The Safety Island idea on a facility plan. Forklift aisles cross pedestrian walkways, and every crossing is an intersection, a Risk Unit. It cycles between one managed crossing (the Safety Island) and every crossing managed; the coverage readout shows why a single island barely moves total exposure.

How to use

SourceSafety Islands doctrine + Intersections Risk Unit (KB). Sibling of lg-island.

NeedsDesign tokens (:root) only. The facility and reticles are drawn by JS. No assets, no libraries.

Add it

Copy the lg-fac / lg-xn CSS block and the markup skeleton (HUD + <svg> with the data-fac-layer / data-nodes groups).
Init: LG.islandGrid(rootEl) renders the plan and cycles the states.

Customize

Grid: edit the AISLES / WALKS coordinate arrays in LG.islandGrid to add or move lanes and crossings.
Managed / unmanaged styling lives in .lg-xn.managed / .unmanaged (reticle, glow, glyph).
Captions: the LABELS map; cadence is the 5000 ms interval.

lg-island-grid Cycling

Safety Island: one intersection managed, the rest exposed

Intersections managed 11%

Vertical lanes are forklift aisles, horizontal lanes are pedestrian walkways. Every crossing is an intersection (a Risk Unit) where the two meet.

Managed crossing (hazard control active) Unmanaged crossing (no control)

The risk: A single managed intersection is a Safety Island. The same forklift still crosses every unmanaged one, so total exposure barely changes until every crossing is managed.