Championscube
iOS-inspired web app for creators - combining a powerful card-deck CMS with a high-performance, image-rich viewing experience.
CLIENT
Jordan Brooks
SERVICE PROVIDED
Design, Development, GTM
TIMELINE
2 Months
A web app that feels unmistakably iOS-native: a card-deck creation CMS for the admin and a fast, image-rich deck viewer for customers
Champions Cube lets an admin create and manage collectible “champion” cards - each with attributes, artwork, and guidance - then publish a curated deck customers can open with a unique access code.
Admins work in a CMS to add cards, edit attributes, and control visibility. Customers land in a deck viewing app with over 200 cards in a virtualized list; tapping a card reveals a full-bleed detail screen with large character art, details, and usage guidance. The mandate from the client was clear: make the web feel like iOS - from pagination dots and transitions to micro-interactions - without sacrificing performance.
Delivering a native iOS experience on the web - complete with motion precision, visual richness, and real-time sync - within the tight limits of mobile performance.
Building Champions Cube meant translating a tactile, iOS-native experience into the open, unpredictable world of the web. The client - an boutique design firm - wanted every gesture, transition, and motion curve to feel indistinguishable from a native iPhone app, right down to the pagination dots and inertial scrolling. Achieving that level of fidelity inside mobile browsers demanded meticulous custom implementation of animation, layout, and rendering for each component.
At the same time, the app needed to deliver a visually rich, responsive experience that remained fluid while rendering and working with heavy images. Each image had to load seamlessly, maintain clarity, and scroll fluidly while being performant enough to be mistaken for a native IOS app.
And through every iteration, the layout, typography, and animation language had to remain consistent across devices and future releases, preserving the polished, native-like feel the client envisioned.
We picked Next with static site generation as it offered us the best optimization and caching options for achieving native iOS level fluidity.
Creator CMS (Platform) – A focused admin workspace to add cards, upload art, edit attributes, re-order decks, and toggle visibility. Draft/publish states ensure safe edits; version notes make rollbacks simple.
Deck Viewer (Experience) – A mobile-first web app that behaves like native: pagination dots, gesture-driven transitions, and polished micro-interactions. Customers enter an access code and are dropped into a virtualized list of ~200 cards, with a full-bleed card reader for details and guidance.
Virtual List & Media Pipeline (Platform) – Custom virtualization tuned for tall, image-heavy cards: windowed rendering, priority prefetching of the next/previous items, and LQIP for high-res swaps. We optimized image sizes per device DPR and used responsive formats with background decoding to keep scrolling fluid.
iOS-Style UI Kit (Experience) – bespoke components for pagination dots, navigation bars, and motion timings that mirror iOS easing curves. Skeleton states and subtle tactile cues make transitions feel native.
Access, Roles & Sync (Platform) – Code-based customer access, admin authentication, and role separation. Publishing in the CMS updates the live deck instantly; customers never see stale content.
Quality & Performance (Platform) – Rendering budget enforced at component level; image memory caps, intersection-observer preloading, and GPU-accelerated transforms. Telemetry tracks FPS, memory, and first interaction latency to guard the 60fps goal.
