Building 40Hz Cognitive Focus Apps in Coni WASM

WebAssembly in the browser has always promised incredible performance, but bridging it smoothly with Web APIs like WebAudio and WebGL can sometimes feel like solving a puzzle. Today, we’re thrilled to showcase how the Coni ecosystem elegantly solves this by introducing two brand-new web apps designed for cognitive focus.

These two applications generate a 40Hz gamma frequency—a specific brain wave frequency associated with deep focus, memory recall, and cognitive enhancement—using binaural beats. But the real magic lies under the hood: they are both written entirely in Coni WASM.

The Science of 40Hz Gamma Waves

Before diving into the tech, why 40Hz? Gamma waves are the fastest of the brain wave frequencies. Research indicates that when the brain operates in the 40Hz range, it correlates with heightened perception, problem-solving, and peak concentration.

By playing a 60Hz sine wave in the left ear and a 100Hz sine wave in the right, the brain perceives a differential “beat” of exactly 40Hz. This process, known as brainwave entrainment, gently nudges your cognitive state into the gamma frequency.

To demonstrate the flexibility of the Coni architecture in delivering this experience, we built two distinct versions of the app:

1. The Canvas Edition: brain-waves-40hz

Our first application relies on traditional 2D Canvas and DOM APIs. We leveraged our custom reframe_wasm library to handle UI state and rendering through Hiccup-style DOM generation directly from WebAssembly.

The audio engine meticulously manages the oscillators entirely at near-native speeds. We even built an automated generative chime system that modulates envelopes on the fly—completely avoiding JS overhead:

;; Expressive WebAudio envelopes without JS bindings!
(doto (.-gain gain)
  (.linearRampToValueAtTime 0.15 (+ now 2.0))
  (.exponentialRampToValueAtTime 0.001 (+ now 8.0)))

It is a perfect example of building a reactive, performant audio engine in pure Coni.

2. The WebGL Powerhouse: deep-focus-webgl

While the Canvas version is great, we wanted to see how far we could push Coni’s native processing capabilities. Enter deep-focus-webgl (internally known as Amplifocus).

Instead of relying on the 2D Canvas, this version renders an 80,000 Particle Brain Matrix using pure WebGL. What makes this genuinely exciting?

• 100% Pure Coni: The GPU-accelerated vertex transformations and massive particle array logic are natively processed within Coni WASM.
• Zero JS Overhead for Math: By using Coni’s math libraries (libs/math), we compute complex trigonometric transformations for tens of thousands of vertices without ever crossing the expensive JS-WASM bridge.

Here’s how effortlessly we sculpt the 3D geometry in native float buffers and ship it to the GPU:

;; Crunch 80k vertices in WASM memory, ship to GPU in one go!
(f32-set! *base-points* idx final-x)
(f32-set! *base-points* (+ idx 1) final-sy)
(f32-set! *base-points* (+ idx 2) (* z 1.1))

;; Upload static geometry ONCE
(gl/upload-static-data @*gl-state* (js/float32-buffer *base-points*))

We allocate the float array once, crunch the geometry natively, and blast it to the GPU in a single buffered shot.

The Coni WASM Advantage

Building these applications highlighted exactly why we designed Coni the way we did. Whether you’re manipulating the DOM with reframe, synthesizing audio envelopes, or orchestrating 80,000 WebGL vertices, Coni allows you to write clean, Lisp-like code that compiles down to blistering-fast WebAssembly.

No boilerplate. No clunky bindings. Just pure performance.

Both applications are now live in our experimental WASM playground. Grab your headphones, focus up, and experience the power of Coni WASM!