Dreamball

Mixed-reality experience design · Rebuilt for the web in 2026

A classic pinball, rethought for a screen and a phone.

Dreamball is an exercise in mixed-reality interaction: the computer is the table and the phone is the controller, for short, low-effort play. In 2026 I rebuilt it for the web with AI coding tools; you can play it at the end of this page.

Problem
Adapt classic pinball to a digital medium in a way that uses it, instead of copying the physical table.
My role
Designer. Built the playable prototype in Processing; UI in Figma.
What I did
Defined the experience, ran a competitive analysis, designed the game system and its visuals, and built a playable prototype.
Outcome
A working prototype, later used as a teaching example in a faculty open educational resource on experience and game design.

The idea

Dreamball is an interaction exercise: take classic pinball and rethink it for two screens at once. Instead of copying the physical table, it uses the medium: the computer is the screen and a phone is the controller, a small mixed-reality setup.

It was designed for entertaining moments, so the bar was a low cognitive load: one simple objective, few tasks, and visuals attractive enough to hold a casual player.

Dreamball concept poster: the title over a dark circle with pinball flippers and a ball, and two hands holding a phone that shows the game menu
The concept: the computer is the table, the phone is the controller.

How it plays

The design ran on six rules.

A ball entering the table through the tube at the top
A new ball spawns from the top every 15 seconds.
A ball touching an orange diamond-shaped point target, with the ring at the center of the table
Points add +5 when the ball hits them.
A pink star target on the table
Star points add +10. They appear only with 3 or more balls in play.
The score reading 25, with a ball and a pink star point on the table
The score rises on every hit.
Four balls on the table at the same time, with the score reading 25
There is no limit to how many balls can be in play.
A ball falling between the two flippers at the bottom of the table
The game ends when the last ball leaves the table.

The 2026 web version keeps these rules on its first level, with one change: at most six balls are on the table at once. It also adds two levels, Dusk at 50 points and Nebula at 150. Each one drops balls and targets faster, makes gravity heavier and changes how the center ring spins. On Nebula, star points appear from two balls and are worth +15.

How I worked

I worked in three stages, from research to a playable build. The prototype was built in Processing, with the interface designed in Figma.

  1. Research and definition

    • Experience definition
    • Benchmarking analysis
    • Information architecture
  2. Design

    • Design concept
    • Components
    • Typography
    • Color
    • Wireframes and prototype
  3. Build

    • Coding
    • Testing

Competitive analysis

Before designing anything, I studied how four casual games handle interaction.

Alto's Odyssey

Alto's Odyssey: a snowboarder on a long dune slope under a teal sky, between tall rock formations
Alto's Odyssey, by Snowman. Shown for analysis.

An endless snowboarding game. You touch the screen to jump and do stunts, the scenery keeps evolving, and the design is captivating.

Peggle

Peggle: a board of blue and orange pegs and curved rails over a large illustrated animal, with the launcher at the top and score meters at the sides
Peggle, by PopCap Games. Shown for analysis.

A 2D puzzle and shooting game. You aim and shoot with the mouse, the score depends on hits and balls used, and you win by clearing the orange targets. The screen never changes.

Angry Birds

Angry Birds: red birds beside a slingshot on the rocks, facing a tower of wood and glass blocks across a misty bay
Angry Birds, by Rovio Entertainment. Shown for analysis.

A 2D strategy and shooting game. You aim and shoot with the mouse or by touch, earn up to three stars based on shots and birds used, and win by clearing every pig. The scenery changes from level to level.

Jetpack Joyride

Jetpack Joyride: the hero flying a jetpack down a lab corridor past coins, a missile and robots
Jetpack Joyride, by Halfbrick Studios. Shown for analysis.

An endless run with jetpack flight and shooting. You touch and hold to fly, obstacles and speed make it harder over time, and points come from survival time and coins.

Then I compared them feature by feature.

FeaturePeggleAlto's OdysseyAngry BirdsJetpack Joyride
Simple controls✓✓✓✓
Shooting dynamics✓✓✓
Shot direction preview✓✓
Static scenarios✓✓
Moving background effects✓✓✓
Limited ammo✓✓
Special powers✓✓✓✓
Levels✓✓✓✓
Scenario variety✓✓✓✓

What the analysis pointed to

The comparison pointed to three things that keep a casual player engaged:

  1. Feedback on the ball's direction before the shot, to give the player context.
  2. Objects with special powers that change the dynamics during play, to create interest.
  3. Variety in difficulty through levels with different challenges, to keep players engaged and motivated over longer play.

The 2021 design delivered the second: star points are the special object. They appear only while three or more balls are in play, a reward for keeping more balls alive.

The 2026 web version adds the third: three levels, each with its own challenge. Levels arrived in 2026 because the 2021 version was a proof of concept, and rebuilding it with AI coding tools made them possible. There is still no aim preview, because the flippers hit the ball and there is no shot to aim.

Visual direction

The aesthetic set four rules:

  • Subtle lighting.
  • Monochromatic or analog palettes, with pastel colors.
  • Noise, and offsets with slight contrasts, for a sense of depth.
  • Simple sans-serif typefaces.

The palette, sampled from the Figma file:

  • #222854
  • #95c3ff
  • #a8c7ad
  • #ff5442
  • #e98c68
  • #f1c08d

The 2021 design used three typefaces: Chaney, Brandon Grotesque and TT Firs Neue. The 2026 web version sets its text in Poppins, an open-license typeface close to TT Firs Neue.

Components

The game has five components, deliberately few.

Ball

The ball: a purple sphere on a dark blue tile

The main character, controlled with the flippers to hit targets and raise the score.

Points

A point: an orange diamond on a red tile

Basic targets that add +5 to the score.

Star points

A star point: a pink star on a pink tile

Special targets worth +10, appearing only when 3 or more balls are in play, as a reward.

Flippers

Two white-outlined flippers on a black tile

Controlled by the player to direct and propel the ball.

Boundaries

A boundary: an orange bar on a yellow-orange tile

The arena's limits. They act as obstacles and do not change the score.

The screens

Title screen: the Dreamball wordmark above a box that reads Use your device as the controller
Title.
Game screen: the table with a ring at its center, the score, the flippers at the bottom and a ball counter in the corner
The game.
Instructions screen: the components and how to play on the left, a map of the game screen and the phone controller on the right
Instructions.
Final score screen reading Your Score, 200
Final score.

The phone is the controller: a menu to start, then one button for each flipper.

A phone held in landscape showing the controller menu with New Game and Instructions buttons
The phone menu.
A phone held in landscape showing two large round buttons, one for each flipper
One button per flipper.

Play it

Play on a computer

Keyboard: ← and →. Phone: tap each half of the table.Play in a new tab (opens in a new tab)