Listening Eyes — Digital Art Gallery

An interactive digital art exhibition website featuring a node-based explorable map. Artworks — videos, sounds, images, and interactive pieces — are laid out spatially and connected through ink-drawn lines. Visitors navigate by panning, zooming, and following paper-plane animations between clusters.

Interactive Map Engine

The core experience is a custom Three.js map engine built from scratch:

• ProjectLayer — Renders artwork nodes as interactive stamps on a 2D canvas projected in 3D space
• InkConnection — Draws organic, hand-drawn-style connections between related artworks using bezier curves
• ClusterManager — Groups artworks into thematic clusters with automatic spatial layout
• CameraAnimator — Smooth camera transitions with easing when navigating between artworks
• PaperPlane — Animated paper plane that flies between nodes as a navigation metaphor
• LabelLayer — Floating text labels for artwork titles and artist names

Media Support

The gallery supports multiple artwork types with dedicated renderers:

• Video — MP4/WebM playback with custom controls
• Sound — Audio with waveform visualization
• Image — High-res images with zoom
• Interactive — Embedded iframe experiences
• Text — Formatted written works

Content System

Artworks are defined as Markdown files with rich frontmatter (title, artist, authors with roles/origins, year, medium, type, group, position, connections). A build-time schema validates that media file extensions match their declared type.

Infrastructure

Deployed on AWS via SST with Astro’s SSR adapter for server-side rendering where needed.