Starry Symphony Fountain

• 

  Starry Symphony Function

Inspiration:

We were inspired by the idea of combining music, motion, and light to create an interactive water fountain experience that feels like a living, breathing performer. The goal was to simulate the beauty of real-world musical fountains like the Bellagio in Las Vegas, but in a web-based form that’s accessible and emotionally engaging — especially for young learners and creative users.

What it does:

Starry Symphony Fountain is an interactive web app that: Lets users upload and select music from a dropdown. Visualizes audio through dynamic water spouts that respond to rhythm, pitch, and volume. Features a starry night theme to give the fountain a magical and tranquil atmosphere. Simulates real-world fountain dynamics such as jets reacting to bass, mid, and treble frequencies.

How we built it:

StackBlitz was used for the frontend, allowing fast prototyping in-browser. React and Web Audio API were used to analyze the audio in real-time. SVG and CSS animations render dynamic water jets. Supabase was integrated to support uploading songs and persisting data (currently being finalized). The visual theme uses a night sky aesthetic, with gradients and particle-style stars.

Challenges we ran into:

Making the water spouts sync meaningfully with music (e.g., mapping frequency bands). Handling audio upload persistence in StackBlitz, since local files disappear on refresh. Ensuring that the fountain feels grounded in reality — including pool reflections, jet behavior, and visual balance. Working around limitations of StackBlitz’s in-memory filesystem and Git integration. Accomplishments that we’re proud of: Achieved a responsive audio visualization that reacts to music with water-like behavior. Built a fully interactive and themed experience with custom styling and environmental effects. Enabled user uploads and selection of songs from a dropdown menu. Created an emotionally resonant aesthetic combining sound, motion, and visual harmony.

What we learned:

How to process real-time audio data using the Web Audio API. How to simulate physical phenomena like water behavior using pure frontend technologies. Importance of UI realism — especially in pool surface reflections, grounding, and lighting. How to manage files and state across app reloads in StackBlitz and Supabase.

What’s next for Starry Symphony Fountain:

Finalize Supabase integration to ensure uploaded songs persist across sessions. Improve jet animations by mapping different frequency bands to specific spouts. Add lighting effects synced to audio to enhance realism. Create a “choreography mode” where users can manually design shows for selected songs. Possibly export performances as recorded animations or shareable links.

Built With

• css
• gsap
• react
• supabase
• svg
• tailwind
• vite
• webaudioapi