Interactive Soundscape Website

Замовник: AI | Опубліковано: 06.04.2026

I'm seeking a talented web developer to create a creative and interactive sound-led website. I’m working on an interactive web experience called “The Listening Meadow”. The idea is to create a calm, exploratory digital environment for children, where the user interacts with a landscape and both visuals and sound respond to their actions. Instead of a traditional game or UI, this is meant to feel like: → a living landscape (responsive sand-box style) → where movement creates sound → and sound transforms the environment Exploring the environment reveals shifts in tone, pitch, and rhythm and these changes are visualised through the landscape itself. To build a smooth, immersive web experience where: • The environment reacts to cursor movement and interaction • Different elements respond in unique ways (visually + sonically) • The world evolves from simple to responsive to expressive • Transitions between scenes feel fluid and continuous Key Features 1. Parallax-Based Landscape • Multiple layered environments (background, midground, foreground) • Subtle depth created through cursor-based movement • Smooth transitions between scenes 2. Interactive Elements Each scene introduces different interaction behaviours: • Trees • Hover: slight glow • Click/hold: branches move or droop • Sound: pitch changes based on interaction • Water / Pond • Click/drag: ripple effects • Sound: low-frequency tones • Stones (Rhythm Zone) • Repeated clicks create rhythmic bouncing • Sound: percussive / rhythmic • Fireflies / Particles • Ambient floating movement • React to cursor proximity 3. Sound Integration (Important Layer) • Sound should be generated dynamically (not just background audio) • Different interactions map to: • pitch • rhythm • intensity • The environment acts as a visual + sonic feedback system 4. Scene Progression The experience is structured as a sequence of evolving scenes: 1. Entry / Threshold — minimal, atmospheric 2. Single Element Interaction — tree 3. Expanded Environment — water + multiple zones 4. Rhythm Interaction — stones 5. Atmospheric Control — wind, particles 6. Memory Layer — interaction traces remain 7. Expression Layer — user can create/draw within the space 5. Smooth Transitions • Scenes should not feel like separate pages • Transitions should feel like: • zooming • shifting perspective • environment evolving Technical Expectations Open to suggestions, but ideally: • Built using JavaScript (p5.js / Three.js / WebGL / GSAP etc.) • Smooth performance (especially for animations + interactions) • Responsive across screen sizes (desktop priority) What I Need Help With • Structuring the web experience (scene transitions, architecture) • Implementing smooth parallax and layered environments • Mapping interactions to visual + sound responses • Optimising performance and flow Current Progress • Concept and scene breakdown completed • Visual exploration and style direction initiated • Initial parallax and interaction prototyping in p5.js • Early Figma prototypes for layout and transitions