My title is Pavel Mazhuga, I’m a inventive frontend developer from Krasnoyarsk, Russia. I’ve been working in frontend since 2017. It so occurred that I began as a inventive developer immediately: my first paid job was constructing an internet site for a advertising company, fully composed of graphics and animations, basically a full storytelling expertise.
It was an extremely tough job for a newbie developer; I spent a complete month engaged on it within the evenings, however I accomplished it. This challenge opened the door to my profession: later, due to it, I used to be employed for my first full-time job. Since then, I’ve been continually bettering in net applied sciences normally and superior net graphics specifically.
I’m a fan of inventive immersive tales. In a world the place AI generates typical options in seconds, inventive expression is what units people aside from machines. Inventive web sites don’t comply with templates: they experiment with aesthetics. They encourage and provoke feelings. They interact. And that’s my factor.
So it’s no shock that I grew to become captivated with Three.js. I discovered which means in exploring 3D on the internet, the chances of WebGL (and now WebGPU), and the feelings, experiences, and worth it may possibly deliver. I actually really feel like an architect of my very own digital area: I create worlds with their very own environment and legal guidelines, play with mild the way in which artists do, and construct advanced interactive mechanics which might be unattainable in a conventional interface.
Tasks I’m pleased with
Since 2018, I’ve been working at Chipsa design studio as a frontend lead. We’ve made many wonderful tasks, and I’m blissful to point out you a few of them I closely contributed to.
Timeless
Timeless grew to become an instance of how really inventive 3D web sites are born, the place code turns into directing mild and area. It’s a full 3D scene with portals, water, reflections, star particles, and dynamic lighting. The principle theme is time and area that the consumer experiences by transferring by way of the sunshine.
The preloader animation is rendered on a canvas inside an internet employee (whats up, Offscreen Canvas API), which permits hiding the price of parsing and loading knowledge onto the GPU.
Each element of the challenge is manually optimized: geometry is compressed utilizing the DRACO algorithm, KTX2 textures cut back reminiscence consumption and velocity up GPU add, shader preloading and precompilation are applied, and the standard adapts to the consumer’s system efficiency.
One of many interface highlights is a button with wavy borders. It’s applied in Canvas 2D utilizing simplex noise and Bézier curves.
Tech stack: React (Subsequent.js), Three.js (R3F), Framer Movement.
Chipsa
The third model of our studio’s web site. The 3D emblem is designed as a stone shattered into items that scatter when the cursor approaches. Click on the emblem to see the transition to a different materials.
The principle web page is a mixture of HTML and WebGL with loads of parallax results and scroll-linked animations.
Tech stack: React (Subsequent.js), Three.js (R3F), Framer Movement.
Samokat: Courier Museum
A digital courier museum. This challenge really grew to become iconic throughout the workforce. We created not only a web site or an interactive expertise however a totally immersive 3D area the place the consumer actually walks by way of the historical past of courier work.
A story journey by way of eras. Every zone is a separate historic interval with distinctive artifacts, setting, and visible environment.
It’s an interactive mini-game. The consumer searches for objects, research reveals, and earns achievements. All the things is designed to encourage exploration and keep engagement.
It’s a unified linked setting. The area is designed as a steady, uninterrupted timeline.
We had an nearly unreal problem: to launch in 2.5 months. With that quantity of 3D content material, mechanics, optimizations, and customized logic, it was a really powerful deadline. Nonetheless, we managed to assemble a workforce, arrange processes, and ship the challenge on time. We succeeded.
To boost the sense of presence, we added the power to go searching by transferring the system. This created the sensation that the consumer is definitely contained in the exhibition.
Tech stack: React (Subsequent.js), Three.js (R3F), Framer Movement.
Lab
In my spare time, I create numerous Three.js experiments (primarily utilizing TSL) to specific myself and be taught new issues. I share the supply code, so be happy to discover with me!
Philosophy
The most effective is the enemy of the nice.
Typically, striving for perfection solely slows you down. You may endlessly polish particulars, rewrite code, or redo the design, however actual worth seems solely when the work is delivered to a “ok” state and launched into the world. A accomplished good answer is at all times higher than an ideal one which by no means left your head.
Love what you do. Do what you’re keen on.
Whenever you genuinely benefit from the course of, you cease seeing it as an obligation. A pure need to dig deeper seems: to strive new issues, be taught from errors. All with out inside resistance. And if you happen to handle to show your passions into one thing that helps others, you get that particular concord between work and private motivation.
Be helpful. Be an issue solver.
In the end, any work is judged not by fancy phrases however by the actual worth it brings. Being helpful means seeing the necessity, understanding the context, and providing options that genuinely make folks’s lives simpler, not simply including one more stunning however pointless characteristic. The actual result’s when your contribution makes somebody’s work easier, their expertise higher, and the world barely extra environment friendly.
Study day by day, step-by-step. Be constant.
Don’t attempt to grasp the ungraspable. Simply do your factor and change into 1% higher every day than you have been yesterday. A yr from now, you’ll be amazed by your progress.
Instruments & Workflow
Instruments I take advantage of nearly day by day to create inspiring stuff:
Present challenges and what’s subsequent
Since I’m obsessive about rendering efficiency, I’m exploring net employees and the way and what will be rendered in a separate thread. How one can do it effectively. And the way future Structs ought to deliver JS even nearer to actual multithreading.
Proper now, I’m deeply into learning WebGPU and the Three.js Shading Language specifically. It’s wonderful what compute shaders make attainable. I’m satisfied that WebGPU is a breath of contemporary air for the immersive net.
Additionally, lately I’ve been paying extra consideration to AR applied sciences. I’m particularly impressed by how acquainted instruments and approaches can be utilized to create genuinely helpful and in-demand performance. Augmented actuality stopped being only a flashy visible trick way back. Right this moment it’s a full-fledged software that improves consumer expertise, expands acquainted interplay eventualities, and solves real-world issues throughout many fields.
The inventive net is an infinite area of prospects. Applied sciences change, frameworks come and go, however one factor stays the identical: the worth of what we create is measured by the feelings, expertise, and usefulness the consumer receives. And the deeper we perceive our instruments, the extra freely we are able to specific our concepts.
Study day by day, in small steps. Love the method, respect your time, and do not forget that the best factor about our career is the power to show creativeness right into a dwelling digital expertise.
Be curious. Be courageous. And preserve constructing an internet that evokes.
Thanks. You could find extra of my work on my portfolio and X.
