welcome to mossyrealm

removed: webamp
added: custom unified audio player

Initially integrated Webamp because the UI matched the site aesthetic really well. Classic winamp-style player, playlists, visualizer. Looked great in isolation.

Integration into a React SPA was the actual problem. Spent almost 5 days on this. Even tried building my own version using AI at some point. Honestly not worth my time.

Issues I ran into:

• Webamp renders directly to document.body, which bypasses React entirely
• React StrictMode double-mounts in dev, resulting in orphaned DOM nodes
• Frequent removeChild errors during route changes
• Two independent audio engines existed at the same time: homepage player and webamp player
• Navigating between routes could cause both to play simultaneously
• R2 + CORS issues caused Webamp to skip tracks without playing audio
• Window positioning / centering required far more work than justified

None of this was subtle. Debugging felt like someone tied my hands up and tossed a bucket of cement over my head.

Removed Webamp entirely. Implemented a single global audio engine using Howler.js. One audio instance, one source of truth, shared across all routes. Playback persists through navigation. Track changes propagate everywhere. Simpler system, fewer edge cases, predictable behavior.

Lost some visual flair. Gained stability, clarity, and sanity.

I read a while ago that "working software beats clever software every time." This was one of those moments where that line applied very literally, I guess.

Webamp is solid software. Just not designed for modern React routing, StrictMode, or shared application state. Forcing it into that shape created more complexity than it removed.

First time I set up a custom domain was back in high school. Spent almost two days trying to figure out nameservers, DNS records, and why nothing was working. During undergrad I did it a few more times but it's been a while since I dealt with frontend infrastructure from scratch.

The idea is simple: each service does one thing well. Hostinger just holds my domain registration. Cloudflare handles DNS and security. Vercel runs the actual website. R2 stores media files. No service tries to do everything.

"Most of the work is just waiting for nameservers to propagate. The rest is clicking buttons."

Tried adding fancy cursors, sparkle trails, fireflies, and click animations to make the site feel more magical. The result? It turned into a circus.

"More effects does not equal better vibes. Dense layouts need simple interactions."

I always thought old websites had simple interactions because of technical limitations. But actually, when you have a visually dense layout with lots of boxes, borders, and patterns, simple interactions make sense. The complexity is in the layout, not the behavior.

Modern sites flip this. Minimal layouts but fancy animations. You can't have both maxed out without it feeling overwhelming.

Explored six different color palettes before landing on "Sunlit Glade." The journey taught me a lot about what makes colors feel cozy versus clinical.

"Warm amber plus forest green equals cozy. Cool blue plus green equals clinical."

Cool-toned palettes looked nice in isolation but felt sterile when applied to the site. Warm amber accents made all the difference. They added that "sunlight through trees" feeling I was going for.

Tested multiple font combinations. Learned that serif fonts carry the "old book" vibe better than anything else.

"Cinzel plus Lora equals fantasy storybook. Hierarchy matters more than variety."