← lucian labs

Widgets

Embeddable components for any site. No frameworks, no build steps.

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

---

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

---

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.

Behavior

Action	Result
Page load	Widget appears bottom-right (or as orb if previously minimized)
Click X	Machine shrinks into a golden 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

---

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.

---

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