Jak vznikal nadčasový web plný animací pro Webvalley

19 Pro

Firemní weby často vypadají podobně. Pár sekcí, pár referencí, kontakt… a hotovo.

Web pro Webvalley měl ale jiný cíl: udělat z prohlížení zážitek, který si člověk zapamatuje. Fullscreen sekce, animace téměř na každém kroku, živý maskot a dokonce minihra v menu.

V téhle případové studii ukážu, jak jsme k webu přistoupili, kde jsme narazili a co všechno se skrývá za „cool webem“.

Kontext projektu

Klient: Webvalley
Hlavní cíle:
- vytvořit firemní web jako zážitek, který se dobře pamatuje
- odlišit značku pomocí animací, interakcí a „wow“ efektů
- podpořit dojem technologické firmy (moderní provedení, moderní stack)
Moje role: kódování, implementace animací a interakcí, návrh a realizace technického řešení
Technologie: Nuxt (Vue), GSAP, Canvas, Tailwind

První kontakt

Jednoho dne mi zazvonil telefon. Na druhé straně se představil Dalibor Mráz z Webvalley a pozval mě na osobní schůzku. Hledal vývojáře pro realizaci nového firemního webu.

Schůzka proběhla pohodově. V kanceláři byl Dalibor a také Lukáš Vlček (majitel agentury), kterého znám z dřívější spolupráce. Připojili notebook k velké obrazovce a otevřeli Figma návrhy.

A během pár minut bylo jasné: tohle nebude klasický web.

Všechno bylo promyšlené do detailu. Každá sekce měla své načasování, svůj pohyb, své interakce. Ukázali mi i menu, ve kterém se skrývá minihra.

Když na to klikneš, maskot se změní… a když klikneš třikrát, web se rozpadne, aby to bylo cool.

V tu chvíli jsem si v hlavě řekl: To jako vážně? Nakonec se web nerozpadá — ale přesně tenhle typ hravých detailů mi ukázal, jak vysoko míří.

Cíl byl jasný: odlišit se a udělat nezapomenutelný dojem.

Nastavení očekávání

Upřímně – v jednu chvíli jsem se trochu vyděsil. Ne proto, že bych animace neměl rád. Naopak, animace mě baví a už jsem na pár webech řešil projekty, kde hrají výraznou roli.

Tady ale byla laťka ještě výš.

Proto jsem hned na začátku nastavil očekávání:

Animace jsou časově náročné.
„Wow efekt“ často není investice, která se vrátí.
A tím pádem je takový web náročnější na rozpočet než běžná firemní prezentace.

Zeptal jsem se tedy napřímo, jestli si jsou opravdu jistí, že chtějí realizovat přesně to, co mají vymyšlené.

Odpověď byla jednoznačná: ano. Míří vysoko a chtějí, aby to bylo na webu vidět.

Domluvili jsme se, že návrhy důkladně prostuduji a na další schůzku připravím cenový odhad.

Odhad pracnosti a schválení projektu

Měl jsem čas projít celý návrh, rozpadnout si ho na části a udělat si přesnou představu o pracnosti.

Na další schůzce jsem klientovi předložil konkrétní odhad v řádu stovek hodin práce.

Klient si to nechal projít hlavou – a po pár dnech přišel telefon:

Máme zelenou. Pusťte se do toho.

Byla to kombinace radosti a respektu. Věděl jsem, že mě čeká velký projekt, na kterém se člověk opravdu posune.

Volba technologií

Na druhé schůzce jsme řešili i technologie.

Navrhl jsem WordPress, protože z hlediska správy obsahu je to často nejlepší řešení. Tady ale WordPress nebyla cesta, kterou by klient chtěl.

Zvažovali jsme Next (React), jenže já v něm nemám takovou praxi, proto jsem navrhl Nuxt (Vue):

Nuxt dobře znám a mám s ním roky zkušeností.
Je to pevný základ pro komponentový web.
V rámci Vue světa je to podobný typ frameworku jako Next u Reactu — umí nabídnout srovnatelné možnosti (SSR/SSG), jen v jiné technologické větvi.
A hlavně: dobře se nad ním staví komplexní animace a interakce.

Pro animace jsem zvolil GSAP. Měl jsem s ním zkušenosti a věděl jsem, že:

zvládne složité sekvence,
je stabilní a použitelný v praxi,
a díky rozšířením pokryje velkou část toho, co jsme na webu potřebovali.

