Crafting Liquid Digital Canvas

The Engineering Behind My Code-Driven Visual Art Piece

When we think of high-end web experiences—the ones that sweep awards on Awwwards and FWA—we naturally assume they require bulky libraries or heavy frameworks. If you were to commission a premium creative agency to build an interactive experience like this, the invoice would easily start at $5,000—and that is zero exaggeration. Agencies charge top dollar for this because it requires a rare breed of creative front-end engineering that bypasses standard templates.

With this project, I set out to prove what is possible when you master the underlying math of the browser yourself. My goal was to create a breathtaking, movie-like interactive banner using raw WebGL and vanilla JavaScript, bypassing popular libraries like Three.js entirely.

To achieve this level of fluid distortion and the dramatic "shattering" mesh effect, I wrote custom GLSL (Graphics Library Shading Language) micro-programs. GLSL is a high-level shading language based on C, and it is where the real magic happens. Instead of relying on the CPU (which causes traditional websites to lag and stutter), GLSL compiles and executes directly on the user's GPU (graphics card). This ensures the complex mathematics run at a blazing-fast, locked 60 frames per second on both desktop and mobile devices.

Instead of treating my background photo as a static asset, my code tessellates the image into a dynamic grid of hundreds of invisible polygons. The Vertex Shader constantly calculates the distance between your cursor and the image coordinates. When you sweep your mouse, it stretches the fabric of the image like liquid crystal, creating an organic drag wave. The moment you attempt to scroll or swipe, a chaotic wave function I calculated takes over, tearing the grid into tiny fragments along a sine-and-cos vector before elegantly pulling them back into a perfect portrait.

Simultaneously, my GLSL Fragment Shader controls the color theory at a per-pixel level, instantly muting the image tones into a moody, silver-screen palette, while a custom 3D chromatic aberration effect splits my typography into cyan and magenta channels upon hovering.

This project is a reflection of my philosophy as a developer: delivering high-end, bespoke digital artifacts through clean engineering and pure creative code.

Stephaniia Bubnova — Creative WebGL Portfolio (https://stephaniia-bubnova.web.app/)


My Neural Network:
https://stephqnn-6f23f.web.app/

Official Resources:
https://t.me/stefanias_world
https://stephaniia-bubnova.web.app/
yandex.ru/rythm/profile/@019d3b535e807367b553f01d479beaef
https://t.me/+xGPeaaQyGIJjZGUy


#WebGL #GLSL #CreativeFrontend #CreativeCode #TechArt #InteractiveDesign #Awwwards #UIUX #JavascriptDeveloper #Portfolio #FrontEndEngineering #GenerativeArt #Web3D #BespokeWeb