Pull-cord Bulb

A toggle people want to touch. Its first job is the finish switch of a Tactile UI site (lit is aluminium, dark is graphite, remembered like the site's own key) hanging from the nav. The same switch is dark mode for any app, "lights on" for a room in a smart-home or IoT panel, or a focus-mode toggle in an agent or devtools console. It is a real role="switch" with aria-checked, a label, Space/Enter and a change event.

Copy the pull-cord folder from its package next to your page, link its stylesheet and construct it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="pull-cord/pull-cord.css">
<div id="pull-cord" style="width: min(92vw, 760px); height: min(82vh, 620px)"></div>

<script type="module">
  import PullCord from './pull-cord/pull-cord.mjs';

  const pullCord = new PullCord(document.getElementById('pull-cord'), {
    on: true,
    shade: 'dome',
    bulb: 'clear',
  });

  // pullCord.update({ … });   change any option in place
  // pullCord.destroy();        and take it away again
</script>

new PullCord(element, options)

Builds it inside the element with these options.

checked

Whether the lamp is lit.

state

pull()

Pull the cord: the same physical pull a hand makes, animated.

toggle()

set(on, { instant = false } = {})

Set the lamp without a pull (no change event).

update(opts = {})

Change options in place.

destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: change.

1. At restThe lamp hangs plumb from its ceiling cup, the cord straight, the switch seated; the loop is asleep and costs nothing.
2. LitThe filament burns at its blackbody colour, the inside of the shade glows, the rim's lip catches it, and a soft pool of warm light falls on the wall below, screen-blended onto the page, fading out before the edge of the object's box.
3. DarkThe glass reads as glass: the room lamp's softbox in it, a smaller inverted reflection from the back of the envelope, the stem, leads and coil inside a clear bulb.
4. TugA pull that does not reach the trip point stretches the cord out of the switch and tilts the lamp, then springs back without switching.
5. PullUnder the detent the acorn visibly lags the pointer; at the trip the force drops and the acorn catches up: the snap; the lamp toggles and fires change.
6. ReleaseThe plunger returns and re-arms with a softer tick, the cord bounces slack and swings, the lamp sways, and all of it settles and sleeps within about three seconds.
7. Warming and coolingHeating against T⁴ radiation: on in about 130 ms through red and orange; off, a fast fade and then a dull ember that lingers.
8. Keyboard and clickSpace, Enter or a click anywhere run the same physical pull, animated; the state changes when the switch trips, not when the key goes down.
9. Finish switchWith a target it writes data-finish (on = aluminium, off = graphite), remembers the choice in localStorage['tui-finish'] on the page root, and follows a finish changed elsewhere.
10. Header toggleIn a 56–64 px host under a nav it hangs on a long cable with its cord and acorn drawn heavier, and keeps a 44 px grip.
11. Off screen or hiddenThe loop pauses; a returning tab advances one clamped frame.
12. Reduced motionThe switch still works: the state flips at once, the glow steps instead of ramping, nothing swings, and no frame is requested.

Made of: Mass spring rope, Detent plunger latch, Hand spring coupling, Damped pendulum, Filament thermal model, Blackbody colour, Per pixel turned shading, Room fixed sheen, Screen blended light, Rim cutoff wall light, Finish switch, Sleeping loop.

Original. Canvas 2D on four layers: room-lamp shadows and the bulb's light on the wall at half resolution, the lamp, and the filament's light; the two light layers are mix-blend-mode: screen, so light adds to the page instead of covering it. Physics in metres, seconds and newtons at 1/16000 s sub-steps; every turned part is shaded per pixel once per size and finish. The integrator assigns cut (0 is not a valid cut, so the field is left out).