Building the Widget Wall That Was Not Supposed to Be Real

An AI concept image showed iPhone widgets hanging on a wall. It didn't exist. So I built it.

November 2, 2024 • project

I came across this tweet showing an AI-generated concept: iPhone widgets turned into live wall decorations. Just a visual mockup, nothing real. But I thought the idea was too cool to stay imaginary — so I decided to build it myself. Here’s how I brought those widgets to life, off the screen and onto my desk.

the tweet with an ai generated image showing iphone widgets on a wall

The Hardware

To bring this little info screen to life, I needed just a few essential parts:

  • A screen (obviously)
  • A tiny computer with internet access
  • A mounting of some sort to hang it on a wall or put it on a desk
the parts I used
The parts I used

For the display, I went with the Pimoroni HyperPixel 4.0 Square — and honestly, it’s the perfect fit. Its square shape matches the iPhone widget aesthetic beautifully, and with a 720x720 resolution (~254 PPI), everything looks crisp and gorgeous. The 4-inch size makes it great for hanging on a wall or sitting on a desk.

I also chose the touch version, just in case I wanted to add some interactivity later. Who knows — maybe I’ll be swiping weather updates from my wall someday.

Powering this setup is a Raspberry Pi Zero 2 W — a tiny yet mighty computer that fits right behind the screen. It’s capable of running a web browser smoothly enough to display simple animations and modern UIs. Plus, it sips power at just over 1W, so I can run it all day without guilt (or a higher electricity bill).

I installed Raspberry Pi OS Lite on it and set it up in headless mode (no monitor, no keyboard, no mouse — just SSH). You check out my guide on How to Set Up a Raspberry Pi. Skipping the desktop environment also saves precious resources for what's really important: fast widget rendering without lag.

To hold it all together, I 3D printed this case. It’s compact, easy to print, and gets the job done. There are fancier cases out there, but I wanted to keep it simple — at least for version 1. If I upgrade the design later, I’ll make a stand with a slight incline for easier use (or at least a more original design).

The Software

Since I’m a web developer, I naturally went with what I know best: web technologies. To power the baby software for this little screen, I built a simple web app using HTML, CSS (with animations, of course), and React for fetching data from APIs. The web page runs on a local server on the Pi and is displayed fullscreen in a browser — basically, it’s a mini web kiosk.

In my opinion, web technologies are perfect for this project, not just a convenient default. CSS handles animation beautifully and cheaply — no need to hand-roll transitions or fight a game engine just to get a smooth clock hand or a fading album cover. The page itself is essentially static and lightweight, which matters a lot on a Pi Zero 2 W with no GPU to spare. Pulling in data is trivial too: weather, air quality, now-playing info all just become fetch calls to an API, no different from building any other web app. And because it's HTML and CSS under the hood, the UI stays flexible — resizing a widget, swapping a layout, or adding a new one later is a matter of editing markup, not recompiling anything.

For something meant to keep evolving with new widgets over time, that flexibility ended up being the real win.

Widgets, Widgets Everywhere

iOS widgets have always struck me as one of Apple's more underrated design wins. They compress information like time, weather, a song, a calendar event, into something small and glanceable, but never boring to look at. Good widgets manage to feel alive without moving much, mostly through color, typography and a bit of restraint.

examples of iOS widgets
A few of the iOS widgets that got me hooked on the format in the first place.

I had way too many ideas for what I could display:

  • A weather widget
  • A classic clock with hands
  • A now playing screen showing album art when listening to music at home
  • And basically any other useful iOS widget I’ve ever wished was a physical object

I started prototyping a simple weather widget to see how it would look and how CSS animations would run on the Raspberry Pi.

prototyping interface prototyping interface
Prototyping UI for the weather widget interface.

But if I have multiple widgets, how to switch between them? I had no buttons — just the touchscreen.

That’s when I remembered something: the iPod Nano 6th gen UI. Apple’s tiny square iPod with a touchscreen and no home button. It used a simple gesture-based UI that worked surprisingly well. Sounds familiar?

