The Challenge of Communicating Platform Updates

Trading platforms ship features constantly. The pace of development on HyperX has been accelerating, and keeping users informed about what is available became a real product problem. You ship something, write about it, and hope people read the changelog. Most do not. Features exist, but adoption lags because users never discover them.

Tooltips and coach marks are intrusive. Banner notifications get dismissed reflexively. Email announcements go unread. None of these give the user a real sense of what a feature does or why they should care. What we wanted was something closer to a product demo: a way for users to see and interact with new features without leaving the platform. That is what the Feature Preview system delivers.

Introducing the Feature Preview Dialog

The Feature Preview is accessible through the Sparkles icon button in the header navigation bar. When new features have been added since your last visit, the button shows a small indicator dot — a subtle signal that there is something new to explore. Click it, and a dialog opens with an overview of recent additions.

The dialog uses a split layout. On desktop, the left sidebar lists all featured items with their icons and titles. Clicking any item loads its description and a call-to-action button on the left, while the right side of the dialog displays a full interactive preview of the feature. On mobile, the layout adapts: a horizontal tab bar replaces the sidebar, and the preview occupies the main content area with the description and call-to-action positioned below.

This is not a slideshow of screenshots. Each preview is the actual feature component, rendered live inside the dialog. When you look at the theme customization preview, you are looking at the real theme customization interface. When you see the swap terminal, it is the actual swap component. The previews are interactive — you can click, scroll, and explore them exactly as they behave in their native context.

What Is Currently Featured

The initial release of the Feature Preview system showcases three recent additions to the platform.

Theme Customization

HyperX now supports deep theme customization beyond standard light and dark modes. The preview lets you explore the theme editor directly inside the dialog — see available color options, toggle between modes, and get a feel for how customization works before opening the full theme sheet. The call-to-action opens the theme panel so you can apply preferences immediately.

Trader Recent Activity Analysis

The trader analysis view received a significant upgrade with the recent activity panel, surfacing a trader's most notable actions — position opens, closes, size changes — in a timeline format that makes behavioral patterns visible at a glance. The preview renders a real example using actual trader data, so you can evaluate the information density before navigating to a trader's profile.

Swap Terminal

HyperX added a dedicated swap terminal for quick token conversions on Hyperliquid. The preview renders the swap interface inside the dialog, showing token selection, amount input, and the conversion flow. The call-to-action navigates directly to the swap page.

The Technical Design Behind the Previews

Several design decisions make this system work smoothly without degrading platform performance.

Lazy Loading and Conditional Mounting

Each preview component is dynamically imported — the code is not loaded until the user selects that slide. Only the active slide is mounted at any given time. If you are viewing the theme customization preview, the trader activity and swap components are not running. This matters because these are live components that may fetch data or set up event listeners. Mounting all of them simultaneously would waste resources and trigger unnecessary API calls.

Scaled Preview Rendering

The previews need to fit inside the dialog while looking like their full-size counterparts. Each component renders at its native width (1280 pixels by default), then a CSS transform scales it down to fit the available space. The scaling is calculated dynamically using a ResizeObserver, so the preview adapts as the dialog resizes. On desktop, the dialog occupies 75vw for an immersive experience. On mobile, below the 640-pixel threshold, scaling is disabled and the components use their native responsive layouts.

Version-Aware Seen Tracking

The system tracks which features each user has seen using local storage. Each feature carries a version number. When you close the dialog, all features are marked as seen at their current version. If we later update a preview to showcase a major enhancement, we bump the version number and the feature appears as unseen again — the indicator dot returns and the dialog auto-shows on the next visit.

Automatic First-Visit Display

For logged-in users with unseen features, the dialog automatically opens after a 1.5-second delay on first visit. The delay ensures the page has fully loaded before the dialog appears. Once dismissed, it does not return until new features are added. Anonymous visitors never see the auto-show — logged-in users benefit from knowing about new capabilities, while first-time visitors should not be interrupted.

Why Interactive Previews Matter

Showing is fundamentally different from telling. A written description might say "customize your trading terminal colors." An interactive preview lets you see the color picker, the presets, and the live result — in five seconds you understand what the feature does and whether you want to use it. That tactile understanding drives adoption in a way text cannot match.

This also respects your time. You do not need to navigate away, try a feature, decide it is not for you, and navigate back. The preview gives you enough context to decide without leaving your current workflow. If the feature interests you, the call-to-action takes you directly there. If not, close the dialog and move on.

Looking Ahead

The system is designed to be extensible. Adding a new featured item means creating a preview component and adding a configuration entry — the dialog, navigation, seen tracking, and auto-show logic all work automatically. As HyperX ships new capabilities, the Feature Preview will be the primary channel for showcasing them to existing users. Blog posts will continue for deeper context, but for the initial moment of discovery, interactive previews are far more effective.

The Feature Preview is live now. Look for the Sparkles icon in the header and see what is new.