Always be dogfooding (your tech): Updated my WebGL image transition web component to display blurhash previews before & during image preloading. The hashes are provided as text attribute (~30 characters) and decoded to preview images via https://thi.ng/blurhash...
https://demo.thi.ng/umbrella/webgl-transition/
Always trying to be aware of bandwidth & energy implications (also UX related), this component is 100% lazy and only performs any work when absolutely needed (i.e. during transitions), otherwise is completely idle (not even using a dummy requestAnimationFrame() loop). Images are only starting to be preloaded when the component comes into view (using the IntersectionObserver API)
Other features added:
- slideshow mode w/ arbitrary number of images (at least not limited by VRAM), adjustable delay time
- choice of easing options/functions for transitions
- dynamic loading/replacing of images & updating underlying WebGL textures
#ThingUmbrella #WebComponents #LazyLoading #WebGL #UI #Transition #ShaderAST #TypeScript #JavaScript