iPod Nano 6th gen user interface
iPod Nano's user interface

So, I stole the idea (lovingly) and recreated that navigation system for my widget screen.

Boom!

user interface
The modernized "homescreen"

Problem solved, I can select the widget I want to display by just touching it — and easily go back home and select another one just with touch gestures. I took the opportunity to give the UI a modern iOS-style look.

Then I started creating the different widgets:

1 Clock widget

classic clock modern clock
The classic clock and the modern one.

The clock widget comes in two flavors: classic and modern. Both are inspired by Apple’s Clock widget on iOS/macOS, and there's even a red night mode similar to the soft ambient glow of the Apple Watch Ultra. You can see a live version here. And yes — the source code is on my GitHub.

The modern version can also display weather or music info.

Live look at the clock widget's launch animation and the ticking seconds.

This is the widget displayed by default when there is no other information to show.


2 Weather widget

weather widget weather widget ui

After testing different user interfaces, I ended up choosing the one that displayed the weekly weather forecast. Clearly inspired by Apple’s weather forecast widget — clean, simple, and informative. It pulls data from the Open Weather API, using my current location to show the forecast. The background color even adapts based on the current weather, so it never feels out of place.


3 Now Playing widget

This one was inspired by Mark Hank's project. There's something I've always loved about seeing the album art displayed like that, almost like having a vinyl cover of the currently playing disk.

music user interface music user interface
Album art with a blurred background from the album’s colors.

It shows the album art of whatever’s playing at home. I have a mix of Sonos and HomePods I use via AirPlay — but sadly, Apple doesn’t provide a public AirPlay API, so I had to get creative.

I ended up using the unofficial Sonos HTTP API bridge to get song data from my Sonos speakers: track name, artist, album art — the whole deal.

Whenever music starts playing — via AirPlay or via the Sonos app, the widget appears automatically, replacing whatever else was on screen. It feels like it's connected to the home.

Live preview when music starts playing on my Sonos speaker at home.

I really love seing the gorgeous album art changing automatically when listening to a playlist.

📝

There’s also this alternative using the Apple MusicKit JS API. But it only shows the last played song, isn’t tied to a room or device, and requires a paid Apple Developer account — which I don’t have at the moment.

The Sonos API provides endpoints to add music playback controls which I could add in a future update.


4 Air Quality widget (2026 update)

I moved to Shanghai in 2026, and air quality became something I check multiple times a day. Before opening a window, before heading out. It made sense to give it a permanent spot on the screen rather than a phone app I have to check often.

This widget pulls real-time data from the IQAir AirVisual API, using the US AQI scale. The free access lets me get the nearest city's AQI data. The color shifts along with the reading, from a calm green on good days to a warning purple when it's time to wear a mask outside. The same colors and icons as IQAir official brand guidelines.

Out of everything on the screen, it's probably the single piece of information I get the most value from at a glance. No unlocking a phone, no opening an app, just a quick look on my way to the door.

The result

Here is the result on my desk, showing the current time. It can display specific widgets based on the hour of the day or when music starts playing. I ended up putting it on my desk because of the visible power cable if hanged on the wall.

the screen on my desk showing a classic clock
The final result on my desk

Looking at it now, it's funny how close it landed to that original tweet, a piece of AI-generated wishful thinking that turned out to be entirely buildable with parts I could order online, plus software and patience. The screen doesn't do anything a phone couldn't already do. That's not really the point. There's something different about information that lives in a fixed place that you glance at instead of pull out of your pocket for. My phone competes for my attention with a hundred other things; this little square on my desk only ever shows me the time, or the weather, or what's playing in the room.

It's still a first version. The touchscreen is barely used and I have a growing list of ideas, playback controls, a new stand to make it more usable, maybe even a second unit for the kitchen. But for something that started as a tweet I wasn't supposed to take literally, I'd call it a good project.

Links

  • raspberryPi