Rivvon applies video texture to vector art to make animated ribbons.
Textures are created by extracting cross sections from video files. Video processing leverages mediabunny with WebCodecs under the hood. Rows of pixels are assembled as square tiles through file-mode tile-builder backends: the preferred WebGPU path writes directly into a transient 2D array texture, while WebGL2 and fallback paths still use atlases when needed.
Texture tiles are encoded as layered KTX2 files using Binomial's Basis Encoder. Multi-threading is possible by running several encoders in parallel via web workers. Videos may be temporally stretched via an integrated an ONNX Runtime Web port of RIFE (Real-Time Intermediate Flow Estimation for Video Frame Interpolation) by Zhewei Huang et al.
Texture data is stored in the browser via IndexedDB, and may optionally be stored in the cloud via Google Drive and/or Cloudflare R2.
Image contours are traced with Marching Squares on a segmented mask via U-2-Net by Xuebin Qin et al and quantized by Kikedao for ONNX Runtime Web.
Animations are achieved by taking multiple cross sections of the same video. Each cross section samples pixels from each frame. This can be done using one of two strategies: a linear sampling pattern that stays on the same row for each sample (planar cross section), or a periodic function that achieves a wave-based, directly loopable animation.
- Independent background flow speed — The Background section in the tools panel now has its own Flow Speed slider (separate from the ribbon conveyor belt speed). Set via
backgroundFlowSpeedin the viewer store, persisted to localStorage, and rendered byuseSceneBackground.js. The background still follows the ribbon's flow direction and tile-wrapping state, but moves at its own rate.