Torrent Gear

How the interface and UX are implemented on mobile devices

1) Principles: how mobile UX differs from desktop

One-handed control. The main CTAs (bet, repeat, clear) are in the "thumb zone" (lower third of the screen).

Vertical first. Vertical Tables/Streams - Base Case; the horizontal is maintained as a "movie mode."

Fewer clicks makes more sense. Any bet must take ≤2 actions: selecting a value → tap by field/cell.

Speed is more important than beauty. 60 fps in UI, minimal layout shift, "light" animations.

Transparency. Round timer, connection status, delay - clearly and unobtrusively.

2) Screen frame: where to place

Upper zone (informational):

Table name, limits, player counter, network/delay indicator, rules/settings icons.

Middle zone (content):

Video stream (WebRTC/LL-HLS) or 3D table, switching cameras/angles with a gesture.
Overlays: timer, results of recent rounds, pop-up confirmation of bets.

Lower zone (control):

Betting panel: denominations, quick buttons "Repeat," "Double," "Clear."
Hidden wallet curtain (balance, quick deposit - go to the cashier).
Table/game switch (horizontal scroll).

Guide by touch zones:

At least 48dp (Android )/44pt (iOS) per interactive, indentation between buttons ≥8dp.
We take into account safe areas (notch, gesture navigation).

3) Fast bets: Micro-interactions

Two steps: choosing a face value → tap on the field on the table. Repeated tap - increases the bet by the same face value.

Long press: context menu (delete, double, distribute).

Swipe down on the denomination panel: show extended values/betting history.

Haptika: light vibration when accepting a bet, more pronounced - when refusing/late bet.

Status visibility: "Accept bets "/" Closed "- color/icon + stopwatch.

4) Video and overlays: so as not to interfere, but to help

On-demand keyframe. When switching quality - instant IDR to avoid "soap."

Translucent cards. Timer and results - 70-85% transparency, auto-hide by timer.

Gestures:

Double tap on video - switching camera/angle.
Pinch - video scale (without overlapping CTA).
"Edge" notifications. Push-lines of winnings and promo - at the top, do not overlap the betting panel.

5) Network conditions and delays

Status pill: "Online 1.3 c "/" Bad network 4.8 c." The color of the icon changes by thresholds.

Soft degradation: first reduce FPS (60→48→30), then resolution (1080p→720p→540p), increase the buffer by + 200-300 ms.

Auto-folback: WebRTC → LL-HLS for spectator mode with an unstable network; blocking "late" bets.

Offline screen: saving the bet context, an understandable reason ("No connection") and the "Repeat" button.

6) Responsible play and control

Limits at hand. "Limits" button next to the balance: deposit/time/loss, session timer.

Pause-minute. The recommended pause after 30-45 minutes of the game is a soft banner, without "red flags."

Late bid block. If e2e-delay> thresholds - bid is not accepted, UI explains the reason.

History and export. Recent rounds/bets feed, filters, quick check export.

7) Text, colors, animations

Typography: titles 17-20pt, body 14-16pt; contrast of WCAG AA +.

Color scheme: "signal" colors are reserved for statuses (accepted/closed/error).

Animations: 120-180 ms for micro-interactions; 240-320 ms - for panels/curtains. Frame-by-frame - no more than 2-3 parallel effects.

Skeletons instead of spinners. Quick progressive loading prompts.

8) Navigation and information architecture

Lower navigation (tab bar): Lobby, Live, Promotions, Profile.

Inside Live: Lists of filter tables (language, limits, game type, favorite dealers).

Deep links: push/bot → direct entrance to the table/tournament; saving UTM for analytics.

Back-stack: Android "back" gesture and iOS swipe - do not close the round suddenly, first - a warning.

9) Localization and special languages

RTL (Arabic/Hebrew). Mirror bet grids and panels.

Number formats/currencies. Thousands separators, short signatures (1,000 → 1k for lack of space).

Language tables. Display flags/languages, dealer language filters, local units (₺, R $, ₴).

Length of rows. Descriptors auto-cut with ellipsis, tultips - by long press.

10) Device performance and resource

Battery: limit the fps 60→30 when the charge is low, warn about high consumption.

Memory: unload unused ABR profiles, do not hold more than 2-3 high-resolution textures.

WebView/browser: block heavy shadows and CSS filters; use GPU compositing for smoothness.

Image optimization: WebP/AVIF, sprites and lazy-load.

11) Payment and wallet patterns

Mini-wallet: balance and quick deposit (link to the cashier with 3DS/KYC only on the Web).

Security tokens: short TTL, re-login without losing the current bet.

Visibility of the source of funds: CASH/BONUS at the time of the bet.

12) Availability (A11y) and compatibility

VoiceOver/TalkBack: signatures for elements, tab-order focus, videos for status announcements.

High contrast/large font: adapting layout without breaking the grid.

Gestures ≠ the only way. We duplicate the functionality with buttons.

Test matrix: iOS (current + n-1), Android (SDK levels, popular skins), weak devices, unstable networks.

13) Micro-copywriting: what and how to speak

Clear and short. "Bets accepted," "Bets closed," "Insufficient funds," "Bad network."

Context. If the bid is blocked, the prompt "Flow delay exceeds threshold."
Confirmations. Remove "Are you sure?" where you can roll back through "Back/Undo."

14) Analytics and RUM: measure to improve

RUM-SDK: e2e delay, startup, buffers, quality switches, decoder errors.

WebRTC-stats: RTT, loss, jitter, NACK/PLI, доля TURN-relay.

Product Events: Rate/Double/Clear, Waiver/Late Rate, Table and Dealer Hold.

Entrance fanel: telegram → lobby → table → first bet → repeat/double.

15) Mobile UI Anti-Bugs

Tiny hits. Solution: 48dp/44pt minimum, additional indents.

Black screens when changing quality. Solution: keyframe-on-demand and preload the following profile.

Random "back" swipes. Solution: confirmation before exiting the round + gestures inside the content do not conflict with system gestures.

Keyboard sticking. Solution: numeric keypad for amounts, auto-hide after input, smart scrolling.

16) Production launch checklist

UI and Management

CTA in the thumb area; 2 steps to bet
Haptic and understandable statuses (accepted/closed/error)
Vertical/horizontal modes without artifacts

Video and network

WebRTC with SVC/simulacast, LL-HLS folback
Delay/network indicator, soft degradation
No black screens when switching

Responsible play

Limits/pauses/history at a distance of 1-2 tapa
Block of "late" bets when e2e threshold is exceeded

Localization and A11y

RTL, large fonts, contrast
Full alt/labels for screen readers

Performance

60 fps UI, <100 ms TTI for key screens
Power saving mode, memory control

Observability

Built-in RUM and WebRTC-stats, SLO alerts
Product events and rate funnel

17) The bottom line

Mobile UX live games are a triad of speed → clarity → control. Vertical tables, one-handed controls, quick bets, haptics and understandable statuses create the feeling of a "living room" in the palm of your hand. Technical discipline - soft degradation, folback on LL-HLS, network indicators, RUM analytics and A11y - turns a beautiful interface into a reliable product that works equally well on flagships and budget devices, in the subway and at home, on iOS and Android.