Inspiration
Art discovery often feels like scrolling through an endless feed. We wanted to bring back the feeling of entering a gallery: discovering a place, meeting an artist through their work, and taking time to look.
Atelier Atlas began with a simple idea: what if the world itself became the entrance to an art museum?
What it does
Atelier Atlas turns an interactive globe into a doorway to independent art. Visitors select brass location pins, discover artists, and enter immersive 3D exhibitions.
Inside each gallery, visitors can walk freely or follow guided artwork navigation, inspect paintings and descriptions, and listen to an artist-selected Spotify playlist through the embedded player. A fullscreen view brings the exhibition closer, while an accessible 2D collection offers another way to explore.
An artist studio lets contributors place their own pin, upload artwork, write descriptions, and connect a playlist. Contributions currently save in the browser.
How we built it
We built Atelier Atlas with Next.js, React, TypeScript, Three.js, and React Three Fiber. Geographic data positions artists on the globe, while modular gallery layouts adapt to artwork count and proportions.
The galleries support desktop walking, drag-to-look, mobile touch controls, and guided navigation. Collision boundaries keep visitors within walkable space. IndexedDB stores local contributions, and official Spotify embeds provide the soundtrack.
The visual design pairs cream surfaces, antique-brass accents, and expressive typography. AI-generated sample paintings help demonstrate the exhibition experience.
Challenges we ran into
Making the globe feel inviting required balancing accurate geographic placement with readable pins, generous touch targets, and clear shared-location selection.
Free exploration introduced another challenge: visitors needed to move naturally through connected rooms without crossing walls or artwork. Guided navigation also had to work after someone wandered away from the entrance.
Music integration taught us to distinguish opening a player from starting playback. Spotify controls playback, and browser restrictions mean autoplay cannot be guaranteed. We adjusted the interface to expose Spotify’s native controls.
Accomplishments that we're proud of
We created a connected journey from world discovery to individual artwork, with a consistent visual identity throughout.
The gallery system supports one to three connected rooms for collections of up to 24 artworks, accommodates portrait and landscape pieces, and offers both free exploration and guided viewing.
We also preserved keyboard access, reduced-motion support, and a 2D fallback. Our validation included 39 automated checks covering the visitor journey, globe pins, movement boundaries, layouts, and local contributions, followed by focused checks for the Spotify controls.
What we learned
Immersion depends on small details: where a pin touches the globe, how far a visitor stands from a painting, and whether a control makes sense without explanation.
We learned that accessibility and atmosphere can strengthen each other. Clear navigation, readable descriptions, and alternative viewing modes make an exhibition more welcoming.
We also learned to test the distinction between what our interface controls and what a third-party service actually supports.
What's next for Atelier Atlas
Our next step is to move from browser-local contributions to persistent, shared exhibitions with artist accounts and cloud storage.
We want to collaborate with real independent artists, improve exhibition curation, and refine performance across more devices. We also plan to validate Spotify playback across accounts and browsers.
The goal is to make Atelier Atlas a place where an artist’s location becomes an invitation—and their work gives visitors a reason to stay.
Built With
- css3
- d3-geo
- git
- github
- html5
- indexeddb
- javascript
- next.js
- node.js
- openai
- playwright
- react
- react-three-drei
- react-three-fiber
- spotify-embeds
- three.js
- topojson
- typescript
- vercel
- webgl
Log in or sign up for Devpost to join the conversation.