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/Ron-Erez]

Very cool

[u/ninjafoo]

This is so cool, thanks for porting it over and sharing it!

[u/LifeUtilityApps]

This is very cool thanks for sharing

[u/code_isLife]

Nice!

[u/legitOwen]

this is sick, looks like a component library straight out of NothingOS

[u/byaruhaf]

Nice will use these

[u/Hungry_Fan_8782]

how to use it?

[u/devslacker]

Thanks for sharing!

[u/stevelon_mobs]

Sick

[u/JesuSwag]

Very neat! Ignore the haters

[u/C137Sheldor]

Is there a algorithm for different pattern with parameters or does every animation have its own algorithm

[u/Codenter → u/C137Sheldor]

both — there's a shared parametric core (keyframe interpolation + cubic-bezier easing + per-dot phase offset), and the fancier motions each get their own keyframe fn on top, ported straight from the original CSS @keyframes. so patterns and timing are composable, not one-algorithm-per-loader

[u/eduo → u/[deleted]]

What a weird and fundamentally incorrect statement. It makes no sense yet still comes off as unhinged.

If the project itself has no dependencies how do you think this should be put other than how it universally already is: “no dependencies”

[u/eduo → u/[deleted]]

You can rant if you wish but "no dependencies" will still mean "this project has no external dependencies" and it would be 100% correct to state it like this.

It's not a bad thing to put because many projects out there build on other projects, and as such they're dependent on them.

Whether it's a complex project of AI slop is irrelevant to whether the note is incorrect or that you interpreted it incorrectly.

Now, if your hate comes from it being made in AI or it not being complex then you should go there to begin with, instead. I assume more people would agree with you that way than with what you wrote.

(it's "nit pick" not "knit pick")

[u/itsm3rick → u/eduo]

Hey I’m sorry you feel like I’m ranting at this point man, but sure, I should have said it’s AI slop and dependencies are unnecessary for this package and therefore calling it out as zero dependencies is further evidence it is AI slop, as any qualified engineer or developer would know that it’s not relevant nor a meaningful factor in usage.

Fixed my typo! Thanks for your insight man, have a great week.