# Live Trivia Game UI Clone: HQ Trivia Pattern Guide

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-05. 6 min read.
> Source: https://vp0.com/blogs/live-trivia-game-ui-clone-hq-trivia

HQ Trivia peaked at 2.38 million concurrent players and still died. The UI pattern survived it, and it is very buildable.

**TL;DR.** An HQ Trivia style live trivia UI is four synchronized states: a question card with a 10-second countdown ring, answer buttons that lock at zero, an eliminated-or-advancing verdict, and a live audience counter. All four are ordinary app UI you can build today, and the fastest start is a free VP0 game design that Claude Code or Cursor generates code from directly. The honest boundary is everything behind the UI: live video and second-accurate sync across a big audience is real-time infrastructure, not screens. Build the UI from a finished design, run the game loop over WebSockets, and treat live video as a separate decision you defer as long as possible.

## What made the HQ Trivia experience work?

At its peak, [HQ Trivia](https://en.wikipedia.org/wiki/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](https://vp0.com), 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](/blogs/duolingo-progress-ring-animation-code-ios/), 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](/blogs/quiz-app-ui-clone-react-native/) and [the multiple-choice quiz UI](/blogs/multiple-choice-quiz-app-ui-react-native/).

## How does the synchronization actually work?

The server is the single clock, and [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) 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.

```txt
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](/blogs/discord-ui-clone-swiftui-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](https://developer.apple.com/streaming/) and an [AVFoundation](https://developer.apple.com/documentation/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](/blogs/ios-default-browser-selection-screen-clone/) and [the one sec breathing overlay](/blogs/one-sec-app-breathing-overlay-clone/): 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](/blogs/esports-tournament-bracket-ui-react-native/).

## 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.

## 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 for this: its game and quiz designs are free, and every one has a machine-readable source page that Claude Code, Cursor, or Lovable generates real code from. Then wire the four live states, countdown question, locked answers, verdict, and audience counter, over a WebSocket connection.

### What made HQ Trivia's UI feel live?

Synchronization theater. Everyone saw the same question at the same moment, the countdown was short enough to forbid Googling, answers locked simultaneously, and the audience counter made the crowd visible. The host video amplified it, but the game reads as live even without video if the state changes land together.

### Do I need live video to build a live trivia game?

No, and you should not start with it. The game loop runs on synchronized state over WebSockets; video is a presentation layer on top. If you add it later, low-latency HLS is the Apple-documented route, because standard HLS latency runs far behind the 10-second answer window and breaks the game.

### How does the answer lockout work technically?

The server is the clock. It broadcasts the question with a deadline timestamp, clients render the countdown locally toward that deadline, and the server rejects any answer arriving after it. Never trust the client's timer; latency cheating is the first exploit anyone tries.

### Why did HQ Trivia shut down if the format worked?

The format was expensive: cash prizes, live hosts, and production every night, against an audience that fell from its 2.38 million concurrent peak in March 2018 to a fraction of that by 2020. The company shut down after a failed acquisition. The lesson for builders is to clone the interaction pattern, not the business model.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*