Mascot
Bites is a little red monster I drew in tldraw. It started on my canvas, then walked onto my website. It runs along the top of my homepage, it’s the icon in the browser tab, and it hangs around on my 404 page:
Where it started
I wanted a little mascot on my tldraw canvas. I had an agent set one up from tldraw’s own fairies, a small painted sprite that followed my cursor around. Then I wanted it to look like Bites, so I gave it the Ben’s Bites logo, which I drew years ago:
for now, lets change the sprite. generate 3 versions of this logo in tldraw shapes Logo BIG.svg but 'mascot-ified'
Its three weren’t good. I just fancied drawing it, and it wasn’t that hard. Getting an agent to tweak every little thing would have taken me longer. So I drew my own on the canvas.
The agent then redrew its sprite to look like mine. I asked if it was using tldraw shapes. It wasn’t. It was a copy painted over the top of the canvas, not my drawing:
i dont like the sprite. can we use what i drew? and animate things like jump, wave, blink?
It did, and then I had it take the fairy out of the file.
Click to blink
Once it was my drawing, I knew exactly what I wanted it to do. So I asked for all of it in one go, in a new session with Codex:
in bites.tldraw can you animate my mascot on the home page. if i drag it around it should move its legs, click to blink, eyes hidden as default but rise up to show on hover, long press and release should jump.
All of that lives in a script inside the tldraw file, and it moves my actual shapes. Then a few rounds: the eyes broke when I resized it, and I added arms that wave from whichever side you wave the cursor. The first go at those was too erratic.
Feed it
It’s called Bites, so it should bite. I knew what the bite looked like, the mouth snapping shut. I didn’t know what should set it off:
i mean a fun way to get the mascot to start the bite animation
Its idea: feed it. Drag any shape to its mouth and let go. I said do it.
It also flashed a little “nom!” when it chomped. I didn’t like that, so it went. When I know what I want, I say it. When I don’t, I ask for ideas and pick (Talking to agents).
On my site
A month later I rebuilt my website, and it was deliberately basic, so small details mattered more. I’d seen Noah Farrar’s site, with a little character running along the top of the page, and I wanted mine to waddle around in the same way.
in site.tldraw - there is a mascot. i want to have it animated across the top border. this is a great post from someone who did theirs https://noahfarrar.com/spriterunner
implement locally before deploying
Locally first, so I could look before anyone else could. The first go ran my dog, Nero, across the top instead. I’d been making sprites of him the night before. Then it was Bites, but the eyes sat in front of its face, the arms disappeared, and it flipped round at each end, which looked strange:
send the eyes to the back. both arms should show. don't flip the image - it should walk across the screen like a crab left - right.
Not very delightful
It worked. It just wasn’t much fun to watch:
its a pretty basic animation right now. not very 'delightful' - what are some ways we could improve it?
It came back with a list: a proper crab walk, a little squash when a foot lands, speeding up and skidding before it turns, eyes that follow your cursor, blinks at odd times, a wave now and then. I took all of it and added a few of my own:
implement those recommendations. can we add on up arrow it jumps and left/right it changes direction or moves faster when pressed? thinking of how to make it a bit more interactive. i like the hover for tooltip that noah has on his too. lets do that and it says 'hi i'm bites'
I also made it the favicon.
A 404 page
My here.now analytics showed a pile of 404s. Most were bots poking around, but it was an excuse:
lets make a fun 404 page. we can reuse the mascot animation, mockup some options.
It recommended b, the game. I went with a, the quiet one, and took out the “you asked for” line. I can’t remember why. Then one more thing, for the 404 and the homepage:
when a user hovers the mascot, it should stop, linger and wave. then if the user hangs there for too long, the mascot shrugs and walks off. this should work on the 404 and homepage.
That’s the page at the top. here.now can’t serve a separate 404 page, so every address that doesn’t exist loads my homepage, and the homepage works out it should show the 404 instead.
Bring your own
Then I built a playground for it with Josh Puckett’s DialKit (it’s on Using AI). While it was being built I wondered:
is there a way that people could bring their own mascot and have it work in this playground? how?
It added uploads, and I had it draw a mascot of its own to test with: Pip, a teal robot. But an uploaded picture only moves as one piece. It can run and jump, but it can’t wave:
what about arm/leg/eye movement - how could that be done?
The answer is a rig. Bites is an SVG, so every part can have a name and a point it turns around. Pip got the same, so Pip waves too. This is the playground:
How it works
It’s one drawing. In tldraw the script moves the shapes I drew. Everywhere else it’s the same drawing redrawn as an SVG, with every part named, and each page moves the parts. That’s why the playground can take your mascot: if yours has parts with the same names, the same code moves them.
Make it your own
You can put your own character in the playground. Draw something, on paper or in tldraw, give it to your agent with this, then upload what comes back at bentossell.com/mascot:
here's a drawing of my mascot. turn it into an svg i can upload to bentossell.com/mascot. name its parts like https://bentossell.com/mascot/examples/pip.svg does: body, left-arm, right-arm, left-leg, right-leg, left-eye, right-eye, each a group with a data-pivot where it joins the body. keep it looking like my drawing, don't redesign it.
Notes
- The agent’s versions weren’t good, so I drew Bites myself on my tldraw canvas.
- When I knew what I wanted it to do, I asked for all of it at once. When I didn’t, like the bite, I asked for ideas.
- Then onto my site, running along the top like Noah Farrar’s. Locally first.
- It worked but it wasn’t fun, so I asked how to make it delightful, took the list and added my own.
- Then a 404 page, and a playground where you can bring your own mascot.
- It’s one drawing with named parts, so the same code moves any mascot.