How a timeless website full of animations was created for Webvalley

19 Dec

Corporate websites often look similar. A few sections, a few references, a contact… and that’s it.

But the Web for Webvalley had a different goal: to make browsing a memorable experience. Fullscreen sections, animations at almost every turn, a live mascot and even a mini-game in the menu.

In this case study, I’ll show how we approached the web, where we stumbled and what’s behind the “cool web”.

Project context

Client: Webvalley
Main objectives:
- create a corporate website as a memorable experience
- differentiate the brand with animations, interactions and “wow” effects
- to support the impression of a technological company (modern design, modern stack)
My role: coding, implementation of animations and interactions, design and implementation of technical solutions
Technology: Nuxt (Vue), GSAP, Canvas, Tailwind

First contact

One day my phone rang. Dalibor Mráz from Webvalley answered and invited me to a personal meeting. He was looking for a developer to implement a new corporate website.

The meeting went well. Dalibor was in the office and also Lukáš Vlček (the owner of the agency), whom I know from previous cooperation. They connected a laptop to a big screen and opened Figma’s designs.

And within minutes it was clear: this was not going to be a classic website.

Everything has been thought out in detail. Each section had its timing, its movement, its interactions. They even showed me a menu that contained a mini-game.

If you click on it, the mascot changes… and if you click three times, the site falls apart to make it cool.

At that moment, I said in my head: Are you serious? In the end, the site doesn’t fall apart – but it was this type of playful detail that showed me how high it was aiming.

The goal was clear: to stand out and make an unforgettable impression.

Setting expectations

Honestly – at one point I was a little scared. Not because I don’t like animation. On the contrary, I enjoy animation and have tackled projects on a few sites where it plays a significant role.

But here the bar was even higher.

That’s why I set expectations right from the start:

Animations are time consuming.
The “wow effect” is often not an investment that pays off.
This makes such a website more demanding on the budget than a regular company presentation.

So I asked them directly if they were really sure they wanted to implement exactly what they had in mind.

The answer was unequivocal: yes. They are aiming high and they want it to be visible on the web.

We agreed that I would study the proposals thoroughly and prepare a price estimate for the next meeting.

Estimation of workload and project approval

I had time to go through the whole design, break it down into parts and get an accurate idea of the work involved.

At the next meeting, I provided the client with a specific estimate of hundreds of hours of work.

The client let it go to his head – and after a few days, the phone call came:

We got the green light. Let’s get to it.

It was a combination of joy and respect. I knew I was in for a big project that would really push me.

Choice of technologies

At the second meeting we also discussed technology.

I suggested WordPress because it’s often the best solution in terms of content management. But here, WordPress wasn’t the way the client wanted to go.

We considered Next (React), but I don’t have that much experience in it, so I suggested Nuxt (Vue):

I know Nuxt well and have years of experience with it.
It’s a solid foundation for the component web.
Within the Vue world, it is a similar type of framework to Next in React – it can offer comparable capabilities (SSR/SSG), just in a different technology branch.
Most importantly: it builds complex animations and interactions well on top of it.

For animations I chose GSAP. I had experience with it and I knew that:

can handle complex sequences,
is stable and usable in practice,
and thanks to the extensions, it will cover much of what we needed on the site.

As I proceeded

I started by “building the site on a solid foundation”:

design system (typography, colours, spacing),
repeatable components,
Sections,
Pages.

I coded directly in Nuxt so that nothing had to be converted.

I decided to go the one-page route:

to see it through to the end,
let the client comment,
fine-tune interactions and animations,
and then apply the same style to the rest of the site.

The first page was logically the homepage. At the same time the biggest and the hardest.

The coding of the site went surprisingly smoothly. The designer had well set typography, uniform spacing and a consistent system. This made the actual “redrawing” of the code enjoyable.

But… a static website alone would not make sense in this case.

The design was based on the fact that the sections are related, intertwined and tell a story. And that brings us to the most interesting part – the animation.

Animation – what makes the web live

Below are a few specific things I’ve addressed on the site and what’s behind the “wow effect”.

1) Fullscreen section with no blanks

The concept of the site was built on the fact that the individual sections are fullscreen.

At the beginning, we encountered a problem: “dead zones” were created between sections – the user scrolled and for a while there was nothing on the screen.

A client was showing me a video from Figma: “Look, I’m on section A, I scroll and the section changes to section B.”

I considered fullpage plugins for a while, but in the end I went the native CSS route:

scroll-snap-type (force a “snap” to the next section)

This makes the site behave naturally, without heavy JS solutions. And when I deployed it on the homepage, the client was thrilled – so we continued with this style.

2) Mascot that responds to the cursor and blinks

There is a yellow Webvalley mascot on the site.

Originally it was supposed to respond only to clicks, but I thought to “liven it up” a bit.

