Dot Studio.
A circle, two eyes and opinions.
Dot is the character inside Signal Studio, designed and engineered from scratch. One spring engine draws every frame of Dot on this page.
Poke it. Pick it up. Or leave it alone for a minute.Poke it and watch its face.
Why Dot exists.
Signal Studio is plain on purpose: short sentences, no jargon, nothing that shouts. Dot is the one place it smiles. A touch of personality in a restrained product and brand, so the tool feels like it was made by people. It never does the talking.
Made of almost nothing.
A shadow, a body, two eyes, four lids and eighteen marks. The personality isn’t in the drawing. It’s in how those parts move.
- A shadow that shrinks as Dot leaves the floor. Without it, nothing lands.
- A body that keeps its area. Stretch it one way and it narrows the other, so it always feels like the same amount of Dot.
- Two eyes that turn towards whatever Dot is looking at. The far eye narrows, which is most of what makes the face feel round.
- Four lids, one above and below each eye. Sleepy, cross, worried and delighted are all lid positions.
- Eighteen marks for everything a mouth would do: a sparkle, a sweat drop, an exclamation mark.
With springs. A crouch, a stretch through the air, a landing with weight and a wobble to settle. Turn them off and the same hop is a sticker being moved.
One engine, three places.
Every moving value is a spring, so any action can interrupt any other. Time moves in fixed steps of 1/120 of a second from a seeded random source, so the same script always plays the same way. Here is one hop, at one moment, drawn three ways.
Live Played in real time on this page.
Replayed The engine sent straight to that moment.
Drawn at build time An SVG written when the site was built.
Tick 60 of the hop, 0.50 seconds in.
- Live. The Dots you can poke on this page.
- Scripted. The films below, which you can scrub like video.
- Rendered. The diagrams, stickers, pin and icon, drawn once at build time.
const dot = new Dot({ x: stage.w / 2, floor: stage.h - 24 });
dot.hop({ height: 1.4 }).express('joy');How are you, Dot?
Move the handle, or focus the field and use the arrow keys. Energy runs left to right and feeling runs bottom to top. Everything Dot does blends between them: its lids, its breathing, how high it hops and what it notices.
Dot at work.
Inside Signal Studio, Dot turns up for moments that need a little warmth, then gets out of the way. Each of these is live.
An empty list
Nothing here yet.
An upload
A long export
Exporting 48 files
A mistake
Three very short films.
Not videos. Each is a script played by the same engine, so you can pause it, drag the playhead and watch any frame.
This film is drawn live and needs JavaScript. A sentence is missing its full stop. Dot spots it rolling across the floor, chases it, gets outwitted, pounces, and finally carries it up and knocks it into place. The sentence turns from grey to black. Dot does a small, satisfied bounce.
Read the film
A sentence is missing its full stop. Dot spots it rolling across the floor, chases it, gets outwitted, pounces, and finally carries it up and knocks it into place. The sentence turns from grey to black. Dot does a small, satisfied bounce.
This film is drawn live and needs JavaScript. Someone is writing. Dot wants to help and lands on the text, which leaves a typo. Dot worries, sees the Focus switch, hops up and turns it on, then tiptoes out of frame and peeks back once.
Read the film
Someone is writing. Dot wants to help and lands on the text, which leaves a typo. Dot worries, sees the Focus switch, hops up and turns it on, then tiptoes out of frame and peeks back once.
This film is drawn live and needs JavaScript. A grey dashboard. Dot sniffs twice, winds up and sneezes, and a burst of colour lands on every card. Dot is dizzy for a moment, then delighted.
Read the film
A grey dashboard. Dot sniffs twice, winds up and sneezes, and a burst of colour lands on every card. Dot is dizzy for a moment, then delighted.
Six shorts.
The best of twenty, each a storyboard played for real by the same engine, and each made for one face. Pause, scrub, watch any frame.
This short is drawn live and needs JavaScript. Dot hops up onto a tower of three task cards. It wobbles, sways and topples. Dot hops onto ⌘, then Z, and the whole fall plays backwards. Back on top, Dot glances left, glances right, and holds very still.
Read the short
Dot hops up onto a tower of three task cards. It wobbles, sways and topples. Dot hops onto ⌘, then Z, and the whole fall plays backwards. Back on top, Dot glances left, glances right, and holds very still.
This short is drawn live and needs JavaScript. A survey pop-up. Dot head-butts its close button, and it comes back. Again. The third time Dot boils from indigo to red, trembling, steaming, swearing in bolts and swirls, then smashes straight through it and slowly cools off.
Read the short
A survey pop-up. Dot head-butts its close button, and it comes back. Again. The third time Dot boils from indigo to red, trembling, steaming, swearing in bolts and swirls, then smashes straight through it and slowly cools off.
This short is drawn live and needs JavaScript. A task card crosses the board from To do to Doing to Done, with Dot hopping proudly alongside. When it gets its tick, Dot’s eyes fill with water and tremble, one tear escapes, and Dot checks that nobody saw.
Read the short
A task card crosses the board from To do to Doing to Done, with Dot hopping proudly alongside. When it gets its tick, Dot’s eyes fill with water and tremble, one tear escapes, and Dot checks that nobody saw.
This short is drawn live and needs JavaScript. A red squiggle under “teh”. Dot steps onto it and bounces, higher and higher, until it comes down on the word itself and knocks the letters into “the”. One last bounce, on nothing: a flat little thud.
Read the short
A red squiggle under “teh”. Dot steps onto it and bounces, higher and higher, until it comes down on the word itself and knocks the letters into “the”. One last bounce, on nothing: a flat little thud.
This short is drawn live and needs JavaScript. Three typing dots appear in a chat. Without moving at all, Dot slides its eyes towards them. They stop, start, stop. Dot shrinks, joins in as the fourth dot, and the message finally arrives: “ok”.
Read the short
Three typing dots appear in a chat. Without moving at all, Dot slides its eyes towards them. They stop, start, stop. Dot shrinks, joins in as the fourth dot, and the message finally arrives: “ok”.
This short is drawn live and needs JavaScript. A red badge says 3. Dot boops it down to zero and it pops away. The icon goes quiet and Dot misses it. A new badge pops up with a 1, and this time Dot doesn’t boop it: they bounce together.
Read the short
A red badge says 3. Dot boops it down to zero and it pops away. The icon goes quiet and Dot misses it. A new badge pops up with a 1, and this time Dot doesn’t boop it: they bounce together.
Out in the world.
Every object here is drawn by the same engine, from the same poses as the live Dot. The first five were drawn once, at build time. The loader is live.