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 https://ui.aryank.space/r/motion-tracking.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| 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