Portfolio project · Tool · 3D
A vintage fruit machine for designers. Pull the handle and the reels land on a colour palette and a font pairing built for a theme. Hold what you like, spin again, and cash out a brand card.
Colour palette generators are pure luck. You keep pressing until something looks right.
I sometimes use a website that generates colour palettes. It's useful, but it's just luck: it throws out random colours and you keep going until you see something you like. There's no idea behind it.
So I thought it'd be cool if a tool could generate palettes from a theme instead, so "Seventies" gives you something that actually feels seventies. Then I took it a step further and had it pick the fonts that go with the theme too, a headline and a body pairing, so you get the start of a whole brand.
And if it's luck either way, it may as well look like it. For the container I wanted something funky, so it became an old-style fruit machine. It started as a fun idea, and it's ended up one of my favourite things I've made.
Tap a row on the pay table, or press THEME. Each theme sets its own colour rules and font list.
The reels spin as real drums and land one by one. Your brand name is spelled out in the headline font.
Hold the colours or fonts you love, and they stay put while the rest spin again.
A brand card prints into the tray, with every value, the fonts and a contrast check.
Live preview
The real machine, running live. Press Space or click the handle to spin, drag to look around.
The first version was a flat 2D page: a machine-shaped panel with colour swatches, letter reels and a lever on the side. It proved the idea worked, but it didn't feel like pulling a real handle. So I rebuilt it as a full 3D machine in three.js, with drums that physically spin, chrome, bulbs and a tray that prints a card.
Little nods to me
Like a real machine, it carries a maker's plate and an inspection sticker. The green "Inspected" stamp is signed H.G., my initials. The plate says "Est. 2001", the year I was born, and the serial number, 0002001, hides it again.
Fruit machines tell you to gamble responsibly. This one tells you to design responsibly, with a few warnings every designer will recognise.
The coin slot doesn't take money. It says "Insert idea, any size", and dropping an idea in starts a spin. Underneath it still says 10p, 20p, 50p.
Where a fruit machine lists its prizes, this one lists the 16 themes, each with a palette preview and a named "house pick", like Avocado Suite for the seventies or Dial-Up Dreams for Y2K.
About one spin in forty hits the jackpot: it lands on the theme's hand-picked house pick, with flashing bulbs and a bell.
Cashing out prints a numbered card into the tray, "Payout No." and all. Click it for the hex, RGB and HSL values, the font links, CSS variables to copy and a PNG or JPEG to save.
Every palette has at least one dark and one light colour, so there's always a readable text pair, and the machine shows a live accessibility contrast count for every spin.
The reels, bell and coin are all synthesised in the browser rather than recorded. And for anyone who'd rather not use a mouse, the whole machine works from the keyboard.
It's one HTML page with no build step. The machine is modelled in code with three.js, its artwork is drawn on canvases, and bloom makes the bulbs glow. The camera opens at an angle and settles on the machine, and set views jump between the machine, the reels and the tray.