Magic 8 ball

Overview

A browser-based interactive Magic 8 Ball vibe-coded (using Claude) as a single HTML file, deployed on GitHub Pages with no backend.

Started with an ASCII concept, then pivoted to a fully 3D experience after exploring the visual direction together with Claude.

What was Built

A WebGL-rendered 3D sphere with two distinct faces: a glossy black ball with the classic white circle and "8" on the front, and a dark window with a glowing blue downward triangle on the back.

The ball is fully rotatable by dragging, and auto-flips to reveal the answer on the back face when a question is asked. You are able to try again and ask another question.

Process

The design went through several iterations from ASCII aesthetic → holographic CD-like ball → glossy black realistic ball.

• Researched how a magic 8 ball looks and feels like.
• Narrowed down aesthetic for the website.
• Created designs and user flow on Figma for Claude's reference.