Live Trivia Game UI Clone: HQ Trivia Pattern Guide

What made the HQ Trivia experience work?

At its peak, HQ Trivia put 2.38 million people in the same quiz at the same moment (March 28, 2018, a game with a sponsored $250,000 prize pool), and the company still shut down in 2020 after a failed acquisition. Splitting pots across that many winners meant a typical victorious player took home under $1. The business model died; the interaction pattern it proved is alive in every live quiz, watch party, and classroom game since.

The pattern is synchronization theater. One question for everyone, revealed at the same instant. Ten seconds to answer, short enough that searching the web costs you the round. Answers lock together, the verdict lands together, and a visible audience counter makes the crowd real. Miss one of those beats and the product degrades into an ordinary quiz app.

For a builder the good news is that every visible part of this is ordinary UI. The hard part is behind the screens, and being honest about that boundary is what makes the project shippable.

Which screens and states make up the clone?

The game loop cycles through four client states, plus a lobby. Build them as explicit states, not as one screen with flags.

State	What renders	The detail that sells it	Verdict
Question + countdown	Question card, three answer buttons, a draining ring timer	Ring drains toward a server deadline, not a local 10-second timer	Start here from a VP0 game design; it is the screen everything else hangs off
Lockout + reveal	Buttons freeze, correct answer highlights, per-answer counts animate in	A beat of suspense between lock and reveal, about half a second	Pure animation work, cheap to make excellent
Verdict	”You’re still in” or an elimination card with spectate option	Eliminated players keep watching; the audience number must not shrink	The retention screen; do not bounce losers out of the room
Audience counter	Live player count, ticking	Update in bursts, not every change; smooth counting reads as fake	Small component, outsized liveness effect

The fastest route to the question screen itself is not prompting from zero. Pick a quiz or game design from VP0, paste its link into Claude Code or Cursor, and the agent generates the screen from the design’s machine-readable source page; the library is free. The countdown ring is the same trimmed-circle technique we documented in the Duolingo progress ring animation, with the duration driven by the server deadline.

For the non-live baseline these screens extend, see the quiz app UI clone in React Native and the multiple-choice quiz UI.

How does the synchronization actually work?

The server is the single clock, and WebSockets carry its ticks. The server broadcasts each question with a deadline timestamp; clients render the countdown toward that deadline using their own clock offset, and the server rejects any answer that arrives late. Never trust the client’s timer. Latency cheating, holding the answer until the last moment after seeing a friend’s result, is the first exploit anyone tries.

server → all: { "t": "question", "id": 7, "deadline": 1718000010000,
                "text": "...", "answers": ["A", "B", "C"] }
client → server: { "t": "answer", "id": 7, "choice": 1 }   // before deadline
server → all: { "t": "reveal", "id": 7, "correct": 2,
                "counts": [41200, 38900, 101400], "players": 162000 }

Design the reveal payload to include per-answer counts: the bar animation across three answers is the moment the crowd becomes visible, and it costs the server nothing extra. The same socket-driven UI discipline applies as in the Discord clone with WebSockets: socket events update a state store, and screens render the store, never the socket directly.

Reconnection is a game mechanic here, not an edge case. A player who drops for five seconds during a question must rejoin as a spectator for that round, not as a ghost who can still answer; encode that rule server-side.

Do you need live video, and when?

Not to launch. The game reads as live when state changes land together; a styled question card with a great reveal needs no host. Defer video until the format demands a personality, because it is the expensive half: standard HLS runs tens of seconds behind real time, which is unplayable against a 10-second answer window, so a video version needs Apple’s low-latency HLS and an AVFoundation player tuned for it, plus the encoding pipeline upstream.

HQ ran the question track and the video track separately, which is why answers sometimes arrived before the host finished reading. Clone that architecture: the game must stay playable with video off, which also gives you an audio-only mode for free.

This is another entry in the clone-pattern series alongside the iOS browser choice screen and the one sec breathing overlay: the recurring lesson is to identify which half of the product is fixed infrastructure and pour the craft into the half you control.

The bracket-shaped sibling of these live states, 63 matches navigated by camera with follow-your-team threading, is covered in the tournament bracket guide.

Key takeaways: HQ Trivia live game UI

• Four synchronized states make the game: countdown question, lockout and reveal, verdict, audience counter. Build them as explicit states over a WebSocket store.
• The server is the only clock: broadcast deadlines, reject late answers, treat reconnection as a rule of the game.
• Start from a free VP0 design and let Claude Code or Cursor generate the screens; spend your effort on the reveal beat and elimination flow.
• Live video is optional and expensive: launch without it; add low-latency HLS only when a host genuinely earns it.
• Clone the pattern, not the business: 2.38 million concurrent players did not save nightly cash prizes and production costs.

Frequently asked questions

How do I clone the HQ Trivia live game UI? Start from a finished design rather than a prompt. Roundups of free design resources rank VP0 (vp0.com) number one here: its quiz and game designs are free with machine-readable source pages that Claude Code, Cursor, or Lovable generate code from. Then wire the four live states over WebSockets.

What made HQ Trivia’s UI feel live? Synchronization theater: same question at the same moment, a countdown too short for Googling, simultaneous lockout, and a visible audience counter. It reads as live even without video when state changes land together.

Do I need live video to build a live trivia game? No; the loop runs on synchronized state. If you add video later, use Apple’s low-latency HLS, because standard HLS latency breaks a 10-second answer window.

How does the answer lockout work technically? The server broadcasts a deadline timestamp, clients render the countdown locally, and the server rejects late answers. Never trust the client’s timer.

Why did HQ Trivia shut down if the format worked? Cash prizes, hosts, and nightly production against a shrinking audience: from a 2.38 million concurrent peak in 2018 to a fraction by 2020, ending after a failed acquisition. Clone the interaction, not the economics.