ScryMarket 2.0: The Rebuild

We just shipped a full rewrite of ScryMarket’s frontend. Every page is new. The design is new. The navigation, the layout system, the component library, the type system, the test suite — all new. If you’ve used ScryMarket before, it will feel like a different app. The backend and your data are the same, but everything you see and touch has been rebuilt.

This post is about why we did it, what the big decisions were, and what you’re getting out of it.

Why rewrite

The short version: the old UI was built on a general-purpose component library that was never designed for what we needed. It gave us a fast start, but the further we got, the harder it became to make ScryMarket look and feel like ScryMarket. We wanted dark glassmorphism with aurora accents and rarity-driven visual hierarchy. The library wanted rounded corners and cheerful color palettes. Every page was a compromise.

We spent a while trying to customize our way out of it — overriding styles, injecting tokens, working around the library’s assumptions. It sort of worked, but we were always fighting upstream defaults, and the result was an app that looked fine but never looked right. The design we actually wanted existed in our mockups. It just couldn’t live in the codebase.

We had a small user base and a young product. Rewriting now meant a few months of parallel work. Rewriting later would have meant migrating years of accumulated UI code. The math was straightforward.

The design: Arcane Modern

The new visual language is called Arcane Modern. Dark backgrounds, glass-effect panels with real depth (backdrop blur, translucent borders, layered surfaces), and aurora gradients in cyan, blue, and purple. The whole thing is themed through CSS custom properties — every color, every opacity, every glow value. Nothing is hardcoded. This means campaign-flavored themes (Feywild, Blood Moon, parchment) are future CSS overrides, not rewrites.

Rarity is a first-class visual concept. Common items are quiet. Legendary items glow. You can tell something is important before you read the tooltip. This sounds like a small thing, but it changes how loot feels when it shows up in your inventory. A +1 dagger and the Sunsword shouldn’t have the same visual weight, and now they don’t.

The biggest structural change is that the app now has three distinct contexts: Home, Party, and Marketplace. Each one has its own navigation and its own layout priorities.

Home is your personal space — dashboard, characters, notifications, your created content, settings. The dashboard is deliberately minimal. Its job is to route you to your party in one click, not to be a destination.

Party is the core of the app. When you enter a party, the sidebar transforms completely. You get inventory, shops, members, and (if you’re the GM) a GM tools section. The navigation change is the point — you’ve left the lobby and you’re at the game table. Everything inside the party context is built around real-time collaboration: WebSocket sync for inventory changes, presence indicators showing who’s online, live announcements when the GM deploys a shop or reveals loot.

Marketplace is the community layer — browsing, discovery, AI generation, creator profiles. All publicly shared content is now browsable without an account, which is a change from 1.0. If someone shares a shop link in Discord, anyone can view it.

The mental model we kept coming back to: the party is the product, and everything else either gets you there or feeds content into it.

New features worth calling out

The changelog has the full list. Here are the ones I think matter most:

Loot distribution. Five methods: Need/Greed/Pass (players vote), Round Robin (take turns), Value Balanced (split by worth), Random (dice decide), and free-form claiming. Different tables want different things, and one method was never going to cover it. The GM picks the method per drop.

The Scrying Reveal. When a GM identifies a mystery item, a reveal animation plays — arcane circles, particles, a card flip showing the true item. Rarity scales the intensity. It’s the feature I’m most proud of from a “this is why we rebuilt” perspective, because it couldn’t have existed in the old UI. The reveal needed full visual control — layered animations, rarity-driven color, a portal that overlays the entire viewport regardless of which page you’re on. That’s the kind of thing you can build when the design system is yours from the ground up.

AI content provenance. Every piece of content now tracks whether it was human-created, AI-generated, or system-provided. Users can filter: see everything, hide AI art, or exclude AI content entirely. The preference applies across the whole marketplace. We think this is the right way to handle AI content — give people real control instead of making the decision for them.

Transaction histories. Every item transfer, shop purchase, loot roll, and currency exchange is logged in a searchable audit trail. Exportable to CSV. Never wonder where the Bag of Holding went.

Onboarding. New users get a guided setup: pick your role, choose your game system, optionally create a character, then join or create a party. The goal is to get new users into a party as fast as possible, because that’s where the app comes alive.

Command palette. Keyboard shortcut opens a command palette for quick navigation. Small thing, big quality-of-life improvement if you use the app regularly.

Technical notes

For anyone who cares about the stack: React 19, TypeScript in strict mode, Vite, Tailwind v4 (CSS-native config, no JS config file), shadcn/ui on Radix primitives, React Query for server state, Zustand for UI state, React Hook Form with Zod validation, Framer Motion for animations, and MSW for test mocking. Tests were written alongside features, not after — we have integration coverage on auth, inventory, shops, party operations, and WebSocket events.

The real-time system runs on ActionCable with a single WebSocket channel per party. Inventory mutations sync live. Presence tracking updates on connect/disconnect. GM actions (shop reveals, loot drops, item identification) broadcast animated announcements to all connected party members simultaneously. Reconnection uses exponential backoff, and there’s a visible connection indicator so you know if you’ve dropped.

Pages are code-split and lazy-loaded. The main bundle is under 300KB gzipped. Admin routes are split entirely separate.

What’s next

2.0 represents the new foundation. There’s a lot more we have on the roadmap, and now that all of this is in place it will be much easier to make the rest of the vision come to life. If all goes well, you should be seeing new game systems, new integrations, inventory improvements, and mobile improvements very soon.

If you’ve been using ScryMarket, everything should feel faster, look better, and work more smoothly. Your data is exactly where you left it. If you’re new, this is a great time to start!

The full changelog has more details, but come join us on Discord and let us know what you think and what you’d like to see next. We hope you like it!