WebGL Shader Image Transitions®
intro
This concept explores dynamic image transitions in WebGL by shaping pixels with fragment shaders and composing motion from simple math primitives.
We build the effect step by step: draw a circle as an SDF, add angular noise for wavy edges, animate rotation and amplitude, then blend multiple shapes softly.
client
Moltiverso
service
Creative Coding & WebGL Experimantation
sector
Interactive Design
year
2025
insights
From clean SDFs to soft merges: composing motion with simple math
Use circle SDFs, angle-driven sine and cosine noise, and time offsets to turn rigid geometry into organic motion without heavy assets.
Blend shapes with soft min/max for silky seams, arrange circles radially for scale, and finish with eased zoom and texture sampling for a polished reveal.
Outro
The result is a fluid, scroll-ready reveal that feels alive—combining math, motion, and texture for memorable transitions you can adapt to any brand narrative.
Credits
Stefano Agbodan
Creative Developer