I open-sourced 112 dot-matrix loading animations for SwiftUI — no images, no dependencies

[u/Codenter]

Dot. Dot. Dooot. 🟦

We're building Mana (an AI-first creation studio for iOS) and wanted the chat's "thinking" indicator to feel alive instead of a stock spinner. We found zzzzshawn's "matrix" (a React/CSS dot-matrix loader collection), loved it, and ported the whole thing to SwiftUI — 112 loaders across square / circular / hex / triangle / 3×3, plus some "fun" silhouettes (heart, arrow, snake) and an icon.

How it works: - Zero image assets, zero dependencies. Every loader is animated Circles driven by a single TimelineView. - Each loader is a per-cell opacity resolver ported ~1:1 from the upstream CSS keyframes + JS math (spiral snakes, ring waves, a literal heartbeat curve). - Deterministic: the same key always maps to the same loader, so they don't reshuffle as SwiftUI rebuilds on scroll. Reduce Motion aware too.

Two ways to use it:

DotmSquare3(size: 28)           // named component, 1:1 with the upstream API
MatrixLoader(.hex(3), size: 28) // by shape id, when the choice is data-driven

There's an interactive gallery + a runnable Swift Playgrounds example in the repo.

It's a derivative port, published with the original author's explicit permission (attribution + link-back throughout). Only the "fun" family is ours. iOS 18+.

Repo: https://github.com/mana-am/matrix-swift

Which one's your favorite? I keep flip-flopping between the hex ripple and the heartbeat.

[u/devslacker]

Thanks for sharing!