Innovative Web Experience: The Cosmic Selector – A 3D NFC-Enabled Jukebox for Music Fans

Explore a groundbreaking digital project that merges music, technology, and art: The Cosmic Selector. Designed as an interactive web application for the renowned band Lord Huron, this platform offers fans a unique way to engage with the band’s new album through tangible, physical tokens.

The Concept

Fans attending live shows or receiving mail orders are gifted custom-designed NFC coins. These coins are more than collectible items—they serve as gateways to exclusive musical experiences. By simply scanning their NFC-enabled phone over the coin, users can instantly access and listen to select tracks from Lord Huron’s latest record.

Live Listening with a Digital Jukebox

Mirroring the nostalgic feel of a classic bar jukebox, the Cosmic Selector displays real-time playback updates accessible to all users currently browsing the site. This communal listening experience fosters a shared musical moment among fans around the world.

Technical Foundations

Behind the scenes, the web app is built with Vue.js and Nuxt.js, ensuring a smooth and dynamic interface. Hosted on Netlify, the platform integrates 3D model visuals created in Blender, which are rendered on the webpage using Three.js for an immersive visual experience.

Key Features and Architecture

• NFC Integration: Utilizing the Web NFC API, I crafted a seamless flow for minting unique, track-specific coins. Each coin links to a dedicated URL stored in DynamoDB, with the NFC chip programmed in real-time to point to this link—allowing only a single play per coin.

• Real-Time Updates: Pusher powers instant synchronization, so as users select songs, the queue updates dynamically, managed efficiently through AWS Lambda functions with a bespoke queuing algorithm.

• Coin Minting Process: The creation of each NFC coin involves a carefully orchestrated process—assigning unique identifiers, storing metadata, and programming the NFC chips—all streamlined into one operation.

Learn More

Discover the custom-designed coins here:

[Instagram link with visual of NFC coins]

And explore the web app in action:

[Instagram link with demo showcase]

Questions or interested in developing a similar interactive experience? Feel free to reach out—I’m happy to share insights or collaborate on innovative digital projects.