---
format: typebulb/v1
name: Lie Group Ladder
---
**code.tsx**
```tsx
import React, { useRef, useState } from "react"
import { createRoot } from "react-dom/client"
import katex from "katex"
const TAU = Math.PI * 2
const N = 24
const CX = 150, CY = 128
const LIME = "#84cc16", SKY = "#38bdf8", PINK = "#ec4899"
const K = ({ tex }: { tex: string }) => (
)
function seeded(seed: number) {
let s = seed
return () => {
s = (s * 16807) % 2147483647
return s / 2147483647
}
}
const scatter = (() => {
const r = seeded(7)
return Array.from({ length: N }, () => ({ x: 42 + r() * 216, y: 32 + r() * 190 }))
})()
// the "were we lucky?" target: a flat grid the dots *almost* fit — each lands visibly off its
// lattice point, so the verdict (no flat coordinates fit) is seen, not just asserted
const luckyGrid = (() => {
const r = seeded(23)
return Array.from({ length: N }, (_, i) => ({
x: 60 + (i % 6) * 36 + (r() - 0.5) * 14,
y: 57 + Math.floor(i / 6) * 38 + (r() - 0.5) * 14,
}))
})()
const blobPt = (t: number) => {
const p = t * TAU
const r = 80 + 13 * Math.sin(2 * p + 0.7) + 7 * Math.cos(3 * p)
return { x: CX + r * Math.cos(p), y: CY - r * Math.sin(p) }
}
const circPt = (t: number) => {
const p = t * TAU
return { x: CX + 86 * Math.cos(p), y: CY - 86 * Math.sin(p) }
}
function pathOf(fn: (t: number) => { x: number; y: number }) {
const pts = Array.from({ length: 120 }, (_, i) => fn(i / 120))
return "M " + pts.map(p => `${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(" L ") + " Z"
}
const blobPath = pathOf(blobPt)
const circPath = pathOf(circPt)
const norm24 = (v: number) => ((v % 24) + 24) % 24
const REGIMES = [
{ smooth: false, mult: false, label: "a set" },
{ smooth: true, mult: false, label: "a smooth manifold" },
{ smooth: false, mult: true, label: "a group" },
{ smooth: true, mult: true, label: "a Lie group!" },
]
function App() {
const [smooth, setSmooth] = useState(false)
const [mult, setMult] = useState(false)
const [a, setA] = useState(3)
const [b, setB] = useState(7)
const [hover, setHover] = useState(null)
const [lucky, setLucky] = useState(false)
const svgRef = useRef(null)
const setRegime = (s: boolean, m: boolean) => {
setSmooth(s)
setMult(m)
setHover(null)
setLucky(false)
if (!s) {
setA(v => Math.round(v) % 24)
setB(v => Math.round(v) % 24)
}
}
const dotPos = (i: number) => (smooth ? (mult ? circPt : blobPt)(i / N) : lucky ? luckyGrid[i] : scatter[i])
const elemPos = (v: number) => (smooth ? circPt(norm24(v) / 24) : scatter[Math.round(v) % N])
const c = norm24(a + b)
const onMove = (e: React.PointerEvent) => {
if (!smooth || mult) return
const box = svgRef.current!.getBoundingClientRect()
const x = ((e.clientX - box.left) / box.width) * 300
const y = ((e.clientY - box.top) / box.height) * 250
let best = 0, bd = Infinity
for (let i = 0; i < 240; i++) {
const p = blobPt(i / 240)
const d = (p.x - x) ** 2 + (p.y - y) ** 2
if (d < bd) { bd = d; best = i }
}
setHover(bd < 3600 ? best / 240 : null)
}
let tan: { p: { x: number; y: number }; dx: number; dy: number } | null = null
if (smooth && !mult && hover != null) {
const p = blobPt(hover)
const q1 = blobPt(hover + 0.004), q0 = blobPt(hover - 0.004)
const L = Math.hypot(q1.x - q0.x, q1.y - q0.y)
tan = { p, dx: (q1.x - q0.x) / L, dy: (q1.y - q0.y) / L }
}
const caption = smooth && mult
? <>Now glides as you slide, because multiplication is a smooth map — that compatibility is the whole definition. The blob relaxed to a perfect circle: a Lie group is homogeneous, no point special except (and only because we named it). The arrow at is the Lie algebra — the tangent direction the whole group flows along.
: smooth
? <>The dots glue into a curve with no global coordinate system — but hover it: every point has a tangent line, and the lens shows that up close it looks like . "Locally like " is the whole definition.
: mult
? <>A law with identity and inverses — slide and watch the pink product teleport. Algebra with no geometry.
: lucky
? <>…no. They almost line up, but no flat grid fits — these objects carry no global coordinates. Usually we're not lucky.
: <>Just a bag of objects — no geometry, no algebra. If we were lucky they'd form a vector space — flat, global coordinates, done.
const pa = elemPos(a), pb = elemPos(b), pc = elemPos(c)
return (
The ladder to a Lie group
Two independent structures can land on a set of objects: a smooth geometry —
locally like , a tangent space at every point — and a
group law, a way to multiply. A Lie group is what you have
when both arrive and mesh.
{REGIMES.map((r, i) => {
const active = r.smooth === smooth && r.mult === mult
return (