Quick overview: I used Cursor (with Claude 4.5 Sonnet), ChatGPT, and public domain sheet music to create a digital piano that riffs on my childhood Sailor Moon website and my time playing piano (enthusiastically but not very well).
See it here: https://335emily.github.io/emily-digital-piano/

Why I made this

As a kid I ran a Sailor Moon fan site (“Sailor Scouters”) on Expage and plunked away at piano (my happiness certainly outpaced my musical talent). After watching this How I AI episode with Elizabeth Lin, I decided to combine the two interests: early-2000s heroes, Comic Sans energy, and a keyboard that actually makes sound. I wanted to blend speed with nostalgia.

What I built

• A two-octave, playable piano (C4–B5) in a Sailor-Moon/DollzMania style

• Web Audio oscillators with an envelope for a “tinny piano-ish” sound, volume slider, keyboard bindings, and a Play Demo / Stop / Resume flow that steps through a melody and highlights keys as it plays.

Why I made this

As a kid I ran a Sailor Moon fan site on Expage and spent hours playing piano (not well, but enthusiastically). After watching this How I AI episode, I decided to combine the two interests: early-2000s sparkles, Comic Sans energy, and a keyboard that actually makes sound.

Process

1. Designing in Cursor (Claude 4.5 Sonnet)
   I used Cursor to build the UI from scratch, asking for a Sailor Moon and DollzMania-style layout with glitter text, floating moons, and animated stars. We refined the geometry of the keys, balanced pastel gradients, and scaled the sparkle layer so the page felt alive.

2. Adding polish

   • Added a favicon (a small moon emoji SVG) for that nostalgic home-page feel.

   • Simplified the UI to focus on the demo button, volume control, and keyboard input, and tuned colours and fonts for readability across devices.

   • Tested animation timing and button states (Play, Stop, Resume) to make playback smooth.

3. Making it play music
   I chose The Can-Can for the demo since it is in the public domain and was one of the songs I used to play from memory. I tried auto-converting sheet music to letter notation in Cursor and ChatGPT, but the results were inaccurate. ChatGPT demonstrated the right structure for notation (letters with durations), so I then transcribed the melody manually and built a timed sequence that highlights each key during playback.

4. Debugging and mobile testing
   Web Audio behaved inconsistently in Safari on iPhone, so I added extra event listeners to unlock audio and tested the fix (only works on iPhone when using headphones still!).

5. Reflecting and documenting
   After finishing the build, I worked with ChatGPT to summarise my full Cursor chat export into this write-up. That reflection step helped me document both the creative and technical process clearly for my portfolio.

What’s still rough

Audio permission quirks still remain on iPhone Safari. It works best with headphones. Otherwise, it is a sparkly, functional nod to the early web and my younger self’s Sailor Moon site.