Show & Tell: WikiMasters — 60fps Infinite Wikipedia Card Gallery Virtualization with TanStack Virtual

[TheoBlake]

Hey TanStack Virtual enthusiasts! ⚡️

We recently launched WikiMasters (wikimasters.org), an edge-rendered trading card game generating dynamic decks from real-time Wikipedia articles.

With hundreds of thousands of encyclopedic cards discoverable in the game archive, rendering DOM nodes for every card simultaneously would choke mobile browsers. We integrated TanStack Virtual (v3) to achieve fluid 60fps grid and list scrolling.

Key Virtualization Implementation Highlights:

1. Dynamic Responsive Grid Layouts: We dynamically calculate row heights and column spans across mobile, tablet, and widescreen monitors without layout shifts.
2. Smooth Asset Loading with Windowing: Only cards currently entering the viewport initialize high-resolution card artwork and Wikimedia image thumbnails.
3. Infinite Scroll Integration: TanStack Virtual seamlessly binds to our TanStack Query infinite cursor pagination, creating an endless, lag-free Wikipedia card gallery.

Check out the performance on live cards:
🔗 Live Site: https://wikimasters.org
📦 GitHub: https://github.com/tik568/wikimasters-game

TanStack Virtual delivered incredible rendering performance for heavy gaming visual assets!