Sprig Music Player

Inspiration

What if a music player felt less like a control panel and more like a tiny companion enjoying the music with you?

Before Build Week, Sprig Player was only an idea. I wanted a reusable music player for ChatGPT sites that could feel playful and alive without sacrificing accessibility or reliability. Its built-in companion rests while paused and dances in response to real audio playback.

Developers can use the built-in Sprig or replace it with their own pet or character. My custom example is DJ Neil, a magnificently round companion inspired by my actual cat.

What it does

Sprig Player is a reusable, configuration-driven web music player with:

• Play, pause, seeking, playlists, artwork, and playback persistence
• A built-in animated Sprig companion
• Support for custom companion artwork
• Dancing triggered by actual audio playback
• Optional musical notes and confetti
• Custom colors, layouts, features, and storage behavior
• Keyboard controls, accessible labels, error handling, and reduced-motion support
• Paused-by-default behavior so websites never unexpectedly begin playing audio

The same package was integrated into two intentionally different website codebases. Pocket Goblin uses the built-in Sprig, while Maple Was Here uses DJ Neil and its own visual identity.

How I built it

I used Codex through ChatGPT Work, powered by GPT-5.6, to turn the idea into a working developer tool.

Codex audited three separate prototypes, protected the existing websites, extracted the strongest implementation into a reusable TypeScript package, migrated two real projects, created automated tests, and helped diagnose a mobile control problem discovered during hands-on testing.

The project also includes a Codex setup workflow that inspects a target website, asks about the desired companion and player configuration, creates a site-owned configuration and wrapper, mounts the player, and verifies the result without replacing the site’s existing design.

I directed the product, visual design, companion behavior, testing, and final decisions throughout the process.

Challenges

The biggest challenge was turning several site-specific experiments into one reusable package without damaging the personality or behavior of the original websites.

Playback state also required careful handling. A website may remember the selected song and playback position, but Sprig Player must still load paused by default. Companion animation needed to respond to real audio events rather than simply assuming that playback succeeded.

Hands-on mobile testing revealed a control issue that automated tests haduu not exposed. Codex helped trace and correct it while preserving the rest of the player.

Another challenge was supporting both the built-in Sprig and highly customized companions such as DJ Neil through the same configuration-driven system.

What I learned

I learned how important configuration, isolation, and regression testing are when turning a creative prototype into a developer tool.

I also learned that accessibility and personality do not have to compete. A music player can be keyboard-friendly, reduced-motion aware, and predictable while still feeling warm, playful, and personal.

The final package passed 19 automated tests, along with TypeScript, build, example, and plugin-workflow validation.

What’s next

Next, I would like to use Sprig to create a standalone desktop music player where companions dance to music played through Sprig or be potentially integrated with Codex Pets.

Sprig Player began with one simple question:

What if your music player enjoyed the song with you?

Built With

• accessibility
• chatgptwork
• codex
• css
• gpt-5.6
• html5audio
• react
• typescript
• vitest