1b:I[55681,["/_next/static/immutable/chunks/1q7k1nvjizi_i.js","/_next/static/immutable/chunks/19landlw60_cl.js","/_next/static/immutable/chunks/1d2_ynpuj2eev.js","/_next/static/immutable/chunks/23k1rfrg9ssqm.js","/_next/static/immutable/chunks/2-5dryfi9zs6k.js","/_next/static/immutable/chunks/3sar0pp0k94or.js"],"default"] 1c:T7e57,"use client"; import { useEffect, useId, useRef } from "react"; import { animate } from "motion/react"; import "./lamp-switch.css"; /** * Lamp Switch — a ceramic pendant lamp on a cord, and a liquid switch. * * The lamp drops in from the ceiling under plain gravity; on landing, the * fall's momentum is handed to the cord — a damped spring for the stretch and * a damped pendulum for the swing — so the overshoot, swing and settle read as * one motion, and then the light switches itself on, flickering as the bulb * warms. Grab the shade to swing it; pull it down past the detent and it * clicks the light like a pull-chain, mid-pull. The switch's knob is a blob * with a trailing drop merged by a goo filter: tap it, or drag it — it tracks * the pointer, rubber-bands past the ends, and lands on whichever side a flick * would carry it to. */ export type LampSwitchProps = { /** Switch the light on by itself once the lamp has landed. */ autoOn?: boolean; theme?: "light" | "dark"; /** The card's size in px at most; it shrinks to fit a narrow container. */ size?: number; /** Fired whenever the light turns on or off. */ onToggle?: (on: boolean) => void; }; const CARD = 412; const KNOB_ON = 232 - 90; const KNOB_OFF = 0; const NS = "http://www.w3.org/2000/svg"; /* the hanging lamp: a drop under gravity, then a cord spring and a pendulum */ const PHYS = { dropFrom: -330, // px above rest dropDelay: 0.4, // s dropTime: 0.6, // s absorb: 0.38, // the share of the landing speed the cord keeps cordK: 230, // cord stiffness cordC: 7, // cord damping swingK: 9, // pendulum stiffness (ω²) swingC: 1.35, // pendulum damping }; const PIVOT_Y = -0.6 * CARD; // matches the lamp's transform-origin const PULL_DETENT = 38; const DRAG_SLOP = 4; /* the switch's colours, per theme: knob fill and icon, on and off */ const SWITCH = { dark: { fillOn: "#858279", fillOff: "#4b4945", iconOn: "#ecebe7", iconOff: "#8f8c86" }, light: { fillOn: "#fbfaf7", fillOff: "#d9d4cb", iconOn: "#e0a43a", iconOff: "#8d877d" }, }; export default function LampSwitch({ autoOn = true, theme = "dark", size = 354, onToggle }: LampSwitchProps) { const uid = useId().replace(/[^a-zA-Z0-9]/g, ""); const id = (name: string) => `plamp-${uid}-${name}`; const url = (name: string) => `url(#${id(name)})`; const rootRef = useRef(null); const stageRef = useRef(null); const cardRef = useRef(null); const ringsRef = useRef(null); const ambientRef = useRef(null); const lampRef = useRef(null); const beamRef = useRef(null); const haloRef = useRef(null); const bulbOnRef = useRef(null); const bulbOffRef = useRef(null); const rimRef = useRef(null); const rimOffRef = useRef(null); const dimRef = useRef(null); const grabRef = useRef(null); const switchRef = useRef(null); const trackLightRef = useRef(null); const labelOnRef = useRef(null); const labelOffRef = useRef(null); const tailRef = useRef(null); const knobRef = useRef(null); const faceRef = useRef(null); const iconRef = useRef(null); /* read live inside the engine, so changing them never rebuilds it */ const onToggleRef = useRef(onToggle); onToggleRef.current = onToggle; const sizeRef = useRef(size); const themeRef = useRef(theme); const repaintRef = useRef<() => void>(() => {}); const fitRef = useRef<() => void>(() => {}); useEffect(() => { themeRef.current = theme; repaintRef.current(); }, [theme]); useEffect(() => { sizeRef.current = size; fitRef.current(); }, [size]); useEffect(() => { const root = rootRef.current!; const stage = stageRef.current!; const card = cardRef.current!; const ringGroup = ringsRef.current!; const ambient = ambientRef.current!; const lamp = lampRef.current!; const beam = beamRef.current!; const halo = haloRef.current!; const bulbOn = bulbOnRef.current!; const bulbOff = bulbOffRef.current!; const rim = rimRef.current!; const rimOff = rimOffRef.current!; const shadeDim = dimRef.current!; const lampGrab = grabRef.current!; const sw = switchRef.current!; const trackLight = trackLightRef.current!; const labelOn = labelOnRef.current!; const labelOff = labelOffRef.current!; const tail = tailRef.current!; const knob = knobRef.current!; const face = faceRef.current!; const icon = iconRef.current!; const fills = [tail, knob]; const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches; let alive = true; const cleanups: (() => void)[] = []; const d = (s: number) => (reduced ? 0 : s); const instant = { duration: 0 }; /* ── the concentric arcs behind the lamp ── */ ringGroup.replaceChildren(); for (let r = 170; r <= 760; r += 11) { const c = document.createElementNS(NS, "circle"); c.setAttribute("cx", "206"); c.setAttribute("cy", "-140"); c.setAttribute("r", String(r)); ringGroup.appendChild(c); } /* ── size: never larger than asked, and it fits its container ── */ let scale = sizeRef.current / CARD; // pointer deltas are divided by this to get card units function fit() { const parent = root.parentElement; let room = Infinity; if (parent) { const cs = getComputedStyle(parent); room = parent.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight); } scale = Math.max(0.4, Math.min(sizeRef.current, room) / CARD); root.style.setProperty("--plamp-scale", String(scale)); } fitRef.current = fit; fit(); if (root.parentElement && typeof ResizeObserver !== "undefined") { const ro = new ResizeObserver(fit); ro.observe(root.parentElement); cleanups.push(() => ro.disconnect()); } /* ── the hanging lamp's physics; the loop sleeps once everything is at rest ── */ const body = { y: 0, vy: 0, th: 0, vth: 0 }; let phase: "wait" | "fall" | "hang" = "hang"; let phaseT = 0; let raf = 0; let running = false; let prevT = 0; let onLand: (() => void) | null = null; let held = false; // the pointer is holding the lamp: physics pauses, the pointer drives it function render() { lamp.style.transform = `translateY(${body.y.toFixed(2)}px) rotate(${body.th.toFixed(3)}deg)`; } function integrate(dt: number) { /* semi-implicit Euler: the cord's spring (stretch) and the pendulum (swing) */ body.vy += (-PHYS.cordK * body.y - PHYS.cordC * body.vy) * dt; body.y += body.vy * dt; body.vth += (-PHYS.swingK * body.th - PHYS.swingC * body.vth) * dt; body.th += body.vth * dt; } function step(now: number) { if (held || !alive) { running = false; return; } /* real elapsed time, capped, in small sub-steps: the same at 30, 60 or 144fps */ const elapsed = prevT ? Math.min(0.1, (now - prevT) / 1000) : 1 / 60; prevT = now; if (phase === "wait" || phase === "fall") { phaseT += elapsed; const t = phaseT - PHYS.dropDelay; if (t >= 0) { phase = "fall"; lamp.style.opacity = "1"; } const g = (-2 * PHYS.dropFrom) / PHYS.dropTime ** 2; if (t >= PHYS.dropTime) { phase = "hang"; body.y = 0; body.vy = g * PHYS.dropTime * PHYS.absorb; body.vth = -13; // a slight sideways kick, so it swings as it lands onLand?.(); onLand = null; /* spend the rest of this frame on the cord */ for (let left = t - PHYS.dropTime; left > 0; left -= 1 / 240) integrate(Math.min(left, 1 / 240)); } else if (t >= 0) { body.y = PHYS.dropFrom + 0.5 * g * t * t; } } else { const n = Math.ceil(elapsed / (1 / 240)); for (let i = 0; i < n; i++) integrate(elapsed / n); } render(); const resting = phase === "hang" && Math.abs(body.y) < 0.05 && Math.abs(body.vy) < 0.5 && Math.abs(body.th) < 0.01 && Math.abs(body.vth) < 0.05; if (resting) { body.y = body.vy = body.th = body.vth = 0; render(); running = false; return; } raf = requestAnimationFrame(step); } cleanups.push(() => cancelAnimationFrame(raf)); function wake() { if (running || !alive) return; running = true; prevT = 0; raf = requestAnimationFrame(step); } function nudge(vth: number, vy = 0) { if (reduced) return; body.vth += vth; body.vy += vy; wake(); } /* ── the switch and the light ── */ const knobSpring = reduced ? instant : ({ type: "spring", stiffness: 420, damping: 30, mass: 0.9 } as const); /* the trailing drop is looser, so it stretches behind the knob — the liquid feel */ const tailSpring = reduced ? instant : ({ type: "spring", stiffness: 170, damping: 17, mass: 1 } as const); let on = false; const colours = () => SWITCH[themeRef.current]; function paintSwitch(t: { duration: number }) { const c = colours(); fills.forEach((el) => animate(el, { backgroundColor: on ? c.fillOn : c.fillOff }, t)); animate(icon, { color: on ? c.iconOn : c.iconOff }, t); } repaintRef.current = () => paintSwitch({ duration: d(0.35) }); function lightOn() { /* a flicker as the bulb warms up */ const flicker = { duration: d(0.75), times: [0, 0.12, 0.22, 0.36, 0.5, 1], ease: "easeOut" as const }; animate(beam, { opacity: [0, 0.7, 0.15, 0.9, 0.45, 1] }, flicker); animate(halo, { opacity: [0, 0.8, 0.2, 0.9, 0.5, 0.9] }, flicker); animate(bulbOn, { opacity: [0, 1, 0.3, 1, 0.7, 1] }, flicker); animate(rim, { opacity: [0, 1, 0.3, 1, 0.7, 1] }, flicker); animate(bulbOff, { opacity: 0 }, { duration: d(0.3) }); animate(rimOff, { opacity: 0 }, { duration: d(0.3) }); animate(shadeDim, { opacity: 0 }, { duration: d(0.5) }); animate(ambient, { opacity: 1 }, { duration: d(0.8), delay: d(0.1) }); animate(trackLight, { opacity: 1 }, { duration: d(0.6), delay: d(0.1) }); animate(ringGroup, { opacity: 0.1 }, { duration: d(0.8) }); } function lightOff(now = false) { const t = now ? instant : ({ duration: d(0.28), ease: "easeIn" } as const); animate(beam, { opacity: 0 }, t); animate(halo, { opacity: 0 }, t); animate(bulbOn, { opacity: 0 }, t); animate(rim, { opacity: 0 }, t); animate(bulbOff, { opacity: 1 }, t); animate(rimOff, { opacity: 1 }, t); animate(shadeDim, { opacity: 0.42 }, now ? t : { duration: d(0.45) }); animate(ambient, { opacity: 0 }, t); animate(trackLight, { opacity: 0 }, t); animate(ringGroup, { opacity: 0.035 }, now ? t : { duration: d(0.5) }); } /* labels: a blurred cross-fade, sliding away from the knob */ function settleLabels(state: boolean, dir: number) { const incoming = state ? labelOn : labelOff; const outgoing = state ? labelOff : labelOn; animate(outgoing, { opacity: 0, x: dir * 14, filter: "blur(6px)" }, { duration: d(0.22), ease: "easeIn" }); animate(incoming, { opacity: 1, x: 0, filter: "blur(0px)" }, { duration: d(0.4), delay: d(0.12), ease: [0.22, 1, 0.36, 1] }); } function toggle() { on = !on; sw.setAttribute("aria-checked", String(on)); const x = on ? KNOB_ON : KNOB_OFF; const dir = on ? 1 : -1; /* the liquid knob: the blob springs, the drop trails behind, the goo merges them */ animate(knob, { x }, knobSpring); animate(face, { x }, knobSpring); animate(tail, { x }, tailSpring); if (!reduced) { animate(knob, { scaleX: [null, 1.18, 0.94, 1.03, 1], scaleY: [null, 0.88, 1.05, 0.98, 1] }, { duration: 0.6, ease: "easeOut" }); animate(tail, { scale: [1, 0.78, 0.9, 1] }, { duration: 0.7, ease: "easeOut" }); animate(icon, { rotate: [null, dir * 90, 0], scale: [1, 0.82, 1] }, { duration: 0.55, ease: "easeInOut" }); } paintSwitch({ duration: d(0.35) }); settleLabels(on, dir); /* flicking the switch tugs the cord: the lamp bobs and swings */ nudge(dir * 9, 70); if (on) lightOn(); else lightOff(); onToggleRef.current?.(on); } /* the starting state: light off, switch off */ animate(knob, { x: KNOB_OFF }, instant); animate(tail, { x: KNOB_OFF }, instant); animate(face, { x: KNOB_OFF }, instant); animate(labelOn, { opacity: 0, x: -14, filter: "blur(6px)" }, instant); paintSwitch(instant); sw.setAttribute("aria-checked", "false"); lightOff(true); let auto = autoOn; // it switches itself on after the drop, unless someone got there first function userToggle() { auto = false; toggle(); } const rubber = (x: number, max: number) => max * (1 - Math.exp(-x / max)); // a soft limit toward max const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); /* ── the switch: tap it, or drag the liquid knob ── */ type SwDrag = { id: number; startX: number; base: number; x: number; moved: boolean; lastX: number; lastT: number; v: number }; let swDrag: SwDrag | null = null; let suppressClick = false; const knobLimit = (x: number) => x < KNOB_OFF ? KNOB_OFF - rubber(KNOB_OFF - x, 14) : x > KNOB_ON ? KNOB_ON + rubber(x - KNOB_ON, 14) : x; function scrubLabels(p: number) { animate(labelOn, { opacity: p, x: -14 * (1 - p), filter: `blur(${6 * (1 - p)}px)` }, instant); animate(labelOff, { opacity: 1 - p, x: 14 * p, filter: `blur(${6 * p}px)` }, instant); } const onSwDown = (e: PointerEvent) => { if (e.button !== 0 || swDrag) return; const base = on ? KNOB_ON : KNOB_OFF; swDrag = { id: e.pointerId, startX: e.clientX, base, x: base, moved: false, lastX: e.clientX, lastT: e.timeStamp, v: 0 }; sw.setPointerCapture(e.pointerId); animate(sw, { scale: 0.97 }, { type: "spring", stiffness: 600, damping: 30 }); }; const onSwMove = (e: PointerEvent) => { if (!swDrag || e.pointerId !== swDrag.id) return; const dx = (e.clientX - swDrag.startX) / scale; if (!swDrag.moved) { if (Math.abs(dx) < DRAG_SLOP) return; swDrag.moved = true; sw.classList.add("is-dragging"); animate(sw, { scale: 1 }, { type: "spring", stiffness: 500, damping: 22 }); animate(face, { scale: 1.06 }, { type: "spring", stiffness: 500, damping: 22 }); } /* velocity in card px/s, lightly smoothed */ const dt = Math.max(1, e.timeStamp - swDrag.lastT) / 1000; const inst = (e.clientX - swDrag.lastX) / scale / dt; swDrag.v = swDrag.v * 0.6 + inst * 0.4; swDrag.lastX = e.clientX; swDrag.lastT = e.timeStamp; const x = knobLimit(swDrag.base + dx); swDrag.x = x; animate(knob, { x }, instant); animate(face, { x }, instant); animate(tail, { x }, tailSpring); // it lags behind: the liquid stretch /* squash and stretch with speed */ const stretch = Math.min(Math.abs(swDrag.v) / 2600, 0.2); animate(knob, { scaleX: 1 + stretch, scaleY: 1 - stretch * 0.5 }, { duration: 0.08 }); scrubLabels(clamp(x / KNOB_ON, 0, 1)); animate(icon, { rotate: ((x - swDrag.base) / KNOB_ON) * 120 }, instant); }; function endSwitchDrag(e: PointerEvent, cancelled = false) { if (!swDrag || e.pointerId !== swDrag.id) return; const drag = swDrag; swDrag = null; sw.classList.remove("is-dragging"); animate(sw, { scale: 1 }, { type: "spring", stiffness: 500, damping: 18 }); if (!drag.moved) return; // a plain tap: the click handler toggles suppressClick = true; setTimeout(() => (suppressClick = false), 0); animate(face, { scale: 1 }, { type: "spring", stiffness: 500, damping: 20 }); /* where a flick would land, and so which side it settles on */ const projected = drag.x + clamp(drag.v, -2000, 2000) * 0.12; const next = cancelled ? on : projected > KNOB_ON / 2; if (next !== on) { userToggle(); } else { const x = on ? KNOB_ON : KNOB_OFF; animate(knob, { x }, knobSpring); animate(face, { x }, knobSpring); animate(tail, { x }, tailSpring); animate(knob, { scaleX: 1, scaleY: 1 }, { type: "spring", stiffness: 500, damping: 15 }); animate(icon, { rotate: 0 }, { type: "spring", stiffness: 300, damping: 18 }); settleLabels(on, on ? 1 : -1); } } const onSwUp = (e: PointerEvent) => endSwitchDrag(e); const onSwCancel = (e: PointerEvent) => endSwitchDrag(e, true); const onSwClick = () => { if (suppressClick) return; userToggle(); }; sw.addEventListener("pointerdown", onSwDown); sw.addEventListener("pointermove", onSwMove); sw.addEventListener("pointerup", onSwUp); sw.addEventListener("pointercancel", onSwCancel); sw.addEventListener("click", onSwClick); cleanups.push(() => { sw.removeEventListener("pointerdown", onSwDown); sw.removeEventListener("pointermove", onSwMove); sw.removeEventListener("pointerup", onSwUp); sw.removeEventListener("pointercancel", onSwCancel); sw.removeEventListener("click", onSwClick); }); /* ── the lamp: grab it, swing it, pull it ── Holding the shade pauses the physics and maps the pointer onto the pendulum — sideways is the swing round the ceiling pivot, vertical is the cord's stretch, both rubber-banded. Letting go hands the throw back to the physics. Pulling past the detent clicks the light, once per pull, mid-pull rather than on release. */ type LampDrag = { id: number; sx: number; sy: number; y0: number; th0: number; arm: number; pulled: boolean; lastT: number; lastY: number; lastTh: number; vy: number; vth: number }; let lampDrag: LampDrag | null = null; const onLampDown = (e: PointerEvent) => { if (e.button !== 0 || phase !== "hang" || lampDrag) return; e.preventDefault(); const r = card.getBoundingClientRect(); const localY = (e.clientY - r.top) / scale - body.y; lampDrag = { id: e.pointerId, sx: e.clientX, sy: e.clientY, y0: body.y, th0: body.th, arm: Math.max(120, localY - PIVOT_Y), // from the pivot to the grab point pulled: false, lastT: e.timeStamp, lastY: body.y, lastTh: body.th, vy: 0, vth: 0, }; held = true; lampGrab.setPointerCapture(e.pointerId); root.classList.add("is-grabbing"); }; const onLampMove = (e: PointerEvent) => { if (!lampDrag || e.pointerId !== lampDrag.id) return; const dx = (e.clientX - lampDrag.sx) / scale; const dy = (e.clientY - lampDrag.sy) / scale; const rawY = lampDrag.y0 + dy; body.y = rawY >= 0 ? rubber(rawY, 70) : -rubber(-rawY, 26); /* the pivot is above the lamp, so dragging right is a counter-clockwise angle */ const rawTh = lampDrag.th0 - (Math.atan2(dx, lampDrag.arm + body.y) * 180) / Math.PI; body.th = Math.sign(rawTh) * rubber(Math.abs(rawTh), 18); render(); const dt = Math.max(1, e.timeStamp - lampDrag.lastT) / 1000; lampDrag.vy = lampDrag.vy * 0.5 + ((body.y - lampDrag.lastY) / dt) * 0.5; lampDrag.vth = lampDrag.vth * 0.5 + ((body.th - lampDrag.lastTh) / dt) * 0.5; lampDrag.lastY = body.y; lampDrag.lastTh = body.th; lampDrag.lastT = e.timeStamp; if (!lampDrag.pulled && body.y >= PULL_DETENT) { lampDrag.pulled = true; navigator.vibrate?.(8); userToggle(); } }; const endLampDrag = (e: PointerEvent) => { if (!lampDrag || e.pointerId !== lampDrag.id) return; /* a stale sample — the pointer held still before letting go — means no throw */ const still = e.timeStamp - lampDrag.lastT > 80; body.vy = still ? 0 : clamp(lampDrag.vy, -700, 700); body.vth = still ? 0 : clamp(lampDrag.vth, -55, 55); lampDrag = null; held = false; root.classList.remove("is-grabbing"); wake(); }; lampGrab.addEventListener("pointerdown", onLampDown); lampGrab.addEventListener("pointermove", onLampMove); lampGrab.addEventListener("pointerup", endLampDrag); lampGrab.addEventListener("pointercancel", endLampDrag); cleanups.push(() => { lampGrab.removeEventListener("pointerdown", onLampDown); lampGrab.removeEventListener("pointermove", onLampMove); lampGrab.removeEventListener("pointerup", endLampDrag); lampGrab.removeEventListener("pointercancel", endLampDrag); }); /* ── the entrance: the lamp drops in, then the light switches itself on ── */ let autoTimer: ReturnType | undefined; if (reduced) { render(); if (auto) toggle(); } else { lamp.style.opacity = "0"; body.y = PHYS.dropFrom; render(); phase = "wait"; phaseT = 0; onLand = () => { autoTimer = setTimeout(() => { if (alive && auto && !on) toggle(); }, 450); }; wake(); } cleanups.push(() => clearTimeout(autoTimer)); stage.dataset.ready = "true"; return () => { alive = false; cleanups.forEach((fn) => fn()); }; // the engine is built once; everything it needs later is read through refs // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return (

{/* concentric arcs */} {/* the warm glow the light casts on the card */}

{/* the lamp: it hangs from the ceiling, drops in, and swings on its cord */}

{/* the grab area over the shade: drag to swing, pull down to click the light */} {/* the switch */}

); } 1d:T192b,/* =========================================================================== Lamp Switch. The card is drawn at its native 412 × 412 and scaled as one object by --plamp-scale, set by the component to fit its container. Pointer deltas are divided by the same scale, so the physics feels the same at any size. =========================================================================== */ .plamp { --plamp-scale: 0.86; /* dark: the reference — a dim room, a warm bulb */ --plamp-card: radial-gradient(120% 90% at 50% 10%, #171513 0%, #0c0b0a 60%, #090908 100%); --plamp-card-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.04); --plamp-ceiling: #0c0b0a; --plamp-ring: #ffffff; --plamp-ambient: radial-gradient(60% 45% at 50% 62%, rgb(255 236 200 / 0.08), transparent 70%); --plamp-dim: #0b0a09; --plamp-track: linear-gradient(180deg, rgb(78 75 70 / 0.78) 0%, rgb(52 50 47 / 0.82) 100%); --plamp-track-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), inset 0 -8px 18px rgb(0 0 0 / 0.25), 0 10px 28px -8px rgb(0 0 0 / 0.6); --plamp-track-light: linear-gradient(180deg, rgb(255 240 210 / 0.16) 0%, rgb(255 240 210 / 0) 60%); --plamp-label-on: #e9e6e0; --plamp-label-off: #9d9a94; --plamp-sheen: radial-gradient(90% 70% at 40% 20%, rgb(255 255 255 / 0.22), transparent 60%), linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(0 0 0 / 0.12)); --plamp-sheen-edge: inset 0 1px 0 rgb(255 255 255 / 0.18); --plamp-focus: rgb(255 255 255 / 0.4); position: relative; width: calc(412px * var(--plamp-scale)); height: calc(412px * var(--plamp-scale)); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } /* light: the same lamp in a daylit room — parchment walls, the shade lit warm */ .plamp[data-theme="light"] { --plamp-card: radial-gradient(120% 90% at 50% 10%, #fbf8f2 0%, #f1ece3 60%, #e9e2d6 100%); --plamp-card-shadow: 0 0 0 1px rgb(60 40 20 / 0.06), 0 30px 60px -24px rgb(90 60 30 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.9); --plamp-ceiling: #faf6f0; --plamp-ring: #3a2a18; --plamp-ambient: radial-gradient(60% 45% at 50% 62%, rgb(255 196 110 / 0.28), transparent 70%); --plamp-dim: #7c766c; --plamp-track: linear-gradient(180deg, rgb(255 255 255 / 0.82) 0%, rgb(236 230 220 / 0.9) 100%); --plamp-track-shadow: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 -8px 18px rgb(120 90 50 / 0.1), 0 10px 26px -10px rgb(90 60 30 / 0.35); --plamp-track-light: linear-gradient(180deg, rgb(255 210 140 / 0.3) 0%, rgb(255 210 140 / 0) 60%); --plamp-label-on: #3a342c; --plamp-label-off: #8d877d; --plamp-sheen: radial-gradient(90% 70% at 40% 20%, rgb(255 255 255 / 0.9), transparent 60%), linear-gradient(180deg, rgb(255 255 255 / 0.3), rgb(120 90 50 / 0.08)); --plamp-sheen-edge: inset 0 1px 0 rgb(255 255 255 / 0.95), 0 4px 12px -4px rgb(90 60 30 / 0.35); --plamp-focus: rgb(40 30 20 / 0.45); } .plamp__defs { position: absolute; width: 0; height: 0; } .plamp__stage { position: absolute; top: 0; left: 0; width: 412px; height: 412px; transform: scale(var(--plamp-scale)); transform-origin: 0 0; } .plamp__card { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 52px; background: var(--plamp-card); box-shadow: var(--plamp-card-shadow); transition: background 0.35s ease, box-shadow 0.35s ease; } .plamp__rings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .plamp__ringGroup { stroke: var(--plamp-ring); } .plamp__ambient { position: absolute; inset: 0; background: var(--plamp-ambient); pointer-events: none; } /* the lamp hangs from a pivot well above the card */ .plamp__lamp { position: absolute; inset: 0; pointer-events: none; transform-origin: 50% -60%; } .plamp__beam, .plamp__fixture { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } /* in daylight the beam reads as a warm cast on the wall rather than a glow */ .plamp[data-theme="light"] .plamp__beam { filter: sepia(0.9) saturate(2.6) brightness(0.96); mix-blend-mode: multiply; } .plamp__dim { fill: var(--plamp-dim); } .plamp__grab { position: absolute; top: 40px; left: 121px; width: 170px; height: 176px; border-radius: 0 0 48px 48px; pointer-events: auto; cursor: grab; touch-action: none; } /* ── the switch ── */ .plamp__switch { position: absolute; top: 285px; left: 90px; width: 232px; height: 90px; padding: 0; border: 0; border-radius: 999px; background: var(--plamp-track); box-shadow: var(--plamp-track-shadow); font: inherit; cursor: pointer; outline: none; touch-action: none; backdrop-filter: blur(6px); -webkit-tap-highlight-color: transparent; transition: background 0.35s ease, box-shadow 0.35s ease; } .plamp__switch:focus-visible { box-shadow: var(--plamp-track-shadow), 0 0 0 3px var(--plamp-focus); } .plamp__trackLight { position: absolute; inset: 0; border-radius: inherit; background: var(--plamp-track-light); pointer-events: none; } .plamp__label { position: absolute; top: 0; display: grid; place-items: center; width: 142px; height: 100%; font-size: 30px; font-weight: 300; letter-spacing: -0.01em; pointer-events: none; } .plamp__label--on { left: 0; padding-left: 12px; color: var(--plamp-label-on); } .plamp__label--off { right: 0; padding-right: 12px; color: var(--plamp-label-off); } .plamp__goo { position: absolute; inset: 0; pointer-events: none; } .plamp__fill { position: absolute; top: 0; left: 0; width: 90px; height: 90px; border-radius: 50%; } .plamp__face { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; pointer-events: none; } .plamp__sheen { position: absolute; inset: 0; border-radius: 50%; background: var(--plamp-sheen); box-shadow: var(--plamp-sheen-edge); } .plamp__icon { position: relative; width: 46px; height: 46px; } .plamp__switch.is-dragging, .plamp.is-grabbing, .plamp.is-grabbing * { cursor: grabbing !important; } @media (prefers-reduced-motion: reduce) { .plamp__card, .plamp__switch { transition: none; } } 13:[[["$","script","0",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Lamp Switch — Pin UI\",\"description\":\"A hanging ceramic lamp that swings on a cord and toggles with a liquid switch. A ceramic pendant lamp that drops in on its cord, lands into a stretch and a swing, and switches itself on. Pull the lamp down past the detent to click the light like a pull-chain, or drag the liquid switch with elastic r\",\"url\":\"https://www.pinui.xyz/components/lamp-switch\",\"codeRepository\":\"https://github.com/Rachit315/Pin-UI\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"author\":{\"@id\":\"https://www.pinui.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://www.pinui.xyz/#software\"},\"license\":\"https://opensource.org/licenses/MIT\"}"}}],["$","script","1",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://www.pinui.xyz\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Components\",\"item\":\"https://www.pinui.xyz/components\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lamp Switch\",\"item\":\"https://www.pinui.xyz/components/lamp-switch\"}]}"}}]],["$","$L1b",null,{"entry":{"slug":"lamp-switch","category":"controls","name":"Lamp Switch","isNew":true,"tagline":"A hanging ceramic lamp that swings on a cord and toggles with a liquid switch.","blurb":"A ceramic pendant lamp that drops in on its cord, lands into a stretch and a swing, and switches itself on. Pull the lamp down past the detent to click the light like a pull-chain, or drag the liquid switch with elastic rubber-banding. Turning it on flickers the bulb to life, casting a warm beam and ambient glow.","highlights":["Physics pendulum swing","Pull-cord chain detent","Liquid gooey switch","Bulb warm-up flicker"],"clip":"/clips/loop/lamp-switch.mp4?v=2","poster":"/clips/loop/lamp-switch.jpg?v=2","hero":false,"sound":false,"zoom":1,"stage":"#e4dfd6","clipStage":"#e0ddd4","stageDark":"#313539","usage":"import LampSwitch from \"@/components/library/LampSwitch\";\n\n console.log(on)} />","props":[{"name":"autoOn","type":"boolean","fallback":"true","note":"Switch the light on by itself once the lamp has dropped in and landed."},{"name":"theme","type":"\"light\" | \"dark\"","fallback":"\"dark\"","note":"A dim room with a warm bulb, or the same lamp in a daylit parchment room."},{"name":"size","type":"number","fallback":"354","note":"The card's size in px at most. It shrinks to fit a narrow container, and the physics scales with it."},{"name":"onToggle","type":"(on) => void","note":"Fired whenever the light turns on or off — by the switch, or by pulling the lamp."}],"files":[{"name":"LampSwitch.tsx","lang":"tsx"},{"name":"lamp-switch.css","lang":"css"}],"info":{"paragraphs":["A suspended pendant lamp drawn inside an architectural shadow box. The lamp hangs on a flexible cord governed by semi-implicit Euler integration: drag it sideways to set it swinging on a pendulum, or tug it down past the detent to click the pull-chain mechanism and toggle the light.","The toggle switch at the base uses an SVG gooey filter: dragging the knob stretches a trailing drop that snaps with velocity projection. Turning it on runs a realistic bulb warm-up flicker sequence, illuminating the room with a radial beam and glowing ambient halo."]},"origin":{"label":"On,off"}},"panes":[{"name":"LampSwitch.tsx","lang":"tsx","code":"$1c"},{"name":"lamp-switch.css","lang":"css","code":"$1d"}],"registryUrl":"https://www.pinui.xyz/r/lamp-switch.json"}]]

Lamp Switch — Pin UI Component