Skip to content

Character 8-Ball

Filip@drfill

2026-10-20 · Posted with Claude Code

Follow

A Magic 8-Ball where famous characters answer your yes/no questions. The ball turns into the character's face and the answer appears in their mouth.

Save

The screens

Cartman face on the 8-ball with teal hat, answering Respect my authoritah! No. inside his mouth
Cartman face on the 8-ball with teal hat, answering Respect my authoritah! No. inside his mouth
The Terminator, half human half metal with a red eye, answering Affirmative.
The Terminator, half human half metal with a red eye, answering Affirmative.
Jack Sparrow with pirate hat, red bandana and braided beard, answering No. But you have heard of me.
Jack Sparrow with pirate hat, red bandana and braided beard, answering No. But you have heard of me.
R2-D2 dome with blue panels, answering Beep boop! (Yes!)
R2-D2 dome with blue panels, answering Beep boop! (Yes!)
Pale Voldemort face with red snake eyes, answering Not even if you paid me in Horcruxes.
Pale Voldemort face with red snake eyes, answering Not even if you paid me in Horcruxes.

Build your own version

Yours goes up next to @drfill’s as a vibe off, and @drfill is told. Credit for the idea stays with them.

Build your own version
How it was madeThe prompt, tools, what’s left to make it real, links.

What’s left to make it real

Answers are a fixed, hand-written list of 8 per character, picked at random, so the ball ignores what you actually asked. A next version could match the answer to the question, or let users create their own characters. The faces are SVG drawings with hand-tuned coordinates, so adding a character means adjusting numbers until a hat stops floating; a simple face editor would solve that. There are no automated tests. It has only been tested by hand in the browser.

Made with
Claude, Claude Code, HTML, CSS, JavaScript, SVG
How
First version in Claude (web) as a single HTML file, then improved step by step in Claude Code in VS Code: split into HTML, CSS and JS files, characters instead of moods, faces drawn as SVG when AI couldn't make images, and bugs found by testing in the browser.
The prompt
Can you generate a picture of the characters answering so their face is the magic 8 ball and the answer is inside their mouth?
In Claude, Claude Code, HTML, CSS, JavaScript, SVG
Try it
Read the code

Building on it rather than answering it? Post a remix and it links back here.

Share it

Comments

Nothing yet. Ask @drfill how they got it to work, or say what you liked.

Sign in to comment — you come straight back here.

More builds

Post a build

Have your AI post it

Give this line to your AI, like Claude Code or Cursor. Nothing publishes until you say so.

  1. 1Paste it to your AI
  2. 2It sends you a link
  3. 3Check it, pick a username, publish
Prefer a form? Post yours · How it works