Widgets — Lucian Labs

ll-radio

Install

Drop the script and the element wherever you want it.

<script src="https://cdn.lucianlabs.ca/scripts/ll-radio.js"></script>
<ll-radio></ll-radio>

Attributes

Attribute	Default	Purpose
`stream`	`https://relay.elijahlucian.ca/radio`	Icecast-style audio stream URL
`meta`	`https://relay.elijahlucian.ca/radio/meta/sse`	SSE endpoint for now-playing updates
`position`	`bottom-left`	`bottom-left` \| `bottom-right` \| `top-left` \| `top-right`
`accent`	`#4ecdc4`	CSS color — applies to border, orb, progress bar, button

localStorage keys

Key	Values	Purpose
`ll-radio-min`	`"0"` / `"1"`	Persists minimized state

ll-clock

Install

<script src="https://cdn.lucianlabs.ca/scripts/ll-clock.js"></script>
<ll-clock></ll-clock>

Attributes

Attribute	Default	Purpose
`city`	`Vancouver,CA`	Fallback when no lat/lon is given or cached
`lat`	—	Override coordinate latitude
`lon`	—	Override coordinate longitude
`weather-url`	`https://control.lucianlabs.ca/weather`	Weather endpoint
`position`	`top-right`	`top-right` \| `top-left` \| `bottom-left` \| `bottom-right`
`accent`	`#d4a843`	CSS color — applies to border, date, geo button, orb time

Weather endpoint

The widget calls GET {weather-url}?lat=…&lon=… (or ?city=…) and expects a JSON payload with temp, description, icon (OpenWeather code), and location. Server-side cache TTL is 1 hour; the widget refreshes every 10 minutes but most hits will be cached.

Browser geolocation

The crosshair ⌖ button on the expanded panel prompts for navigator.geolocation and caches the result. No auto-prompt — the user has to opt in. Once granted, subsequent loads use the cached coordinates until they're cleared.

localStorage keys

Key	Values	Purpose
`ll-clock-min`	`"0"` / `"1"`	Persists minimized state
`ll-clock-coords`	`{"lat":…,"lon":…}`	Last granted browser geolocation
`ll-clock-city`	string	User-override city, beats the `city` attribute

ll-shop

Install

Add one script tag before </body>. The component auto-injects itself.

<script src="https://cdn.lucianlabs.ca/scripts/ll-shop.js"></script>

That's it. The <ll-shop> element is created automatically. Shadow DOM isolates all styles — no CSS conflicts with your page.

To place it yourself, write the element explicitly instead of letting it auto-inject:

<script src="https://cdn.lucianlabs.ca/scripts/ll-shop.js"></script>
<ll-shop position="top-left" expand="down"></ll-shop>

Attributes

Attribute	Values	Default
`position`	`bottom-right` / `bottom-left` / `top-left` / `top-right`	`bottom-right`
`expand`	`up` / `down` / `left` / `right`	`up` for bottom corners, `down` for top corners

The panel is anchored to its corner, so expand picks which way it grows away from that corner (and which way the open/close animation scales). If a direction would push the panel off-screen, it flips to whichever side has more room — an unknown or contradictory value never strands the panel off the edge.

Behavior

Action	Result
Page load	Widget appears at its corner (or as orb if previously minimized)
Click X	Machine shrinks into the orb with a scale animation
Click orb	Machine expands back from the orb
Click product slot	Opens App Store link, fires `gtag` event if available

localStorage keys

Key	Values	Purpose
`ll-shop-min`	`"0"` / `"1"`	Persists minimized state

yamabruh-notify

Install

<script src="https://cdn.lucianlabs.ca/scripts/yamabruh-notify.js"></script>

Usage

const yb = new YamaBruhNotify();

// Play a seeded ringtone (deterministic melody from the string)
yb.play('user-abc123');

// Play with options
yb.play('order-456', {
  preset: 88,    // 0–98, default 88 (Telephone Bell)
  bpm: 160,      // tempo, default 140
  volume: 0.5,   // 0–1, default 0.8
  mode: 'jazzy'  // mood — controls scale/movement palette
});

// Stop playback
yb.stop();

How it works

Each call to .play(seed) hashes the seed string into a deterministic RNG, generates a short melody (notes, rhythm, octave), renders it through the full YM2413 signal chain (2-op FM, ADSR envelopes, waveform selection, tremolo, vibrato, KSR, KSL), and plays it via the Web Audio API. Same seed + preset + mood always produces the same ringtone.

Constructor options

Option	Default	Description
`preset`	`88`	YM2413 preset index (0–98). 88 = Telephone Bell.
`bpm`	`140`	Tempo in beats per minute
`volume`	`0.8`	Master volume (0–1)
`mode`	`'experimental'`	Mood — selects scale pool and sequence behavior
`sampleRate`	`44100`	AudioContext sample rate
`seed`	`null`	Root seed combined with per-call seed

Moods

Moods control which scales, intervals, and rhythms the sequence generator draws from. Set via constructor mode or per-call override.

Mood	Character
`pretty`	Major/pentatonic, gentle movement, resolves to root
`experimental`	All scales, wide intervals, no resolution
`depressing`	Minor modes, descending motion, low register
`spooky`	Diminished/whole-tone, wide leaps, unsettling
`dreamy`	Lydian/whole-tone, slow durations, resolves
`aggressive`	Phrygian/blues, fast rhythms, low root
`exotic`	Persian/Arabian/Balinese, non-Western scales
`jazzy`	Dorian/bebop/blues, syncopated, resolves
`ethereal`	Whole-tone/augmented, slow, spacious
`mechanical`	Diminished/symmetric, repetitive, fast

Live demo

Click a button to hear the preset. Each uses a different seed string.

mood:

Preset highlights

#	Name	#	Name
0	Piano 1	68	Synth Lead
18	Vibraphone	88	Telephone Bell
37	Flute	97	Steel Drum
44	Brass Ensemble	104	Fireworks
56	String Ensemble	116	Wave

Full preset and mood reference at yama-bruh.lucianlabs.ca/ringtones.

GA4 analytics

Install

Drop this in <head> on any Lucian Labs site.

<script async src="https://www.googletagmanager.com/gtag/js?id=G-HJPFEY11D7"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());
  gtag('config', 'G-HJPFEY11D7');
</script>

Custom events

Fire custom events with gtag('event', ...) anywhere after the snippet loads.

gtag('event', 'download_click', {
  event_category: 'engagement',
  event_label: 'choppa-ios'
});

Property	Value
Measurement ID	`G-HJPFEY11D7`
Scope	All `*.lucianlabs.ca` properties