Grant Pedersen · New York

Dotlab

Free dot animations for React

I designed and built Dotlab, a free library of 20 dot animations for React with a live playground and standalone component exports.

Design & Development

I built the animation renderer, responsive gallery, playground controls, and source export. The project began with the dot-based effects in Libraries.dev's Thinking Orbs and expanded into a library for hero banners.

Interaction

The hero cycles through three shapes, reforming the particles between them. Search and category filters make the library browsable, and each animation opens in a playground with a live preview and code export.

Implementation

Built with React, TypeScript, Vite, and Canvas 2D. The exported component requires only React, pauses when offscreen or in a hidden tab, and respects reduced-motion preferences. The library is MIT licensed.

Focus areas

  • React
  • TypeScript
  • Canvas 2D
  • Open Source
Dotlab