Breaking Boundaries: How We Optimized Content and Created an Interactive Logo

Although some ideas were shelved for future updates, the technical implementation turned out to be both complex and rewarding. The project stood out for its unique approach, requiring the combined efforts of three frontend developers. Our main tech stack consisted of Next.js (React) and React-three-fiber (Three.js).

Key Pain Points:

1. Heavy media content that needed efficient optimization.
2. HTML and WebGL synchronization, especially during scrolling.
3. Smooth page transitions and hover effects.
4. Chatbot-style form, managing multiple states simultaneously.

Let’s explore the most interesting solutions we implemented.

Our site features an extensive collection of videos, yet they load quickly and play smoothly. To achieve this, we explored three core strategies:

1. File size reduction.
2. Conversion to modern formats.
3. CDN integration, ensuring delivery from the nearest server.

Our Solution

We relied on ffmpeg, a powerful tool for video processing. Here’s how we handled the conversions:

Generating HEVC:
ffmpeg -i input.mp4 -c: v libx265 -crf 30 -vf scale=1920:-2 -tag: v hvc1 -movflags faststart output-opt.hevc.mp4

Generating AV1:
ffmpeg -i input.mp4 -c: v libsvtav1 -crf 40 -movflags faststart -vf scale=1920:-2 output-opt.av1.mp4

Optimizing MP4:
ffmpeg -i input.mp4 -c: v libx264 -pix_fmt yuv420p -crf 20 -vf scale=1920:-2 -movflags +faststart output-opt.mp4

These steps significantly reduced file sizes while maintaining high-quality playback. As a result, videos now load seamlessly without lag.

 

Choosing a stone texture for our logo was just the beginning. We wanted an interactive touch — the logo breaking apart under cursor movement and reassembling afterward.

How We Made It Work

To bring this concept to life, we used Three.js with a GLB model format.
The breaking and reassembling animations were created in Blender, while THREE.AnimationMixer handled playback on the frontend.

Cursor interaction was calculated using vector-based JavaScript algorithms, ensuring smooth performance across devices, including touchscreens. To enhance realism, we applied normal maps and environment maps for more dynamic lighting.

Another challenge was the case study cards, which required a shader hover effect. The images had to transition smoothly while the card size changed based on scroll speed.

Implementation

We turned to WebGL once again. First, we stretched a canvas across the screen, hid the original HTML elements, and replaced them with PlaneGeometry. Next, we synchronized the 3D positions with the HTML elements during scrolling, ensuring smooth transitions without glitches.

This article covers only the highlights of the project — there were countless other challenges and creative solutions behind the scenes. But more importantly, it reflects our approach to work: turning complex problems into exciting opportunities.

The result? A website we’re truly proud of. It’s not just another project but a testament to skill-building, collaboration, and innovation. And, most importantly, both our team and the client love the final product.

Follow our X to stay updated with our latest projects and see what else our design studio is working on. We’d love to connect!