Jak jsem postupoval

Začal jsem tím, že jsem web „postavil na pevném základu“:

design systém (typografie, barvy, spacing),
opakovatelné komponenty,
sekce,
stránky.

Kódoval jsem rovnou v Nuxtu, aby se nic nemuselo převádět.

Rozhodl jsem se jít cestou jedné stránky:

dotáhnout ji do konce,
nechat klienta připomínkovat,
odladit interakce a animace,
a pak stejný styl aplikovat na zbytek webu.

První stránkou byla logicky homepage. Zároveň největší a nejtěžší.

Kódování webu šlo překvapivě hladce. Designér měl dobře nastavenou typografii, jednotné mezery a konzistentní systém. Díky tomu bylo samotné „překreslení“ do kódu příjemné.

Jenže… samotný statický web by v tomhle případě nedával smysl.

Design byl postavený na tom, že sekce spolu souvisí, prolínají se a vypráví příběh. A tím se dostáváme k tomu nejzajímavějšímu — animace.

Animace – co dělá web živý

Níže je několik konkrétních věcí, které jsem na webu řešil a co všechno se za „wow efektem“ skrývá.

1) Fullscreen sekce bez prázdných míst

Koncept webu byl postavený na tom, že jednotlivé sekce jsou fullscreen.

Na začátku jsme narazili na problém: mezi sekcemi vznikaly „mrtvé zóny“ – uživatel scrolloval a chvíli nebylo na obrazovce nic.

Klient mi ukazoval video z Figmy: „Podívej, jsem na sekci A, scrollnu a sekce se vymění na sekci B.“

Chvíli jsem zvažoval řešení typu fullpage pluginů, ale nakonec jsem šel cestou nativního CSS:

scroll-snap-type (vynutí „zacvaknutí“ na další sekci)

Díky tomu se web chová přirozeně, bez těžkého JS řešení. A když jsem to nasadil na homepage, klient byl nadšený – takže jsme tímhle stylem pokračovali i dál.

2) Maskot, který reaguje na kurzor a mrká

Na webu je žlutý maskot Webvalley.

Původně měl reagovat jen na kliknutí, ale napadlo mě ho trochu „oživit“.

Udělal jsem z něj prvek, který reaguje na pohyb myši – oči a brýle se jemně posouvají tak, že působí, jako by maskot kurzor sledoval. A aby působil ještě živěji, občas i mrkne.

Je to jednoduchý princip, ale efekt je skvělý.

3) 3D kurzor: krychle, která se chová jako součást brandu

Na webu není běžný kurzor. Je tam 3D krychle.

Aby to nebyl jen statický prvek:

jemně se otáčí podle pohybu myši,
reaguje i na scroll (rotace),
na některých prvcích se zvětší,
u klikacích elementů se zabarví do růžové, aby uživatel pochopil, že může interagovat,
a díky mix-blend-mode vytváří zajímavé vizuální efekty při najetí na text a další prvky.

Cílem bylo, aby to vypadalo „wow“, ale pořád to bylo použitelné.

4) Minihra v menu

Součástí menu je minihra inspirovaná „offline dinosaurkem“ v Chromu.

Místo dinosaura běží žlutý maskot a překážky jsou znaky z programování. Hra se spouští kliknutím nebo mezerníkem a postupně zrychluje.

Běží přímo v HTML canvasu a protože s ním nemám tolik zkušeností, pomohl jsem si při vývoji AI. Ještě nedávno by podobná minihra znamenala několik dní čisté ruční práce — tady to pomohlo výrazně urychlit první funkční verzi.

Stejně ale nejvíc času sežralo ladění detailů: skok musí mít „správný pocit“, obtížnost se musí zvyšovat přirozeně, překážky se nesmí generovat neférově a celé to musí být stabilní v různých prohlížečích. Jen tohle ladění znamenalo desítky promptů a dlouhé hodiny.

Výsledek je jednoduchý, funkční a hlavně zapamatovatelný.

5) Text, který se skládá při scrollu

Velká část textů má animaci, kdy se postupně „vyskládá“.

Použil jsem na to GSAP (a jeho rozšíření pro práci s textem). Text se dá rozdělit na řádky nebo slova a ty pak animovat tak, aby to působilo čistě a čitelně.

