Why Mixing Different Ideas Can Lead to Outstanding Results: The Promeat Case

Our task was far from ordinary: to introduce a new meat brand, Promeat, primarily aimed at the HoReCa segment (hotels, restaurants, cafés). The goal was to immediately showcase how Promeat differs from competitors. The brand’s main advantage? A team of seasoned industry experts who had worked in HoReCa and knew it inside out. Our mission was to reflect that professionalism and peer-level authenticity — to demonstrate deep market knowledge and insight into what chefs and buyers actually need.

At the same time, the website needed to tell the brand’s story and communicate its values in a fresh and engaging way. We wanted to break away from the usual visual clichés of meat companies and attract the attention of both designers and potential clients. So we went looking for inspiration outside the conventional.

While reflecting on the brand name, our designer noticed that “Promeat” sounds a bit like the title of a glossy food magazine. That triggered a bold concept: what if we designed the website in the style of a printed magazine layout?

Instead of a typical homepage, we created something resembling a magazine cover — featuring a striking product photo, logo, editorial-style headlines, and annotations. This gave the site a stylish, professional tone — as if it belonged to a high-end publication for culinary professionals.

This direction was especially strengthened by our approach to early client collaboration. The client was initially hesitating between a basic and a more ambitious project scope. Rather than waiting for a decision, we pitched the idea early, even before approval. We showed how the brand could be presented through glossy magazine aesthetics: the hero section as a bold cover, the storytelling — confident and relaxed, supported by underlines, strokes, and side notes — just like highlights in a printed article. Visually simple, but instantly trustworthy.

The client loved it. Doubts vanished, and with them — the basic scope. They chose the ambitious route, and the project budget nearly doubled.

The takeaway? Don’t be afraid to pitch strong ideas early. They can not only convince the client to work with you — they can change the entire scale of the project.

To showcase the product interactively, we implemented a WebGL-based sequence using Three.js. It let users “see” the product in action — rotating and moving through scroll.

Challenges we faced:

The 3D meat model was overly complex, with high polygon count and heavy textures — leading to lag.

The frying pan, though not optimized, was visually essential and hard to sacrifice.

We had to synchronize object motion with a video reference, ensuring fluid movement during scroll.

On non-trackpad mice, scrolling was too abrupt and broke the vibe.

We also wanted dynamic depth of field (DOF) based on meat position, plus snappy micro-interactions across the site.

Our solutions:

Optimized 3D assets: reduced polygons, compressed textures; replaced the meat model with a lightweight version that still looked great.

Used a gltf-transform–based script for fast loading and smooth rendering, even on mobile.

Applied damping animation techniques to create smooth transitions in rotation and movement.

Developed a custom React hook to handle scroll-based object positioning and rotation. It takes a map of keyframes and interpolates states. This hook is now reusable across projects.

Tied the appearance of objects (meat, pan) to scroll position.

Configured DOF using linear interpolation to maintain performance.

Used Lenis library to make scroll buttery-smooth, even on devices without trackpads.

For horizontally scrolling content sections, we used animation-timeline: view (), so animations trigger only when the section is in view — with fallbacks for older browsers.

Brought the interface to life with micro-animations: hover effects, subtle entrances, and click feedback.

Insights:

Optimize 3D models early — it saves time and performance.

Custom hooks = faster, scalable animation workflows.

Smoothness matters — tools like damp, lerp, and Lenis elevate UX.

Post-processing adds realism, but balance it for performance.

Micro-animations = friendliness and polish.

The visual style was designed to express the brand’s values. We used a craft-inspired, natural color palette, generous white space, and minimal visual noise. It conveyed product authenticity, respect for quality, and an ethical approach to production.

At the same time, the magazine-inspired layout — structured grids, elegant font pairings, large headlines — helped communicate expert-level knowledge in a polished and confident way. That combination of warmth and sophistication aligned perfectly with Promeat’s identity.

This bold experiment didn’t just result in a good-looking website — it received high praise from the design community. The Promeat project was awarded Website of the Day on CSS Design Awards, and was also featured in Behance’s curated UI gallery — a significant recognition of both visual quality and technical execution.

For us, this confirmed that stepping off the beaten path was the right move. The site not only impressed the jury but also served the brand effectively — showing clients that Promeat understands their world and speaks their language.

The Promeat case clearly shows the power of mixing diverse ideas. We combined two seemingly unrelated domains — a meat brand and glossy magazine aesthetics — and the result was something unique, engaging, and effective.

It’s important to note that idea-mixing isn’t a gimmick — it’s a strategic tool. When each element reinforces the other, you get synergy. In our case, the magazine concept reinforced the brand’s professionalism, while the food visuals became more stylish and impactful. That’s what creates the wow factor.

As Steve Jobs once said: “Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn’t really do it — they just saw something.” In design, that means: don’t be afraid to experiment and merge the unexpected. If done thoughtfully, it can lead to remarkable results.