A STUDIO PROJECT / Streaming & real-time software

The Wheel Widget

An interactive giveaway wheel that connects Twitch chat with a live stream overlay.

Built for Twitch

01 / THE IDEA

From the chat.
Into the action.

The Wheel Widget began as a tool for a streamer who wanted to run interactive giveaways with their audience. It was used by TheBurntPeanut to bring that interaction to their community. Viewers join through a chat command, and a browser overlay shows the custom-built wheel live in broadcasting software such as OBS. Behind that simple interaction is a system that processes chat activity, manages entries, and keeps the overlay synchronized as the community participates.

ReactTailwind CSSshadcn/uiNode.jsNext.jsPythonExpress.jsMySQLPrismaWebSocketsIRC

02 / A CLOSER LOOK

The wheel.
And everything behind it.

A look at the updated interface, from wheel customization to stream management. Account screens use sample data; public pages show the local project website.

Wheel appearance editor with color palettes and a live preview — Making the wheel your own

Picker library showing two spinning wheels and a bingo cage — A library of stream pickers

Winner overlay editor with a sample pixelpilot announcement — Giving the winner the spotlight

Bingo cage appearance editor with a ball cage preview and color controls — Customizing the bingo cage

03 / THE DEVELOPMENT STORY

One project.
A lot of learning.

The focus was dependable behaviour during live broadcasts, from handling chat activity to showing a synchronized result on stream.

A tool for a live community

The project started with one streamer’s need for interactive giveaways. Functionality and reliability took priority, with an intentionally simple interface and a backend designed to handle growing participation during broadcasts.

Listening to Twitch chat

An IRC-based connection lets the backend listen for chat commands. Joining messages are validated, duplicate entries are prevented, and participants are added to the current wheel session.

Keeping the overlay in sync

WebSocket communication connects the backend to the browser overlay. New entries are pushed to the stream as they arrive, so viewers can see their participation reflected without waiting for a manual refresh.

Coordinating entries and results

The backend maintains the participant pool and determines the result when the streamer starts a spin. That result is sent to the overlay so the selection and the displayed animation stay in step.

A custom wheel for the broadcast

The wheel is custom-built, with its animation and presentation connected to the backend result. The overlay runs as a browser source in streaming software such as OBS, bringing the selected result to life while the streamer controls the event.

Learning through real-time systems

The project brought together chat integration, event-driven processing, and browser-based presentation. It grew from a tool for one streamer into a system designed to support a larger participating audience.

CONTINUE THE CONVERSATION

Have a question about The Wheel Widget?

Feedback, curiosity, and thoughtful conversations are always welcome.

Ask Tyson