Transitions Between States · A turns into B
Shader image transition着色器图像过渡
- pushed apart
- the edge writhes
- like water
The switch between two images is not a crossfade: the picture is pushed apart from somewhere like water or sand, the edge writhing as the new image takes over. Midway you can see the two patterns tangled together.
When to use it
Use it for image swaps, product galleries, cover carousels, and between chapters. Do not use it where one element merely changes value — it costs over a second and reads as a page reload.
Parameters
fragment shader · noise(uv × 4.5) threshold = progress × 1.6 − 0.3 · uv offset ±0.09 × (1 − |2m − 1|) · 1200ms · per frame, no easing
Recipe
Shader image transition → 1200msper-frame integration, no easingShader image transition → fragment shader · noise(uv × 4.5) threshold = progress × 1.6 − 0.3 · uv offset ±0.09 × (1 − |2m − 1|) · per frame, no easing
One sentence for your AI
Build a shader image transition: hand both images to the GPU and, in the fragment shader, threshold-mix them using a noise field, pushing the threshold from −0.3 to 1.3 with progress. Also offset the sampling coordinates near the threshold (about 0.09, strongest at the seam and zero at both ends) so the boundary is distorted rather than a straight line. Run it over 1200ms.