# Webcam bubble — complete build prompt Build a floating webcam bubble, the kind a screen recorder puts over your desktop, with the visitor's own camera in it. The outline is a **living blob** that never sits still. Swing a hand out to the side and the outline **stretches a lobe out to where the hand moved**, revealing that part of the camera picture; sit still and it closes back to round. It morphs into a rounded rectangle and back, shrinks and grows on a spring, wears one of three borders (white outline, fire, rainbow), and can be dragged and thrown. ``` ╭──────╮ ╭─╯ ╰───────╮ ← a lobe reaching toward a waving hand │ (face) ✋ │ ╰─╮ ╭───────╯ ╰─[⤡ ▢ ✳ ✕]╯ ← hover pill: size · shape · effect · off ``` Stack: **React 19 + TypeScript + Tailwind**. No dependencies, no ML model: `getUserMedia`, a CSS `clip-path`, a 2D canvas for motion, and one small WebGL shader for the fire. Three files: 1. `webcam-bubble.tsx`: `"use client"`. The bubble, its controls, the loop. 2. `bubble-motion.ts`: movement in the picture becomes a reach of the outline. 3. `bubble-fire.ts`: the fire ring, drawn only while that effect is on. --- # The decisions that shape everything else **Ask for the camera only on a button press.** A page that requests the webcam on arrival gets refused, and then the piece is a black blob. Until pressed, show a wobbling dark blob with a "turn on camera" button. Handle `NotAllowedError` (blocked), `NotFoundError` (no camera) and missing `mediaDevices` (insecure context) with a short message inside the blob. **The outline is a radius per angle.** The blob is a circle plus three slow sine waves; the rounded rectangle is a superellipse `(|cos θ|/hw)^5 + (|sin θ|/hh)^5 = r^-5`. The morph is a per-angle blend of the two, so there's no path interpolation and the shape is valid at every step. Each frame, 180 points become `clip-path: path(...)` on the video's wrapper. **The picture is much bigger than the bubble.** The video fills a box almost twice the bubble's radius in every direction (`PICTURE = 1.95`). All but the middle is clipped away. That hidden margin is what a reach reveals. A box that only just fits the bubble leaves nothing to reach into. **Reach, not swell.** In each direction, find the furthest point where something moved and stretch the outline past it (`+0.45 R`), so the lobe wraps the hand. Movement nearer the centre than `0.5 R` (eyes, mouth) is ignored. Movement inside the bubble near its edge still counts: people wave where they can see their hand. **The reach is drawn as a smooth curve.** Per-sector values (36 sectors) are reduced each frame to the first five Fourier harmonics, Lanczos-softened, and the outline is that curve, floored with a soft shoulder. Interpolating between sectors always leaves their trace: linear gives kinks, smoothstep gives a scalloped edge. Five harmonics can't make a ripple at all. **Motion is frame differencing, hardened against noise.** A webcam shimmers even when nothing moves. Five filters stand between grain and the outline: 1. Downscale in two steps, so each sample is the mean of its patch. 2. A per-sample noise floor: a running measure of how much it usually moves, with only change well above it counting. 3. Spatial coherence: a changed sample counts only if two of its four neighbours changed too. 4. Persistence: a sector must see movement in two samples running. 5. Confidence: a few samples earn part of the reach, a hand's worth earns it all. If more than 35% of the frame changes at once (exposure, a knock), the frame is skipped. **Mirror everything.** The video is shown mirrored like a selfie (`-scale-x-100`), and the motion sampler draws it mirrored and cropped exactly as the video element shows it (object-cover into the box). A hand on the right of the screen is then on the right of the samples. **One radius function, three copies.** The clip path, the SVG border and the fire shader all compute the same outline. The GLSL copy in `bubble-fire.ts` must match `shapeRadius()` and `reachAt()` term for term, or the fire floats off the edge. WebGL1 can't index a uniform array by a computed value, so the shader loops over the harmonics with a constant loop. **Premultiplied alpha out of the fire shader**, with the context left at its default. Straight alpha into `premultipliedAlpha: false` renders solid white on iOS WebKit. --- # Timing | What | Value | |---|---| | Wobble | `0.035 sin(3θ + 0.9t) + 0.02 sin(5θ − 1.3t + 1.7) + 0.025 sin(2θ + 0.6t + 0.4)`, as a fraction of R | | Sampling | 25Hz, 5 CSS px per sample | | Reach | out at rate 5/s, back at 2/s; what was seen fades from memory at 1.6/s | | Size / morph spring | k = 170, damping ratio 0.62 (a little overshoot) | | Throw | friction `e^(−4.5t)`, bounces off the stage edges at 45% speed | | Fire | fades in and out at rate 6/s; flames scroll upward and run longer at the top | --- # `webcam-bubble.tsx` ```tsx "use client"; import { useEffect, useRef, useState } from "react"; import { createFire } from "./bubble-fire"; import { createMotion, PICTURE, reachAt } from "./bubble-motion"; // A webcam bubble, the kind a screen recorder floats over your desktop — with // your own camera in it. The outline is never still: a circle with three slow // sine waves running round it, so it reads as a drop of something rather than // a cropped rectangle. It morphs to a rounded rectangle and back, shrinks and // grows on a spring, wears one of three borders, and can be dragged and thrown // around the stage. // // The camera is asked for only when someone presses the button. A portfolio // that requests your webcam on arrival gets refused, and then the piece is a // black blob; one that waits to be asked gets a face. // The box the bubble lives in, unscaled, in CSS px. It holds the whole camera // picture, and the picture is far larger than the bubble — almost twice its // radius in every direction. All but the middle is hidden by the clip; the // rest is there to be reached into when a hand moves out to the side. // // Everything is written at one size and multiplied by SIZE, so the bubble // grows as a whole — box, blob, rectangle and the headroom for the swell stay // in proportion to each other. const SIZE = 1.35; const R = 96 * SIZE; // blob radius const HW = 86 * SIZE; // rounded rect half width const HH = 118 * SIZE; // rounded rect half height const W = Math.ceil(2 * R * PICTURE); const H = W; const CX = W / 2; const CY = H / 2; const SMALL = 0.5; const FIRE_MARGIN = 40; const EFFECTS = ["none", "outline", "fire", "rainbow"] as const; type Effect = (typeof EFFECTS)[number]; // The outline, as a distance from the centre at every angle. Blob and rounded // rectangle are both written this way so the morph between them is a plain // blend per angle — no path interpolation, no mismatched point counts, and the // shape is valid at every step of the way. On top of either, the push from // movement in the picture (bubble-motion.ts). bubble-fire.ts has the same // function in GLSL; keep the two identical. function shapeRadius( a: number, t: number, morph: number, wobble: number, curve: Float32Array | null, ) { const blob = R * (1 + wobble * (0.035 * Math.sin(3 * a + t * 0.9) + 0.02 * Math.sin(5 * a - t * 1.3 + 1.7) + 0.025 * Math.sin(2 * a + t * 0.6 + 0.4))); const c = Math.abs(Math.cos(a)) / HW; const s = Math.abs(Math.sin(a)) / HH; const rect = Math.pow(Math.pow(c, 5) + Math.pow(s, 5), -0.2); const base = blob + (rect - blob) * morph; return curve ? base * (1 + reachAt(curve, a)) : base; } function outlinePath( t: number, morph: number, wobble: number, curve: Float32Array, ) { // Enough points that a long stretched lobe stays a curve, not a polygon. const N = 180; let d = ""; for (let i = 0; i < N; i++) { const a = (i / N) * Math.PI * 2; const r = shapeRadius(a, t, morph, wobble, curve); const x = CX + r * Math.cos(a); const y = CY + r * Math.sin(a); d += `${i ? "L" : "M"}${x.toFixed(1)} ${y.toFixed(1)}`; } return d + "Z"; } type Status = "idle" | "asking" | "live" | "denied" | "missing" | "error"; const MESSAGE: Partial> = { asking: "allow the camera in your browser", denied: "camera blocked — allow it from the address bar", missing: "no camera found", error: "camera unavailable", }; // Line glyphs, the site's usual 1.6 stroke. const Icon = ({ d }: { d: string }) => ( ); const nextEffect = (e: Effect) => EFFECTS[(EFFECTS.indexOf(e) + 1) % EFFECTS.length]; const Control = ({ label, icon, onClick, }: { label: string; icon: string; onClick: () => void; }) => ( ); const ICON = { shrink: "M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7", grow: "M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7", blob: "M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z", rect: "M7 3h10a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3Z", effect: "M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1", close: "M18 6 6 18M6 6l12 12", camera: "M15 10l4.5-2.5v9L15 14M4 7h9a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Z", }; export function WebcamBubble() { const areaRef = useRef(null); const bubbleRef = useRef(null); const clipRef = useRef(null); const videoRef = useRef(null); const strokeRef = useRef(null); const glowRef = useRef(null); const gradientRef = useRef(null); const fireRef = useRef(null); const pillRef = useRef(null); const streamRef = useRef(null); const [status, setStatus] = useState("idle"); const [videoReady, setVideoReady] = useState(false); const [effect, setEffect] = useState("none"); const [rect, setRect] = useState(false); const [small, setSmall] = useState(false); // Whether there is a picture to read movement from, for the loop. const watching = useRef(false); useEffect(() => { watching.current = status === "live" && videoReady; }, [status, videoReady]); // What the springs are heading for, mirrored out of state for the loop. const target = useRef({ morph: 0, scale: 1, flame: 0 }); useEffect(() => { target.current = { morph: rect ? 1 : 0, scale: small ? SMALL : 1, flame: effect === "fire" ? 1 : 0, }; }, [rect, small, effect]); // Everything that moves, outside React. const sim = useRef({ x: NaN, y: NaN, vx: 0, vy: 0, dragging: false, grabX: 0, grabY: 0, lastX: 0, lastY: 0, lastT: 0, morph: 0, morphV: 0, scale: 1, scaleV: 0, flame: 0, time: 0, }); useEffect(() => { const area = areaRef.current; const bubble = bubbleRef.current; const clip = clipRef.current; if (!area || !bubble || !clip) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)"); const fire = fireRef.current ? createFire(fireRef.current) : null; const motion = createMotion({ w: W, h: H, cx: CX, cy: CY, r: R }); const s = sim.current; let raf = 0; let last = 0; let visible = false; // Keeps the bubble's visible shape inside the stage, allowing for scale // and for whichever shape it currently is. // // Room for half a swell, not a whole one: a full swell only ever happens on // one side at a time, and reserving it on every side would keep a big // bubble pinned away from the edges it could comfortably reach. When the // stage is narrower than the bubble — a phone — it simply sits centred. const bounds = () => { const swell = 1.08; const halfW = (R + (HW - R) * s.morph) * s.scale * swell; const halfH = (R + (HH - R) * s.morph) * s.scale * swell; const axis = (half: number, size: number) => size - 2 * half - 16 < 0 ? [size / 2, size / 2] : [half + 8, size - half - 8]; const [minX, maxX] = axis(halfW, area.clientWidth); const [minY, maxY] = axis(halfH, area.clientHeight); return { minX, maxX, minY, maxY }; }; // A spring with a little overshoot: the size and the morph should feel // like the bubble has some give, not like an ease-out curve. const spring = (x: number, v: number, to: number, dt: number) => { const k = 170; const c = 2 * 0.62 * Math.sqrt(k); v += (-(x - to) * k - c * v) * dt; return [x + v * dt, v]; }; const frame = (now: number) => { raf = requestAnimationFrame(frame); const dt = last ? Math.min((now - last) / 1000, 1 / 30) : 1 / 60; last = now; const still = reduced.matches; s.time += still ? 0 : dt; const to = target.current; if (still) { s.morph = to.morph; s.scale = to.scale; } else { for (let i = 0; i < 4; i++) { [s.morph, s.morphV] = spring(s.morph, s.morphV, to.morph, dt / 4); [s.scale, s.scaleV] = spring(s.scale, s.scaleV, to.scale, dt / 4); } } s.flame += (to.flame - s.flame) * (1 - Math.exp(-dt * 6)); // Position: centred until first placed, thrown with friction after a // drag, and bounced softly off the edges of the stage. const b = bounds(); if (Number.isNaN(s.x)) { s.x = area.clientWidth / 2; s.y = area.clientHeight / 2; } if (!s.dragging) { s.x += s.vx * dt; s.y += s.vy * dt; const f = Math.exp(-dt * 4.5); s.vx *= f; s.vy *= f; if (s.x < b.minX) { s.x = b.minX; s.vx = Math.abs(s.vx) * 0.45; } if (s.x > b.maxX) { s.x = b.maxX; s.vx = -Math.abs(s.vx) * 0.45; } if (s.y < b.minY) { s.y = b.minY; s.vy = Math.abs(s.vy) * 0.45; } if (s.y > b.maxY) { s.y = b.maxY; s.vy = -Math.abs(s.vy) * 0.45; } } bubble.style.transform = `translate(${(s.x - CX).toFixed(1)}px, ${(s.y - CY).toFixed(1)}px) scale(${s.scale.toFixed(4)})`; const wobble = still ? 0 : 1; // Reduced motion keeps the outline still, whatever the camera sees. motion.update( watching.current && !still ? videoRef.current : null, now, dt, ); const d = outlinePath(s.time, s.morph, wobble, motion.curve); clip.style.clipPath = `path('${d}')`; strokeRef.current?.setAttribute("d", d); glowRef.current?.setAttribute("d", d); gradientRef.current?.setAttribute( "gradientTransform", `rotate(${((s.time * 60) % 360).toFixed(1)} 0.5 0.5)`, ); // The pill rides the bottom edge of whichever shape it is — the resting // edge, without the swell, so the controls stay put while you wave. if (pillRef.current) { const bottom = shapeRadius(Math.PI / 2, s.time, s.morph, wobble, null); pillRef.current.style.top = `${(CY + bottom - 38).toFixed(1)}px`; } fire?.draw({ cx: CX + FIRE_MARGIN, cy: CY + FIRE_MARGIN, time: s.time, r: R, hw: HW, hh: HH, morph: s.morph, wobble, flame: s.flame, curve: motion.curve, }); }; // Off screen or in a hidden tab, nothing runs. const run = () => { cancelAnimationFrame(raf); raf = 0; if (!visible || document.hidden) return; last = 0; raf = requestAnimationFrame(frame); }; const seen = new IntersectionObserver(([r]) => { visible = r.isIntersecting; run(); }); seen.observe(area); document.addEventListener("visibilitychange", run); return () => { cancelAnimationFrame(raf); seen.disconnect(); document.removeEventListener("visibilitychange", run); fire?.destroy(); }; }, []); // Let go of the camera when the piece goes away. useEffect( () => () => streamRef.current?.getTracks().forEach((t) => t.stop()), [], ); const start = async () => { if (!navigator.mediaDevices?.getUserMedia) { setStatus("error"); return; } setStatus("asking"); try { const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user", width: { ideal: 640 }, height: { ideal: 640 }, }, audio: false, }); streamRef.current = stream; if (videoRef.current) videoRef.current.srcObject = stream; setStatus("live"); } catch (e) { const name = (e as DOMException)?.name; setStatus( name === "NotAllowedError" || name === "SecurityError" ? "denied" : name === "NotFoundError" || name === "OverconstrainedError" ? "missing" : "error", ); } }; const stop = () => { streamRef.current?.getTracks().forEach((t) => t.stop()); streamRef.current = null; if (videoRef.current) videoRef.current.srcObject = null; setVideoReady(false); setStatus("idle"); setEffect("none"); }; // Dragging: the grab point stays under the pointer, and the speed of the // last few moves becomes the throw. const onPointerDown = (e: React.PointerEvent) => { if ((e.target as HTMLElement).closest("button")) return; const s = sim.current; const rect = areaRef.current!.getBoundingClientRect(); s.dragging = true; s.grabX = e.clientX - rect.left - s.x; s.grabY = e.clientY - rect.top - s.y; s.vx = s.vy = 0; s.lastX = e.clientX; s.lastY = e.clientY; s.lastT = e.timeStamp; (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); }; const onPointerMove = (e: React.PointerEvent) => { const s = sim.current; if (!s.dragging) return; const rect = areaRef.current!.getBoundingClientRect(); s.x = e.clientX - rect.left - s.grabX; s.y = e.clientY - rect.top - s.grabY; const dt = Math.max((e.timeStamp - s.lastT) / 1000, 1 / 240); s.vx = s.vx * 0.3 + ((e.clientX - s.lastX) / dt) * 0.7; s.vy = s.vy * 0.3 + ((e.clientY - s.lastY) / dt) * 0.7; s.lastX = e.clientX; s.lastY = e.clientY; s.lastT = e.timeStamp; }; const onPointerUp = (e: React.PointerEvent) => { const s = sim.current; if (!s.dragging) return; s.dragging = false; // A pointer that stopped before letting go should not throw. if (e.timeStamp - s.lastT > 80) s.vx = s.vy = 0; }; const live = status === "live"; const message = MESSAGE[status]; return (

); } ``` --- # `bubble-motion.ts` ```ts // Movement in the camera picture, as a reach of the bubble's outline. The // picture behind the bubble is much larger than the bubble itself, and hidden; // swing a hand out to the side and the outline stretches a lobe out to where // the hand moved, opening that part of the picture. Sit still and it closes // back to round. // // No model and no tracking — just the difference between this frame and the // last, at a resolution so low that each sample is a patch of the picture // rather than a pixel. Whatever moved, moved; the outline does not need to // know whether it was a hand or a head. // // The picture never leaves the page. It is drawn into a canvas the size of a // postage stamp and read back as numbers. export const SECTORS = 36; // How far beyond the bubble the hidden picture extends, as a multiple of the // radius. The reach can go anywhere inside it. export const PICTURE = 1.95; const SCALE = 5; // CSS px of picture per sample const SAMPLE_MS = 40; // ~25 reads a second const THRESHOLD = 22; // luma change, 0..255, below which it is sensor noise // Movement nearer the centre than this is the middle of the face — eyes, // mouth — and is ignored. Everything further out counts, inside the bubble as // well as beyond it: people wave where they can see their hand, which is // inside the bubble, and a reach that only woke for movement past the edge // never woke at all. const INSIDE = 0.5; const MIN_HITS = 4; // samples a direction needs before it counts as movement // How far past the movement the lobe reaches, in radii. A hand near the edge // inside the bubble stretches it a little to show more round the hand; a hand // at the edge or past it pulls a long lobe out to it. const PAST = 0.45; const HOLD = 1.6; // how slowly a seen reach is forgotten, per second // The reach is drawn as a smooth curve, not sector by sector. Each frame the // per-sector values are reduced to the first few waves round the circle — a // low-order Fourier series — and the outline is that curve. Interpolating // between sectors always leaves a trace of them at some scale: linear makes // kinks, smoothstep makes a scalloped edge of little plateaus. A handful of // harmonics cannot make a ripple at all, only broad, rounded lobes. export const HARMONICS = 5; export const CURVE_SIZE = 1 + 2 * HARMONICS; // The outline's extra reach at angle `a`, as a fraction of the radius. The // series can dip a little below zero either side of a lobe; it is floored // with a soft shoulder rather than a hard clamp, so even the floor has no // corner. bubble-fire.ts has the same function in GLSL; keep them identical. export function reachAt(curve: Float32Array, a: number) { let x = curve[0]; for (let m = 1; m <= HARMONICS; m++) { x += curve[2 * m - 1] * Math.cos(m * a) + curve[2 * m] * Math.sin(m * a); } return Math.max(0, 0.5 * (x + Math.sqrt(x * x + 0.0004)) - 0.01); } export function createMotion(box: { w: number; h: number; cx: number; cy: number; r: number; }) { const cols = Math.round(box.w / SCALE); const rows = Math.round(box.h / SCALE); const canvas = document.createElement("canvas"); canvas.width = cols; canvas.height = rows; const ctx = canvas.getContext("2d", { willReadFrequently: true }); const n = cols * rows; const prev = new Float32Array(n); const noise = new Float32Array(n).fill(4); const changed = new Uint8Array(n); const streak = new Uint8Array(SECTORS); const mid = document.createElement("canvas"); mid.width = cols * 3; mid.height = rows * 3; const midCtx = mid.getContext("2d")!; const hits = new Uint16Array(SECTORS); const reach = new Float32Array(SECTORS); const bumps = new Float32Array(SECTORS); const target = new Float32Array(SECTORS); const seen = new Float32Array(SECTORS); const soft = new Float32Array(SECTORS); let hasPrev = false; let lastSample = 0; // The furthest the outline may go in any direction: the edge of the hidden // picture, less a little, so a lobe never shows the picture's own border. const limit = Math.min(box.w / 2, box.h / 2) / box.r - 0.06; // Where each sample sits: which sector, and how far out, in radii. const sectorOf = new Int16Array(n); const radius = new Float32Array(n); for (let j = 0; j < rows; j++) { for (let i = 0; i < cols; i++) { const dx = (i + 0.5) * SCALE - box.cx; const dy = (j + 0.5) * SCALE - box.cy; const idx = j * cols + i; sectorOf[idx] = Math.min( SECTORS - 1, Math.floor(((Math.atan2(dy, dx) + Math.PI) / (Math.PI * 2)) * SECTORS), ); radius[idx] = Math.hypot(dx, dy) / box.r; } } // Reads the current frame, mirrored and cropped exactly as the video element // shows it (object-cover into the picture's box), so a hand on the right of // the bubble is a hand on the right of the samples. const sample = (video: HTMLVideoElement) => { const vw = video.videoWidth; const vh = video.videoHeight; if (!ctx || !vw || !vh) return; const cover = Math.max(box.w / vw, box.h / vh); const sw = box.w / cover; const sh = box.h / cover; // Down in two steps, through a canvas three times the size. One straight // drawImage from a 720px frame to ~100px picks a handful of source pixels // per sample and keeps all of their sensor grain; two halvings average the // grain away, so each sample is the mean of its patch of picture. midCtx.setTransform(-1, 0, 0, 1, cols * 3, 0); midCtx.drawImage( video, (vw - sw) / 2, (vh - sh) / 2, sw, sh, 0, 0, cols * 3, rows * 3, ); ctx.drawImage(mid, 0, 0, cols, rows); const data = ctx.getImageData(0, 0, cols, rows).data; // Pass one: what changed, against each sample's own noise floor. A dark // corner or a patch under a flickering light shimmers far more than a lit // wall does, and one threshold for the whole frame either misses a hand // in the bright parts or sees ghosts in the dark ones. So every sample // keeps a running measure of how much it usually moves while nothing is // happening, and only change well above that counts. let raw = 0; for (let idx = 0; idx < n; idx++) { const p = idx * 4; const luma = 0.299 * data[p] + 0.587 * data[p + 1] + 0.114 * data[p + 2]; changed[idx] = 0; if (hasPrev) { const d = Math.abs(luma - prev[idx]); // Only ordinary-sized change feeds the floor, so a hand passing does // not teach the sample that it is noisy. noise[idx] += (Math.min(d, noise[idx] * 3 + 4) - noise[idx]) * 0.05; if (d > Math.max(THRESHOLD, noise[idx] * 3 + 8)) { changed[idx] = 1; raw++; } } prev[idx] = luma; } if (!hasPrev) { hasPrev = true; return; } // Most of the picture changing at once is the camera adjusting its // exposure or being knocked, not somebody moving. Skip the frame rather // than reach in every direction at once. if (raw > n * 0.35) return; // Pass two: only change that has company. A hand is a patch of samples // changing together; grain and compression flicker are single samples on // their own. A sample counts only if at least two of its four neighbours // changed too. hits.fill(0); reach.fill(0); for (let j = 1; j < rows - 1; j++) { for (let i = 1; i < cols - 1; i++) { const idx = j * cols + i; if (!changed[idx]) continue; const company = changed[idx - 1] + changed[idx + 1] + changed[idx - cols] + changed[idx + cols]; if (company < 2) continue; const r = radius[idx]; if (r > INSIDE) { const k = sectorOf[idx]; hits[k]++; if (r > reach[k]) reach[k] = r; } } } // And only movement that lasts: a direction has to see it in two samples // running before it is believed. A real wave lasts hundreds of // milliseconds; a glitch lasts one frame. for (let k = 0; k < SECTORS; k++) { streak[k] = hits[k] >= MIN_HITS ? Math.min(streak[k] + 1, 9) : 0; } // The reach in each direction is the furthest movement seen there, padded // so the lobe wraps round the hand rather than stopping at its fingertips. // Then each direction lends its reach to its neighbours, tapering off, so // a hand pulls out a rounded lobe instead of a spike. const TAPER = [1, 0.86, 0.6, 0.3]; for (let k = 0; k < SECTORS; k++) { let best = 0; for (let o = -3; o <= 3; o++) { const j = (k + o + SECTORS) % SECTORS; if (streak[j] < 2) continue; const extra = Math.min(limit, reach[j] + PAST) - 1; if (extra <= 0) continue; // How sure: a few samples of movement earn part of the reach, a // hand's worth earns all of it — so a doubtful flicker that does get // through moves the edge a little, not all the way. const sure = Math.min(1, Math.max(0.35, hits[j] / 16)); best = Math.max(best, extra * sure * TAPER[Math.abs(o)]); } seen[k] = best; } // Two passes of a soft blur round the circle. Each direction measures its // own reach, and neighbours that disagree by a sample leave the lobe // faceted and lumpy; blurred, it reads as one stretch of membrane. The // blur takes some height off the peak, which the boost gives back. for (let pass = 0; pass < 2; pass++) { for (let k = 0; k < SECTORS; k++) { const at = (o: number) => seen[(k + o + SECTORS) % SECTORS]; soft[k] = 0.1 * at(-2) + 0.2 * at(-1) + 0.4 * at(0) + 0.2 * at(1) + 0.1 * at(2); } seen.set(soft); } for (let k = 0; k < SECTORS; k++) { // Remembered rather than replaced, so a lobe holds for a moment after // the hand stops instead of snapping shut between two frames. target[k] = Math.max(target[k], Math.min(limit - 1, seen[k] * 1.25)); } }; // Called every animation frame. Samples at its own slower rate; the outline // reaches out quickly and closes slowly, and what it saw fades from memory // over about half a second, so a swing opens a zone that lingers, then // closes over about a second. // The sector values, reduced to the smooth curve the outline is drawn from. // Each harmonic is softened a little more than the last (Lanczos sigma // factors), which keeps a sharp-edged lobe from ringing into faint waves // round the rest of the bubble. const curve = new Float32Array(CURVE_SIZE); const toCurve = () => { const width = (Math.PI * 2) / SECTORS; curve.fill(0); for (let k = 0; k < SECTORS; k++) { const a = -Math.PI + (k + 0.5) * width; curve[0] += bumps[k] / SECTORS; for (let m = 1; m <= HARMONICS; m++) { curve[2 * m - 1] += (2 / SECTORS) * bumps[k] * Math.cos(m * a); curve[2 * m] += (2 / SECTORS) * bumps[k] * Math.sin(m * a); } } for (let m = 1; m <= HARMONICS; m++) { const x = (Math.PI * m) / (HARMONICS + 1); const sigma = Math.sin(x) / x; curve[2 * m - 1] *= sigma; curve[2 * m] *= sigma; } }; const update = (video: HTMLVideoElement | null, now: number, dt: number) => { if (video && now - lastSample > SAMPLE_MS) { lastSample = now; sample(video); } if (!video) { target.fill(0); streak.fill(0); noise.fill(4); hasPrev = false; } for (let k = 0; k < SECTORS; k++) { const rate = target[k] > bumps[k] ? 5 : 2; bumps[k] += (target[k] - bumps[k]) * (1 - Math.exp(-dt * rate)); target[k] *= Math.exp(-dt * HOLD); } toCurve(); }; return { curve, update }; } ``` --- # `bubble-fire.ts` ```ts // The fire ring around the webcam bubble: one WebGL canvas, drawn only while // the fire effect is on. It needs to know the bubble's outline exactly — the // flames stand on the edge, and an edge that disagreed with the video's clip // by a pixel would show a seam of ground between the picture and the fire — so // the shader carries the same radius function the component uses for the // clip-path, term for term. Change one, change both. const VERT = ` attribute vec2 aPos; void main() { gl_Position = vec4(aPos, 0.0, 1.0); } `; const FRAG = ` precision highp float; uniform vec2 uRes; // canvas, device px uniform float uDpr; uniform vec2 uCenter; // CSS px, y down (DOM orientation) uniform float uTime; uniform float uR; // blob radius uniform float uHW; // rounded-rect half width uniform float uHH; // rounded-rect half height uniform float uMorph; // 0 blob, 1 rounded rect uniform float uWob; // wobble amount, 0 under reduced motion uniform float uFlame; // 0..1, fades the fire in and out uniform float uCurve[11]; // the reach from movement, as a Fourier series (bubble-motion.ts) float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123); } float noise(vec2 p) { vec2 i = floor(p), f = fract(p); vec2 u = f * f * (3.0 - 2.0 * f); return mix(mix(hash(i), hash(i + vec2(1, 0)), u.x), mix(hash(i + vec2(0, 1)), hash(i + vec2(1, 1)), u.x), u.y); } float fbm(vec2 p) { float v = 0.0, a = 0.5; for (int i = 0; i < 4; i++) { v += a * noise(p); p = p * 2.03 + 17.0; a *= 0.5; } return v; } // Same as shapeRadius() in webcam-bubble.tsx. float shape(float a) { float t = uTime; float blob = uR * (1.0 + uWob * (0.035 * sin(3.0 * a + t * 0.9) + 0.020 * sin(5.0 * a - t * 1.3 + 1.7) + 0.025 * sin(2.0 * a + t * 0.6 + 0.4))); float c = abs(cos(a)) / uHW; float s = abs(sin(a)) / uHH; float rect = pow(pow(c, 5.0) + pow(s, 5.0), -0.2); float base = mix(blob, rect, uMorph); // Same as reachAt() in bubble-motion.ts: five harmonics round the circle, // floored with a soft shoulder. float x = uCurve[0]; for (int m = 1; m <= 5; m++) { float fm = float(m); x += uCurve[2 * m - 1] * cos(fm * a) + uCurve[2 * m] * sin(fm * a); } float bump = max(0.0, 0.5 * (x + sqrt(x * x + 0.0004)) - 0.01); return base * (1.0 + bump); } void main() { // Into CSS px with y down, so the angles match the DOM's. vec2 frag = vec2(gl_FragCoord.x, uRes.y - gl_FragCoord.y) / uDpr; vec2 p = frag - uCenter; float a = atan(p.y, p.x); float r = shape(a); float d = length(p) - r; // px, positive outside the bubble // Flames lick upward: the noise field scrolls toward -y, so features rise, // and the flames at the top of the ring are longer than those at the bottom. float n = fbm(p * 0.045 + vec2(0.0, uTime * 2.2)); float n2 = fbm(p * 0.11 + vec2(3.1, uTime * 3.5)); float up = clamp(-p.y / (r + 1.0), -1.0, 1.0); float len = 16.0 * (0.55 + 0.9 * n + 0.35 * n2) * (1.0 + 0.45 * up) * uFlame; float f = (1.0 - smoothstep(0.0, max(len, 0.001), d)) * smoothstep(-4.0, 0.0, d); f = pow(f, 1.4); float heat = f * (0.75 + 0.5 * n2); vec3 col = mix(vec3(0.55, 0.05, 0.02), vec3(1.0, 0.35, 0.05), smoothstep(0.1, 0.45, heat)); col = mix(col, vec3(1.0, 0.8, 0.25), smoothstep(0.45, 0.75, heat)); col = mix(col, vec3(1.0, 0.97, 0.85), smoothstep(0.8, 1.0, heat)); float alpha = smoothstep(0.05, 0.35, heat); // Premultiplied, for the compositor's default: straight alpha into a // premultipliedAlpha:false context is what WebKit on iOS draws as white. gl_FragColor = vec4(col * alpha, alpha); } `; export type FireFrame = { cx: number; cy: number; time: number; r: number; hw: number; hh: number; morph: number; wobble: number; flame: number; curve: Float32Array; }; export function createFire(canvas: HTMLCanvasElement) { const gl = canvas.getContext("webgl", { alpha: true, antialias: false, depth: false, stencil: false, }); if (!gl) return null; const compile = (type: number, src: string) => { const s = gl.createShader(type)!; gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) console.error(gl.getShaderInfoLog(s)); return s; }; const vs = compile(gl.VERTEX_SHADER, VERT); const fs = compile(gl.FRAGMENT_SHADER, FRAG); const program = gl.createProgram()!; gl.attachShader(program, vs); gl.attachShader(program, fs); gl.bindAttribLocation(program, 0, "aPos"); gl.linkProgram(program); const buffer = gl.createBuffer(); const destroy = () => { gl.deleteBuffer(buffer); gl.deleteProgram(program); gl.deleteShader(vs); gl.deleteShader(fs); }; if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { console.error(gl.getProgramInfoLog(program)); destroy(); return null; } gl.useProgram(program); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW, ); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0); gl.clearColor(0, 0, 0, 0); const u = (name: string) => gl.getUniformLocation(program, name); const U = { res: u("uRes"), dpr: u("uDpr"), center: u("uCenter"), time: u("uTime"), r: u("uR"), hw: u("uHW"), hh: u("uHH"), morph: u("uMorph"), wob: u("uWob"), flame: u("uFlame"), curve: u("uCurve"), }; const draw = (f: FireFrame) => { const dpr = Math.min(window.devicePixelRatio || 1, 2); const w = Math.round(canvas.clientWidth * dpr); const h = Math.round(canvas.clientHeight * dpr); if (canvas.width !== w || canvas.height !== h) { canvas.width = w; canvas.height = h; } gl.viewport(0, 0, w, h); gl.clear(gl.COLOR_BUFFER_BIT); if (f.flame < 0.001) return; gl.uniform2f(U.res, w, h); gl.uniform1f(U.dpr, dpr); gl.uniform2f(U.center, f.cx, f.cy); gl.uniform1f(U.time, f.time); gl.uniform1f(U.r, f.r); gl.uniform1f(U.hw, f.hw); gl.uniform1f(U.hh, f.hh); gl.uniform1f(U.morph, f.morph); gl.uniform1f(U.wob, f.wobble); gl.uniform1f(U.flame, f.flame); gl.uniform1fv(U.curve, f.curve); gl.drawArrays(gl.TRIANGLES, 0, 3); }; return { draw, destroy }; } ``` --- # Customising | To change | Edit | |---|---| | Bubble size | `SIZE` in `webcam-bubble.tsx`. Everything scales from it. | | How far a lobe can reach | `PICTURE` (the hidden margin) | | How far past the hand it goes | `PAST` | | What counts as "the face" | `INSIDE` | | How long a lobe lingers | `HOLD` and the release rate `2` in `update` | | Sensitivity vs noise | `THRESHOLD`, `MIN_HITS`, the `noise × 3 + 8` floor | | Lobe smoothness | `HARMONICS`: fewer gives broader, softer lobes | | Wobble | the three sine terms, in **both** `shapeRadius` and the GLSL `shape` | | Borders | `EFFECTS`; the rainbow gradient stops; the fire colour ramp | --- # Traps - **Requesting the camera on mount.** Refused, and the piece is dead. - **A picture box barely bigger than the bubble.** There's nothing to reveal, and hands outside it are never seen. - **Ignoring movement inside the bubble.** Nobody waves where they can't see their hand. - **Interpolating sector values directly into the outline.** It gives kinks or scallops. Use the Fourier curve. - **Raw frame differencing.** Grain and flicker make a still person's bubble twitch. Use all five filters. - **Angle ranges.** The outline walks 0..2π while `atan2` gives −π..π. Wrap with a proper modulo, or one half of the bubble gets several times the reach. - **The fire shader drifting from the JS outline.** Keep the two radius functions identical. - **Straight alpha into a `premultipliedAlpha: false` context.** It renders white on iOS. - **Forgetting to stop the tracks** on "turn off" and on unmount. The camera light stays on. - **`touch-action: none` on the whole stage.** Phones can't scroll past it. Put it on the bubble only. --- # Acceptance - Before the button, a wobbling dark blob; the camera is never requested. - Blocked camera, no camera and insecure context each show a message. - Live, the video fades in mirrored; while it warms up the blob stays dark. - Sitting still, with grain and flickering light, the outline does nothing but wobble. - Waving a hand near the bubble's edge stretches it toward the hand. Waving further out pulls a long lobe out to it. It closes about a second after stopping. - Talking and blinking don't move the outline. - Shape, size and effect controls work; the fire and borders stay glued to the stretched edge. - Drag and throw, and the bubble stays in the stage. On a phone, it sits centred and the page still scrolls. - Off screen or in a hidden tab, nothing runs. "Turn off" and leaving the page stop the camera. - Reduced motion: no wobble, no springs, no reach.