body { margin: 0; font-family: "Trebuchet MS", "Segoe UI", sans-serif; background: #070e19; color: #eef4ff; }
.topbar { padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center; }
.topbar a { color: #8ee7ff; text-decoration: none; }
button { border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #eef4ff; border-radius: 999px; padding: 0.35rem 0.7rem; }
main { width: min(980px, 92%); margin: 0 auto; }
.kicker { color: #8ee7ff; text-transform: uppercase; letter-spacing: 0.1em; }
.stage { margin-top: 1rem; position: relative; border: 1px solid #2b405f; border-radius: 14px; overflow: hidden; min-height: 300px; }
video, canvas { width: 100%; display: block; }
video { filter: grayscale(1) contrast(1.2); }
canvas { position: absolute; inset: 0; pointer-events: none; }
if (!window.MotionPreference) {
const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
const __listeners = new Set();
const MotionPreference = {
prefersReducedMotion() {
return __mql.matches;
},
setOverride(value) {
const reduced = Boolean(value);
document.documentElement.classList.toggle("reduced-motion", reduced);
window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
for (const listener of __listeners) {
try {
listener({ reduced, override: reduced, systemReduced: __mql.matches });
} catch {}
}
},
onChange(listener) {
__listeners.add(listener);
try {
listener({
reduced: __mql.matches,
override: null,
systemReduced: __mql.matches,
});
} catch {}
return () => __listeners.delete(listener);
},
getState() {
return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
},
};
window.MotionPreference = MotionPreference;
}
const startBtn = document.getElementById("startBtn");
const statusEl = document.getElementById("status");
const video = document.getElementById("video");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let stream;
let raf = 0;
function resize() {
canvas.width = video.videoWidth || 640;
canvas.height = video.videoHeight || 360;
}
function loop() {
if (!video.videoWidth) {
raf = requestAnimationFrame(loop);
return;
}
resize();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
let sum = 0;
for (let i = 0; i < data.length; i += 40) {
sum += data[i] + data[i + 1] + data[i + 2];
}
const brightness = sum / ((data.length / 40) * 3 * 255);
const radius = 40 + brightness * 220;
ctx.globalCompositeOperation = "screen";
const g = ctx.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, radius);
g.addColorStop(0, "rgba(130,220,255,0.8)");
g.addColorStop(1, "rgba(0,0,0,0)");
ctx.fillStyle = g;
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, Math.PI * 2);
ctx.fill();
ctx.globalCompositeOperation = "source-over";
raf = requestAnimationFrame(loop);
}
startBtn.addEventListener("click", async () => {
try {
stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.srcObject = stream;
statusEl.textContent = "Webcam reactive glow active.";
cancelAnimationFrame(raf);
raf = requestAnimationFrame(loop);
} catch (error) {
statusEl.textContent = "Webcam unavailable or permission denied.";
}
});
window.addEventListener("beforeunload", () => {
cancelAnimationFrame(raf);
if (stream) stream.getTracks().forEach((t) => t.stop());
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webcam Reactive Experiment</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="topbar">
<a href="../">Back to demos</a>
<button id="startBtn">Enable Webcam</button>
</header>
<main>
<p class="kicker">Backlog 27</p>
<h1>Webcam Reactive Experiment</h1>
<p id="status">Waiting for permission...</p>
<div class="stage">
<video id="video" autoplay playsinline muted></video>
<canvas id="canvas"></canvas>
</div>
</main>
<script src="script.js"></script>
</body>
</html>