Výsledek je efekt, který webu dodá energii, ale zároveň nepůsobí přehnaně.

6) Star Wars efekt

Jistě znáte ten ikonický „text do nekonečna“, který je natočený v prostoru a postupně mizí do dálky — nejvíc ho proslavil úvod Star Wars.

Stejný princip jsme použili i na webu, ale posunuli jsme ho o úroveň dál: uživatel se tím textem doslova proscrolluje. Text začíná zhruba uprostřed obrazovky a s postupným scrollováním mizí v dálce.

Nejtěžší část nebyla samotná perspektiva, ale to, aby to fungovalo spolehlivě v praxi. Řešil jsem různé velikosti obrazovek, různé délky textů a chování na mobilu. V mobilní verzi je navíc efekt doplněný fotografií, takže se musel text chytře skládat jen do půlky displeje.

Realizace byla náročná, ale výsledný efekt je velmi výrazný a přesně zapadá do celkové „wow“ atmosféry webu.

A další

Upřímně: u tohohle webu by bylo jednodušší vyjmenovat, co animované není.

Animace jsou v přechodech mezi sekcemi, v detailech typografie, v reakcích na kurzor i v drobných interakcích po celé stránce. Nejlepší je si to prostě otevřít a projet — „wow“ momenty jsou prakticky všude, kam se podíváte.

Mimochodem — animací bylo v návrzích vymyšleno ještě víc. Část jsme nakonec odložili, protože rozpočet nebyl nafukovací a zároveň už v téhle podobě vznikl dost atypický web. Prostor pro další „wow“ prvky tam tedy pořád je, jen jsme se vědomě zastavili v momentě, kdy už web splňoval svůj cíl.

Responzivita a animace: nejtěžší část projektu

Jedna z největších výzev byla responzivita.

Většina stránek byla rozkreslená i pro mobil – a často to nebylo jen „zmenšené“, ale úplně překreslené. To samo o sobě je náročné.

Jenže do toho přidejte animace:

animace navržená pro desktop často nedává smysl na mobilu,
spousta věcí se musí chovat jinak,
a protože je to řešené JavaScriptem, je potřeba hlídat breakpoints, resize a celkovou stabilitu.

Tohle bylo místo, kde jsem strávil nejvíc času laděním.

A zároveň místo, kde jsem se naučil nejvíc.

Testování a kompatibilita

Když máte web postavený na animacích a moderních efektech, testování je základ.

Testoval jsem napříč zařízeními i prohlížeči:

mobily, tablety, notebooky, desktop
Windows i macOS
Chrome, Firefox, Safari, Edge

Web využívá i novější CSS vlastnosti. Proto jsme šli cestou, že:

moderní prohlížeče jsou podporované,
staré a historické verze prohlížečů cíleně nepodporujeme.

Dává to smysl i z pohledu cílové skupiny – web míří na moderní publikum a má prezentovat technologickou firmu, ne být univerzální „kompatibilní za každou cenu“.

Spuštění a výsledek

Postupně jsem realizoval další stránky, posílal klientovi náhledy a společně jsme ladili detaily.

Když byl web téměř hotový, dorazil finální obsah (texty, reference, obrázky a videa). Doplnil jsem vše do finální podoby, provedl kontrolu a web šel do světa.

Byl to projekt, který mi dal hodně zkušeností – a zároveň mi připomněl, že nejlepší práce je ta, která vás posouvá.

Zároveň chci dodat, že tohle nebyla práce „jen o vývoji“.

Celý nápad webu se zrodil v hlavě Lukáše, který si šel neochvějně za tím vytvořit odlišný firemní web. Dalibor držel projektový management a komunikaci tak, aby se věci hýbaly dopředu a důležité otázky měly rychlé odpovědi. Designér dodal podklady ve špičkové kondici (konzistentní systém, detailní návrhy a jasné chování prvků). A já to celé naprogramoval do funkčního webu.

Závěr

Tenhle web byl od začátku postavený na jedné myšlence: udělat z firemního webu zážitek.

Pokud chcete podobný typ prezentace, je dobré počítat s tím, že nejde jen o „nakódování designu“. Nejtěžší část bývá ladění detailů – animace, responzivita, interakce a stabilita v různých prohlížečích.

Když chcete opravdu jiný web, musíte být připraveni investovat. Do času, do detailu i do ladění.

A právě proto mě tenhle typ projektů baví nejvíc.