Breath is invisible
It has no form, no fixed rhythm, no single state. And yet it shapes everything: the nervous system, emotional regulation, presence, and healing.
The challenge behind Frequency Breathwork was not to âdesign a website for a wellness practiceâ, but to translate an intangible physiological and emotional process into a digital, interactive experience â without reducing it to clichĂ©s.
This article explores how concept, motion, sound, and code were woven together to create a site that breathes rather than simply presents information.
An unexpected shift
Frequency Breathwork didnât start as an attempt to create an âinterestingâ website. The original intention was restrained clarity over expression, function over form. A familiar, safe structure felt appropriate.
However, breathwork doesnât translate well into simplified structures. Its rhythm, intensity, and deeply embodied nature cannot be reduced to static sections or conventional layouts. The practice unfolds over time, through sensation and repetition, and that required a fundamentally different way of thinking about structure.
Instead of designing fixed screens, we had to design something responsive. Something that could shift, expand, and contract. A system that could carry rhythm rather than merely describe it. At that point, the project stopped being about building a website. It became about shaping an experience that unfolds through interaction, pacing, and presence.
From idea to system
Once the direction shifted, the question was no longer about visual style. It became a structural problem. If rhythm was the foundation, then the interface couldnât be linear. Traditional vertical sections, clear beginnings and endings, or rigid grids felt disconnected from the nature of the practice itself.
Breath doesnât move forward. It loops, returns, pauses, and repeats. That realization pushed the project away from linear layouts and toward circular thinking. Early sketches began to revolve around cycles rather than flows, continuity rather than hierarchy. The idea of âthreadsâ emerged not as a visual motif, but as a way to represent frequency as something continuous and alive.
These threads were imagined as carriers of rhythm. Not illustrations of breath, but responsive structures that could react to time, motion, and eventually sound. The interface was no longer something to scroll through, but something to move within. At this stage, the system was still abstract. But the rules were forming.
Strings and natural resonance
The idea of strings wasnât purely digital. In nature, many systems behave like strings. They carry tension, transmit vibration, and respond to external forces. From musical instruments and vocal cords to nervous systems and subtle bodily responses, strings are a familiar physical metaphor for resonance.
Breathwork operates within the same logic. Breath creates internal pressure and release. It shifts tension in the body, activates the nervous system, and sets emotional states into motion. These changes are never static. They vibrate, echo, and propagate.
The strings became a way to connect the interface to this natural behavior. Arranged in circular systems, they form environments rather than objects. There is no clear beginning or end, only continuous motion and subtle variation. Each interaction unfolds slightly differently, which mirrors the nature of breath itself. No two breaths are ever the same.
Later, we plan to add recorded guidance from Vivian directly into this system, allowing sound and voice to deepen the sense of immersion and bring the interface closer to the lived experience of the practice.
Visual design
The visual language was intentionally restrained. Typography became the primary tool for structure and emphasis. Large type creates moments of presence, while smaller text recedes, allowing the layout to breathe. Scale and contrast are used to control attention and pacing rather than decoration.
Natural imagery appears sparingly. These images are not illustrative or explanatory. They function as pauses. Moments of stillness that interrupt the continuous flow of content and give the viewer space to slow down before moving forward.
White space plays an active role throughout the site. Empty areas are not gaps to be filled, but intentional breathing room. They separate ideas, soften transitions, and create a sense of rhythm between intensity and rest.
Interaction
Interactivity is used only at key moments, where it adds meaning and reinforces the importance of the content.
For example, the section focused on nervous system regulation could easily exist as a static block. It would work functionally, but it would also disappear among other sections. A simple image or abstract video could have been added, but that approach wouldnât express the essence of the topic.
Instead, interaction becomes a continuation of the idea itself. Whenever movement is introduced, it is designed to extend the meaning of the section rather than decorate it. Motion appears only when it helps translate an internal process into a felt experience. In these moments, interaction amplifies sensation and focus, making the content harder to ignore and easier to remember.
Interactivity here is not about adding complexity. It is about adding weight.
Development & implementation
All of the websites I design ultimately reach a new level when built in Webflow. With the introduction of native GSAP integrations and more flexible SEO capabilities, the platform has evolved into a space where complex interactive experiences can be built without sacrificing structure or performance.
In this project, the layouts themselves were relatively straightforward to implement. The main challenges were concentrated in two specific areas:
- The first involved the dynamic WebGL strings. Beyond reacting to scroll and cursor movement, they also needed to respond to sound and adapt their behavior in real time. This required careful coordination between visual rendering, interaction logic, and audio input, as well as fine-tuning the response to avoid repetitive or mechanical motion.
- The second challenge was bringing the same system to mobile without compromising performance. WebGL combined with real-time audio processing can quickly become a bottleneck on smaller devices. To address this, the interactive scene is treated as a lifecycle component, initialized only when needed and fully disposed of when it shouldnât run.
Everything else was comparatively simple. We used a few third-party integrations for newsletter subscriptions, and the scheduling section relies on an external component that is embedded directly into the page.
Under the hood
The core of the experience is driven by a lightweight WebGL setup built with Three.js. The strings are rendered as dynamic line geometries whose positions are recalculated every frame, allowing them to respond fluidly to time, movement, and sound.
Audio input is handled through the Web Audio API. Instead of mapping sound directly to visual parameters, low-frequency energy is extracted and smoothed, then translated into subtle changes in intensity and tension. This prevents the system from feeling reactive in a literal or mechanical way, preserving a sense of breath rather than rhythm alone.
To keep motion organic, all transformations pass through smoothing layers. Position changes are interpolated over time, allowing the strings to lag slightly behind their target state. This delay introduces softness and prevents abrupt visual jumps, especially when reacting to audio peaks.
Conclusion
This project became a reminder that not every website needs to compete for attention. Sometimes the stronger choice is restraint. Choosing where not to add interaction, where to leave space, and where to let the system remain quiet. Frequency Breathwork wasnât built to impress visually. It was built to support a practice. Every decision from typography and spacing to sound and motion was guided by the question of whether it adds meaning or simply adds noise.
What started as a simple website gradually turned into a responsive environment. Not through ambition, but through listening to the nature of the subject itself.
Breath doesnât rush.
It doesnât repeat exactly.
It responds.
