The design of therapywarsaw.com began with a challenge: to create a digital threshold for a psychotherapy practice that could visually evoke the work’s core principles, rather than merely describe them. The result is an interface driven by a single, live generative system.
This system is a deterministic flow-field, where the animation’s unfolding is guided by a set of invisible rules. Its purpose is to create a specific quality of attention. A visitor encounters a constant, quiet hum of evolving lines and curves whose paths are an emergent property of a hidden order. This serves as a quiet nod to the therapeutic process itself, which involves attending to the underlying dynamics that shape our experience.
This principle extends to the site’s architecture. Conventional, low-friction contact methods are omitted in favor of a more deliberate path through the site. The act of initiating contact is designed to be a considered, intentional step—the first moment of the unfolding therapeutic process, rather than a precedent to it.
The project was conceived and created by myself, Mikołaj Czyż, a psychotherapist practicing in Warsaw. This integration of roles ensured the therapist’s perspective informed each design decision, making the final piece a true extension of the therapeutic frame.
The project is a bespoke, Vanilla JavaScript application, intentionally built without major front-end frameworks to maintain full control over performance and the user experience.
Architecture & Performance
The core of the visualization runs entirely within a dedicated Web Worker to ensure the main thread remains unblocked and responsive for smooth page navigation and interaction. The generative art is rendered to an OffscreenCanvas, which is then displayed on the main page. This multi-threaded architecture is crucial for maintaining the calm, uninterrupted state the project aims to create. To manage memory efficiently, especially with large data buffers for the line system, a custom TypedArrayPool was implemented.
Rendering & Generative System
The graphics are rendered using the raw WebGL2 API, without the use of higher-level libraries. This allows for fine-grained control over the final output. The flow-field itself is calculated on the GPU using custom GLSL shaders. A deterministic vector field, generated from a custom SimplexNoise implementation, guides the simulation. The visual states for each page are defined by a sophisticated preset system, and a SimpleTransitionManager handles the smooth, animated interpolation between these states, including the “burn map” wipe effect that uses fractal Brownian motion (fbm) for its organic texture. For deterministic testing and specific visual outcomes, the entire animation can be controlled via a seeded random number generator (SeededRandom).
Front-End & Navigation
The site operates as a Single-Page Application (SPA), managed by a custom SpaNavigationController. This controller handles link interception, a PageCache for instant navigation, and intelligent preloading of linked pages based on user interaction (hover, focus) and viewport visibility, while respecting slow connections. The configuration for the entire application, including the dozens of parameters for the generative art, is validated using a Zod schema for robustness.
Core Technologies: Vanilla JavaScript (ESM), WebGL2, GLSL
Key APIs & Techniques: Web Workers, OffscreenCanvas, Custom SPA logic
Generative Art: Flow Fields (Vector Fields), Simplex Noise, Fractal Brownian Motion (fbm), Seeded PRNG
Tooling: Zod (for schema validation)
