toolspinnersloadinganimationunicodebrailleui-componentsterminalUpdated 2026-07-03

Spinners Collection

High-signal bookmark thread about distinctive loading spinners — specifically Unicode braille (⠿) animations — that break out of the default spinning circle. The engagement (6,143 likes, 6,811 bookmarks) signals real hunger for better loading states.

View original tweet
View original tweet

@n___vc amplified Gunnar Gray's (@gunnargray) Unicode braille spinner animations — "more people should use spinners like this, those are sick." The reviewed local artifact shows simultaneous dark/light cards with named spinner variants: Braille, Orbit, Breathe, Snake, Fill Sweep, Pulse, Columns, Checkerboard, Scan, Rain, Cascade, Sparkle, Wave Rows, Helix, and Diagonal Swipe. The referenced demo (braille-character loaders, 236.9K views) is the canonical example. Source: X/@n___vc, 2026-04-08 · Source: X/@gunnargray, 2026-02-10 · Source: local video contact sheet, 2026-07-03

Why braille spinners

Braille's 2x4 dot cell (8 dots -> 256 glyphs, U+2800-U+28FF) is the highest-resolution monospace "pixel grid" in Unicode. Cycling braille glyphs produces a smooth, compact loader that renders anywhere text does: terminals, logs, CLIs, and the web, with zero image assets. It is the technique behind the spinner frames catalogued in Frontend and Design Skills and extracted by the Frontend and Design Skills skill (wiki/assets/spinners-catalog.json). Source: compiled from X + wiki, 2026-06-12

Source Snapshot

As of 2026-07-03, unicode-animations is 1.0.3 on npm (latest, modified 2026-02-27), and gunnargray-dev/unicode-animations has 557 GitHub stars, 20 forks, no GitHub releases, and no release tags. Treat the npm package as the version authority and the video as the visual catalog evidence. Source: npm registry; GitHub API; git ls-remote, 2026-07-03

Design direction

Distinctive loaders share a few traits:

  • Geometric over figurative — abstract shapes that don't date
  • Rhythmic — consistent, intentional timing
  • Compact — legible at 16–24px where spinners live
  • Themeable — single/dual-color, dark/light adaptable
  • Asset-free — Unicode/CSS so they work in text-only contexts

A distinctive spinner is a low-effort, high-impact craft signal: it is the one moment a user stares at your UI with nothing else to do. Source: X/@n___vc, 2026-04-08

loaders.wtf extends this idea from glyph spinners into a full visual builder. Keep braille/unicode as the default durable product primitive; route to loaders.wtf when the wait state should be a branded motion artifact, launch asset, or expressive agent-status surface. Source: X/@dnaijatechguy, 2026-05-29

Dot Matrix is the adjacent shadcn-registry path: instead of a package-bound spinner primitive, it gives the app editable React/Tailwind loader source through registry installs such as @dotmatrix/dotm-square-3. Use it when ownership and visual specificity matter more than a tiny reusable text spinner. Source: Dot Matrix usage docs, 2026-07-03

  • Frontend and Design Skills — braille/Unicode/ASCII/emoji loading patterns for terminal and web
  • Frontend and Design Skills — skill that extracts spinner frames from Unicode sets into spinners-catalog.json
  • ASCII Magic — adjacent text-as-visual aesthetic (ASCII/halftone treatments)
  • Dot Matrix — shadcn-registry dot-matrix loader components installed as local source code

Timeline

Related Pages

Frontend and Design SkillsFrontend and Design SkillsASCII MagicFrontier Stack 2026loaders.wtfDot Matrix

5 pages link here

Brain CapsulesMetaDot MatrixToolsloaders.wtfToolsMath Curve LoadersToolsReticle Design SystemDesign