Motion Tracking
A WebGPU motion-detection effect: a looping video is frame-differenced in a compute shader to build a decaying trail of movement, then rendered as tinted ASCII glyphs over the darkened footage with a bloom pass on top.
npx shadcn@latest add @compronents/motion-trackingInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| Prop | Type | Default | Description |
|---|---|---|---|
| videoSrc | string | river footage (rehost on Blob) | CORS-enabled looping video source. |
| color | "blue" | "red" | "green" | "blue" | Tint applied to the ASCII glyphs. |
| debug | boolean | false | Show the raw grayscale motion mask instead of the effect. |
| videoBrightness | number | 0.55 | Brightness of the footage behind the glyphs, 0 (black) to 1 (full). |
videoSrcasset-urlCORS-enabled looping video the motion is detected from.
color / debugtextGlyph tint (blue, red, green) and the raw motion-mask toggle.
three