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 straight away: my first paid activity was constructing an internet site for a advertising company, solely composed of graphics and animations, primarily a full storytelling expertise.
It was an extremely troublesome activity for a newbie developer; I spent an entire month engaged on it within the evenings, however I accomplished it. This challenge opened the door to my profession: later, because of it, I used to be employed for my first full-time job. Since then, I’ve been always bettering in net applied sciences on the whole 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 other than 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 turned obsessed with Three.js. I discovered that means in exploring 3D on the net, the probabilities of WebGL (and now WebGPU), and the feelings, experiences, and worth it will possibly deliver. I actually really feel like an architect of my very own digital house: 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 can be inconceivable in a standard interface.
Initiatives I’m happy with
Since 2018, I’ve been working at Chipsa design studio as a frontend lead. We’ve made many superb tasks, and I’m glad to point out you a few of them I closely contributed to.
Timeless
Timeless turned an instance of how actually inventive 3D web sites are born, the place code turns into directing mild and house. It’s a full 3D scene with portals, water, reflections, star particles, and dynamic lighting. The primary theme is time and house that the consumer experiences by transferring via 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 scale back reminiscence consumption and pace up GPU add, shader preloading and precompilation are carried out, and the standard adapts to the consumer’s system efficiency.
One of many interface highlights is a button with wavy borders. It’s carried out 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 brand to see the transition to a different materials.
The primary 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 actually turned iconic throughout the group. We created not only a web site or an interactive expertise however a totally immersive 3D house the place the consumer actually walks via the historical past of courier work.
A story journey via 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 displays, and earns achievements. All the pieces is designed to encourage exploration and preserve engagement.
It’s a unified related setting. The house is designed as a steady, uninterrupted timeline.
We had an virtually 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. However, we managed to assemble a group, 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 at liberty to discover with me!
Philosophy
The most effective is the enemy of the great.
Typically, striving for perfection solely slows you down. You’ll be able to 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 resolution is all the time higher than an ideal one which by no means left your head.
Love what you do. Do what you’re keen on.
Once you genuinely benefit from the course of, you cease seeing it as an obligation. A pure want to dig deeper seems: to attempt new issues, be taught from errors. All with out interior resistance. And in the event you 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 true 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 yet one more stunning however pointless function. The true result’s when your contribution makes somebody’s work less complicated, their expertise higher, and the world barely extra environment friendly.
Be taught day-after-day, step-by-step. Be constant.
Don’t attempt to grasp the ungraspable. Simply do your factor and turn out to be 1% higher every day than you have been yesterday. A 12 months from now, you’ll be amazed by your progress.
Instruments & Workflow
Instruments I take advantage of virtually day-after-day to create inspiring stuff:
Present challenges and what’s subsequent
Since I’m obsessive about rendering efficiency, I’m exploring net staff and the way and what could be rendered in a separate thread. The best way to do it effectively. And the way future Structs ought to deliver JS even nearer to actual multithreading.
Proper now, I’m deeply into finding out WebGPU and the Three.js Shading Language specifically. It’s superb what compute shaders make doable. I’m satisfied that WebGPU is a breath of recent air for the immersive net.
Additionally, not too long ago 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. At this time it’s a full-fledged device that improves consumer expertise, expands acquainted interplay eventualities, and solves real-world issues throughout many fields.
The inventive net is an limitless house of potentialities. 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 will specific our concepts.
Be taught day-after-day, in small steps. Love the method, respect your time, and do not forget that the good factor about our career is the power to show creativeness right into a residing digital expertise.
Be curious. Be courageous. And maintain constructing an internet that evokes.
