Balancing Scale and Humanity: Behind the scenes of the Website of Optikka

Transfer the scale of a system without overwhelming the user. Emphasize advanced technology while it feels warm and human.

These were the challenges that our team was confronted with at Zajno when designing the website for Optician – A creative orchestration platform that transforms traditional design workflows into intelligent, scalable systems.

While we were looking for the right visual metaphors based on the target group, values and product -essence of the customer, the development process itself created new puzzles – and opened unexpected creative possibilities. Here is how we have tackled them.

Finding the right visual metaphors

We started with the core idea of AGTIKKA: It is a tool that helps teams to generate marketing material and adjust them in formats with AI. Simple inputs become complex structures, all at lightning speed.

The target group of the platform includes marketers, creative directors, producers, franchise owners – anyone who wants to produce marketing assets quickly and efficiently. We have focused on what unites them: solving complex challenges, working with systems and embracing innovation. These insights have helped us to shape a visual language that speaks directly against them.

To record the layered complexity of the platform, we used the metaphor of Stacked layers merge in a coherent system.

We have also introduced another visual device: A bird’s eye view of creation. This perspective helps to communicate the scale and power of AGTIKKA and at the same time strengthen a sense of structure and clarity.

In the hero section, a rotating circle shows uploaded files – a small element that, while the user scrolls, extends to a huge ecosystem of marketing assets. The animation shifts to a bird’s eye view to show the size of this system, whereby each tile symbolizes an individual file. While the role continues, the user dives into the system, as if he is entering a tunnel – a gesture that underlines accessibility. The following section shows a visual collection of assets in different sizes – a summary of the trip from a Upload file to output.

A warm approach to technology

An important challenge with which we were confronted was that technology, especially when they are shown on a scale, often appear cold and impersonal. When Visuals emphasize the grandeur of a system, the human presence can feel reduced.

But Optikka exists to serve people – to simplify workflows and save time and effort. So we visually had to communicate that the system works for the user, not the other way around.

Our solution: Use a warm color palette, a warm, focused on humans. Sand tones as a base, coral accents for contrast – this allows the “cold” of digital aesthetics and creates a sense of approachability. The result? A system that feels structured, but still feels hospitable.

Develop the tunnel animation

During the development of the Attrika website, the Zajno team encountered an interesting technical challenge: creating a smooth tunnel animation synchronized with the page buns. Initially the solution was based on the use of video, but during the optimization process a decision was made to switch to Frame -sequencing. In this article we want to take a closer look at the reasons for this decision and present both approaches.

First approach: HTML5 -Dideo

In the first instance, in order to make the Scroll animation, we used a standard approach with HTML5 video and to follow the Scroll progress using the GSAP Scroll trigger:

We liked this method for its simplicity and compression efficiency. But soon we touch a wall:

• NervousEspecially on mobile;
• Inconsistent behavior About browsers;
• Auto-play limitations In many browsers;
• Loss of quality due to video compression – A big problem in presenting the design.

So we turned: instead of bed in bed, we used a frame series – individual images that were quickly played in succession to simulate movement (just like traditional animation or film).

Frame -order: the better way

We used Ffmpeg To convert our video into individual frames, which they perform in the webp format. To set up display on mobile and desktop, we must make two sets of sequences:

We also needed Dynamic mushroomwhere the path to the shape image is based on the current device type:

• Desktop: /desktop/frame_001.webp
• Tablet: /tablet/frame_001.webp
• Mobile: /Mobile/Frame_001.Webp

However, this raised new questions: how do you load more than 1000 images without alleviating the experience? Our solution: Smart staged drawers.

We have developed a charging strategy for multiple phases:

1. Immediately start: the first 10 frames load immediately
2. First frame -display: gives the impression of direct animation
3. Background Loads: Remaining frames Charge quietly parallel

We have one Parallelque To make simultaneous drawers possible and re -loading from pre -loaded frames by defending a smart for the loading range.

All representation was done in an HTML “canvas” Element, which made ultra-gladde animation possible and even enabled us to make a seamless animation on the homepage that pulsating file ring on the hero part.

And here is the smart part: load-based in advance. If the user brows down, the system is 5 frames ahead. Scroll up – it loads 5 frames behind. Simple, but powerful.

Outcome: why it was worthwhile

Switching from video to frame sequences came with clear benefits:

• ✅ Rock-Solid performance on all devices;
• ✅ Perfect image quality, no compression artifacts;
• ✅ Full control over animation behavior;
• ✅ No browser restrictions;
• ✅ Optimized output for every screen size.

Of course there were considerations:

• ❌ More than 1000 server requests instead of one;
• ❌ More complex development process;
• ❌ Separate sequences required for each device type.

Last thoughts

Working on the Optikka website was a journey of both creative clarity and technical complexity of defining the core concept of the project to reconsider how Scroll should work on Scroll-based animation.

Ultimately, choosing a more technically demanding path has paid off. When the goal is to provide an exceptional user experience, the extra effort is always worthwhile.

Technologies

Frontend Frameworks and Libraries: Astro, Typescript, Lottie, Lenis, SVG animation.


Backend -Technologies: Ffmpeg, parallelqueue.


Tools: Ffmpeg, parallelqueue.

Company information

Zajno is a digital design studio that is completely about breaking the mold! We do not do boring websites or regular apps – we specialize in making the wildest, most unconventional digital experiences there are.