demo · v143 · graphics
Swizzle animator
A live timeline editor for texture component swizzles. Define per-channel mappings (R→G, G→B, etc.) at three keyframes across a 0–1s timeline, hit Play, and watch the swizzle pattern interpolate frame-by-frame on a procedurally generated gradient texture. Choose from three preset animations or design your own.
Canvas detecting…
Source texture (procedural gradient)
After swizzle — live
Timeline editor
Each column is a keyframe (t=0, t=0.5s, t=1s). Set the source channel for each output channel's slot. During playback the active keyframe highlights.
KF 0 (t=0s)KF 1 (t=0.5s)KF 2 (t=1s)
Preset animations
WebGPU swizzle descriptor
The swizzle is set via textureComponentSwizzle when creating a GPUTextureView. Below is the live descriptor for the current frame.
loading…