I made it an element that responds to mouse movement – the eyes and glasses gently shift to make it look like the mascot is following the cursor. And to make it look even more lifelike, he occasionally blinks.

It’s a simple principle, but the effect is great.

3) 3D cursor: a cube that behaves as a part of the brand

There is no normal cursor on the web. There’s a 3D cube.

So that it’s not just a static element:

gently rotates according to mouse movement,
also responds to scroll (rotation),
on some elements will be enlarged,
for clickable elements, it will turn pink to let the user know that they can interact,
and mix-blend-mode creates interesting visual effects when you hover over text and other elements.

The goal was to make it look “wow” but still be usable.

4) Minigame in the menu

The menu includes a mini-game inspired by Chrome’s “offline dinosaur”.

Instead of a dinosaur, a yellow mascot runs and the obstacles are characters from programming. The game is started by clicking or spacebar and gradually speeds up.

It runs directly in HTML canvas and since I don’t have that much experience with it, I helped myself in developing the AI. Not long ago, a similar minigame would have meant several days of pure manual work – here it helped speed up the first working version considerably.

Still, most of the time was taken up by fine-tuning the details: the jump must have the “right feel”, the difficulty must increase naturally, the obstacles must not be generated unfairly, and the whole thing must be stable in different browsers. This tuning alone meant dozens of prompts and long hours.

The result is simple, functional and, above all, memorable.

5) Text that is composed when scrolling

A large part of the texts has animation, where it is gradually “stacked”.

I used GSAP (and its text extension) for this. You can split the text into lines or words and then animate them to make it look clean and readable.

The result is an effect that energizes the site, but at the same time doesn’t feel overdone.

6) Star Wars effect

Surely you know the iconic “text to infinity” that is shot in space and gradually fades into the distance – made most famous by the Star Wars opening.

We used the same principle on the web, but we took it a level further: the user literally scrolls through the text. The text starts roughly in the middle of the screen and fades into the distance as you scroll.

The hardest part was not the perspective itself, but making it work reliably in practice. I dealt with different screen sizes, different text lengths, and behavior on mobile. In the mobile version, the effect is also accompanied by a photo, so the text had to be cleverly folded to only half the display.

The implementation was challenging, but the final effect is very distinctive and fits exactly into the overall “wow” atmosphere of the site.

And others

Honestly: with this site it would be easier to list what is not animated.

The animations are in the transitions between sections, in the details of the typography, in the reactions to the cursor, and in small interactions throughout the page. It’s best to just open it up and scroll through – there are “wow” moments virtually everywhere you look.

By the way – there were even more animations in the designs. In the end, we postponed some of them because the budget was not inflatable and at the same time the website was already quite atypical in this form. So there is still room for more “wow” elements, we just deliberately stopped at the moment when the website was already fulfilling its goal.

Responsiveness and animation: the hardest part of the project

One of the biggest challenges was responsiveness.

Most of the pages were drawn for mobile – and often it was not just “scaled down”, but completely redrawn. That in itself is challenging.

Just add animation to the mix:

Animation designed for desktop often doesn’t make sense on mobile,
a lot of things have to behave differently,
and because it is handled by JavaScript, you need to watch breakpoints, resize and overall stability.

This was where I spent most of my time tuning.

And the place where I learned the most.

Testing and compatibility

When you have a website built on animations and modern effects, testing is essential.

I tested across devices and browsers:

mobiles, tablets, laptops, desktop
Windows and macOS
Chrome, Firefox, Safari, Edge

The website also uses newer CSS features. That’s why we went the route that:

modern browsers are supported,
we do not support old and historical browser versions.

It also makes sense from the point of view of the target group – the website is aimed at a modern audience and should present a technology company, not be universal “compatible at any price”.

Start-up and result

Gradually I implemented other pages, sent the client previews and together we fine-tuned the details.

When the website was almost finished, the final content (texts, references, images and videos) arrived. I added everything to the final form, made a check and the website went out into the world.

It was a project that gave me a lot of experience – and also reminded me that the best work is the work that moves you.

At the same time, I want to add that this was not a work “just about development”.

The whole idea of the website was born in the head of Lukáš, who was determined to create a different corporate website. Dalibor kept project management and communication moving forward and important questions answered quickly. The designer delivered the documents in tip-top shape (consistent system, detailed designs and clear behaviour of elements). And I programmed it all into a working website.

Conclusion

This website was built from the beginning on one idea: to make the corporate website an experience.

If you want a similar type of presentation, it is good to consider that it is not just about “coding the design”. The hardest part is usually debugging the details – animation, responsiveness, interaction and stability in different browsers.

When you really want a different website, you have to be prepared to invest. In time, in detail and in tuning.

And that’s why I enjoy this type of project the most.