The StreamArena cast is six controls you'd find on a remote or a game pad: Play, the Pause twins, Stop, Rec, Heart and the D-pad. They're made of black jelly with glossy white eyes, and they live all over our site, from the hero you can poke to the game tiles and the footer.
We picked controls because they're the buttons a streamer already presses all day. Play, pause and record need no explanation, and the D-pad is a nod to the game pads we grew up with. A control also stays readable at thumbnail size, on a phone or on a small game tile.
The six controls
Every character has one move, and you can see it on our homepage when you click one.
Play
Play is the lead, a fat triangle that leans forward like it's about to start something. When you poke it, it hops and sways sideways. It's the one you'll see most, including on the winner card at the end of a round.
The Pause twins
Two capsules that never go anywhere alone. The right twin leans on the left one, and when you poke them they bounce apart and fall back together.
Stop
Stop is a rounded square with flat, half closed eyes. It's the deadpan one. Poke it and it doesn't jump at all. It just shakes its head.
Rec
Rec is a round button that's always paying attention. A poke sends it into a full spin, the way a recording light would turn if it could.
Heart
Heart likes everything you say. It took the place of Skip, the first cast's sixth member, and gives the group one character that's on your side no matter what. Poke it and it wiggles.
The D-pad
The D-pad is the gamer of the family, though a quiet one. It answers a poke by spinning on the spot like a joystick.
From toy plastic to black jelly
The first cast was glossy toy plastic, one bright color per character: a red Play, violet twins, a citrus Stop, a pink Rec, a sky blue Skip and a teal D-pad. It looked like a toy box. Next to six colorful game tiles the screen got loud, and we wanted the platform itself to feel calm.
We tried other materials along the way, including fluffy plush versions, before we settled on black jelly for all six. It reads as a serious brand from far away and as a toy up close. We want the games to be silly and the platform around them to look like it will still be there next year.
Black also let us cut the brand palette down to three colors: ink, citrus and violet, on a cream background. Platform colors like YouTube red and Twitch purple only appear where they mean something, like the badge next to a player's name.
The eyes do the acting
None of the controls has a mouth or realistic eyeballs. Their eyes are glossy white pills, and that's where all the emotion goes. Calm eyes are upright pills. When a character is happy, the pills squash and turn into little arches, like a lowercase n, and they blink at random so the cast never looks frozen.
On the homepage, the eyes follow your cursor, and a character turns happy when you hover over it. Move the mouse around and the whole cast watches you back.
How they're built
The characters are real 3D, rendered in your browser. A body starts as a mathematical shape, a signed distance field, that describes the outline of the control. We turn that shape into a mesh with marching cubes, using the version that ships with three.js.
The jelly look comes from a physical material with full transmission, so light passes into the body, and a clear coat on top. The dark color comes from a setting called the attenuation color, which three.js describes like this:
The color that white light turns into due to absorption
We set that color to almost black, so light that enters the body is swallowed and the jelly reads as dark glass with bright reflections. A small studio of soft lights gives the glossy reflections. All six share the material, so you tell them apart by shape and eyes.
In the homepage hero, the controls sit in a toy box with 2D physics from Matter.js. You can grab one, throw it and watch the others get knocked over. The physics bodies follow the outlines of the characters, so they stack and tumble the way the shapes look like they should.
Where you'll see them
- In the homepage hero, where you can pick them up and throw them.
- On the game tiles in the lineup, hopping in and out of their cards.
- On stream, on the winner card when a round ends.
- In the footer, standing on the edge of the card.
The games they host are in the lineup, and the how it works steps show how to put one on your stream. If you want to make a game of your own, the creator program lets makers keep 100% of what their game earns for the first two years.
Questions
Do the characters have names?
They go by what they are: Play, the Pause twins, Stop, Rec, Heart and the D-pad. It keeps them easy to talk about on stream.
Where did Skip go?
Skip was in the first cast. Heart took its place, and Skip's two triangles stayed in the sketchbook.
Are the characters real 3D?
Yes. On our homepage they're rendered live in your browser with three.js, and you can grab them and throw them around the hero.
Sources
- three.js docs, MeshPhysicalMaterial
- three.js examples, marching cubes
- Matter.js, 2D physics for the web
Renders on this page come from the same 3D code that runs on our homepage.
