Grant Pedersen · New York

Image Lab

Image loaders and reveal effects for React

I designed and built Image Lab, a free library of 12 image loaders and reveal effects for React. Developers can preview effects, adjust the motion, and copy or download the component.

Design & Development

I built the responsive gallery, live playground, and source export. The interface shares its design with Dotlab, with searchable effects and filters for pixel, organic, and geometric styles.

Playground

Preview effects with sample photographs or a local image, adjust reveal timing, and test the transition from loading to a finished image. Controls include playback, manual progress, and effect-specific motion and color settings.

Implementation

Built with React, TypeScript, Vite, and WebGL. Animations pause when offscreen or in a hidden tab, respect reduced-motion preferences, and fall back to still images when WebGL is unavailable. The MIT-licensed export includes all 12 effects and uses React and the metal-fx package.

Focus areas

  • React
  • TypeScript
  • WebGL
  • Open Source
Image Lab