jakubantalik/img-fx

img-fx is a small React library that wraps a card-shaped element in a WebGL canvas and runs an animated shader on top of it. The shader produces what the README calls a generation or loader effect: a moving mosaic of dots or pixels that periodically reveals an image from a pool the user provides. A live demo is hosted at image.jakubantalik.com. Install is npm install img-fx, with React, ReactDOM, and Three.js declared as peer dependencies. The library exports an ImageGeneration component. Wrap any child element in it, set a preset, pass a list of image URLs, and turn on auto-reveal to get the default loop. The README also documents a Vite playground for local development plus build scripts for the library bundle and the demo site. Behaviour is driven by props. preset picks between three bundled shader looks: dots-mechanic, pixels-organic, and pixels-mechanic. theme reads the page's data attribute, class, inline color-scheme, or media query to pick light or dark, and updates live via a MutationObserver. strength is an opacity multiplier. cardBg overrides the card surface colour and keeps the shader's colour-proximity logic in sync. revealDelayRange, revealHoldMs, and revealFadeOutMs control timing. An onCycle callback fires on each phase change. A ref handle exposes manual control. The component accepts a ref whose triggerReveal method runs one full reveal, hold, and hide cycle, with an optional hold: 'manual' mode that pairs with triggerHide. An isImageActive query lets a parent build a reveal-or-hide toggle button without enabling the auto loop. The README closes with notes on performance and scale invariance. Cell size, vignette range, and edge fade are computed in CSS pixels using the device pixel ratio, so a pixels-organic cell looks the same physical size on small and large cards. All instances share a single Three.js WebGL renderer and one WebGL context, frames are capped at 30 fps via a requestAnimationFrame accumulator, off-screen cards are paused by an IntersectionObserver, and image bitmaps are cached by URL across instances. The licence is MIT.