Sound Visualization
An exploration of sound that evolved from research into an interactive, real-time visualization.
Motion graphic · Qualitative research · Web Audio API
Video: Ljx8ddYkxO0bbZVftLmAaT3bRw.mp4 · https://framerusercontent.com/assets/Ljx8ddYkxO0bbZVftLmAaT3bRw.mp4
Type
Audio visualizer / research-driven
Role
Solo, design, AI-assisted development
Timeline
Five months
Platform
Web Audio API
Delayed gratification
Sinutu is a soundscape audio visualization project inspired by the contrast between day and night. The project wasn’t about solving anything; I wanted to understand my own relationship to day and night first. I drew on other people’s experiences, but explored the topic through my own design research and design thinking process. Years later, I came back to it, combined Claude Code with my research, and finally realized my original vision, turning it into an interactive, AI-assisted sensory experience.
Listening first
Interview
I needed a foundation to start with, and I thought the best way to get that was to talk to people. Most importantly, I decided that comparing other people’s experiences with my own would be a solid way into understanding the problem. What matters most is that sound sensitivity isn’t observable, it’s self-reported.
I asked every participant the sort of same conversational questions to have chat and understand them. Some of them were: How do you describe noise? What sound wakes you from your slumber? What sounds do you hear most during the day and at night? Are there any sounds you’re afraid of when you hear them?
Image: poster-1.jpg
Recording
From the interview answers, I compiled a sound list and went out to record. Across Izmir, I visited several locations, capturing both the planned sounds and anything else that felt worth catching along the way.
Image: poster-2.jpg
Concept development
Naming
The name comes from the Sumerians, who split day and night into 12 hours each. Sin, moon god. Utu, sun god. Sin-Utu: day and night in one word. I picked it because night noise didn’t bother people the way day noise did. That contrast became the entry point, and it set the structure: two parts, one for day, one for night.
Image: fLfdFctSSyUty3B1HwRx9x68jzs.png · https://framerusercontent.com/images/fLfdFctSSyUty3B1HwRx9x68jzs.png
Visual language search
After the name, once I had the concept of time, day and night, I began a search for a visual language. I first started researching how sound or noise had been represented through visual language, which turned into an exploration spanning graphic design to engineering. Then I started making some sketches, exploring how Sinutu’s visual language or form might gradually take shape.
Image: sketches.jpg
Image: bWabkugAKhz42xyYUU6fWd0uHi8.png · https://framerusercontent.com/images/bWabkugAKhz42xyYUU6fWd0uHi8.png
Design
A circle, each ring standing for a unit of time. Color does the day/night split: amber, orange, rust for day; steel blue, navy, dark grey for night. Day plays out on black, so the warm rings glow. Night sits on muted grey, which makes the cool metallic tones feel heavier. Sound level drives the rest, how many rings, how thick, how close to the center, so the circles move the way the sound itself moves.
Image: 1W6RyCYt6wFIF1jXRuQW0fevFk.png · https://framerusercontent.com/images/1W6RyCYt6wFIF1jXRuQW0fevFk.png
Video: QjrqcY1KqZL1hnVkiTRcwpHF54.mp4 · https://framerusercontent.com/assets/QjrqcY1KqZL1hnVkiTRcwpHF54.mp4
Day
Amber, orange, rust
Video: iwBXpqoHIppzSyzVFCBqflOJ0.mp4 · https://framerusercontent.com/assets/iwBXpqoHIppzSyzVFCBqflOJ0.mp4
Night
Steel blue, navy, dark grey
From prompt to pixel
Challenges
The biggest challenge was the abstract and conceptual nature of the project: it wasn’t easy to articulate what I wanted in technical terms, so I had to experiment with multiple prompting techniques. Plain text prompts weren’t enough on their own; the best results came from having Claude sketch out diagrams and wireframes, which bridged the gap where words fell short. I tried several Claude models and skills before landing on the right approach. In the final version, I also found that the WebGL renderer was driving CPU usage too high, so I had to optimize it.
Image: 9gzblIO7mUFzK67xmu3v3IcuA.png · https://framerusercontent.com/images/9gzblIO7mUFzK67xmu3v3IcuA.png
Image: n2D9BFR8Jw9QkZ4fkwVGxzO4I8.png · https://framerusercontent.com/images/n2D9BFR8Jw9QkZ4fkwVGxzO4I8.png
Image: 2eJI33zPI5BEt6i4Z4Z8x3sih0.gif · https://framerusercontent.com/images/2eJI33zPI5BEt6i4Z4Z8x3sih0.gif
Embed: replace this frame with a Framer Embed (HTML) and paste the code from prototypes/assets/sinutu/visualizer.html, the same code as your live page’s visualiser