Listening Eyes: Building a Digital Art Gallery with Three.js
by Oskar Freye
How I built an interactive digital art exhibition with Astro, Three.js, and custom WebGL shaders — from node-based maps to paper plane navigation.
I got pulled into something completely different this January: building a digital art gallery for a real exhibition. Listening Eyes is an interactive web experience where visitors explore artworks on a node-based map — panning, zooming, and discovering connections between pieces.
The Map Engine
The core is a custom Three.js map engine I built from scratch. Artworks appear as stamps on a large canvas, grouped into thematic clusters. You navigate by panning and zooming, and the artworks reveal themselves as you explore.
The fun technical bits:
- StampNode — each artwork rendered as a textured plane with custom paper-like shaders
- InkConnection — organic, hand-drawn lines connecting related artworks using bezier curves
- PaperPlane — an animated paper airplane that flies between clusters as a navigation metaphor
- ClusterManager — automatic spatial layout that groups artworks and spreads clusters to the edges
WebGL Shaders
I wrote custom GLSL shaders for the paper texture effect — a cursor glow that scales with zoom level creates this warm, tangible feeling. The labels fade in based on zoom level rather than cluster selection, so the map feels like it has depth.
Content Pipeline
The artwork content system uses Astro’s content collections with a strict Zod schema. Each artwork has rich metadata — title, artists with roles and origins, year, medium, type (video/sound/image/interactive/text), group, and connection references. A build-time validator catches things like declaring type: 'video' but linking to a .jpg file.
The Deployment Sprint
The project went from first commit on January 22nd to v1 milestone on February 24th. The last week was intense — real exhibition content replacing placeholders, SST deployment to AWS, curatorial text dialogs, custom fonts, mobile touch support, and accessibility refinements for reduced-motion preferences.
It’s live at listening-eyes.projetbetula.com. Building for art instead of commerce was refreshing — the constraints are different, and the definition of “done” is more about feeling than metrics.