Zadání projektu: Web s 3D feelingem pro VisualCraft

1. Vizuální identita a atmosféra

Koncept: Web musí dýchat "3D prostorem". Cílem je minimalistický high-end design, kde se uživatel cítí jako v digitálním ateliéru, nikoliv na běžné firemní stránce.
Paleta a Blueprint: Pracujeme s čistou barvou #FFF5F5, která působí luxusně, ale neagresivně. Přidáme jemný, technický čtverečkovaný grid (vzhled blueprintu), který podtrhne preciznost 3D designérů.
Floating efekt: Využijeme všesměrový box-shadow u všech klíčových elementů. Chceme, aby prvky vypadaly, že "levitují" nad pozadím a vytvářejí potřebnou hloubku.

Příběh čísel: Statistika úspěšných projektů musí být živá. Implementujeme animaci čísel (class .animate-me) se spuštěním při scrollu. Počítáme s 1s initial delay a 400ms stagger efektem pro elegantní postupný náběh.
Responzivní navigace: I na malém displeji chceme zachovat přehlednost. Použijeme Flexbox pro čisté přeskládání – indikátory (tečky) se přesunou nahoru a hlavní akční tlačítka (CTA) budou logicky následovat pod nimi.
Dotek 3D: Práce s 3D elementy nesmí být statická. Prvky by měly lehce reagovat na pohyb myši (hover efekty s mírnou transformací v ose Z).

Platforma: WordPress v kombinaci s Breakdance Builderem pro zachování maximální flexibility při správě obsahu.
Layoutová integrita: Pro zachování dokonalé vizuální geometrie budeme využívat align-items: stretch. Tím zajistíme, že všechny divy v řadě budou mít identickou výšku bez ohledu na obsah.
Výkon: Minimalismus nesmí být jen vizuální, ale i kódový. Přejeme si čistý JavaScript pro plynulé animace (stabilních 60 FPS). Vyhýbáme se těžkým knihovnám – chceme, aby byl web lehký a extrémně rychlý.

Grid jako řád: Odmítl jsem klasické "white space" plochy. Web musí komunikovat stejný jazyk jako workspace v Blenderu nebo Unreal Engine. Blueprintový grid na pozadí není jen estetický prvek, je to funkční lešení – dává celému webu technický feeling a vizuální ukotvení, které okamžitě říká: "tady se tvoří 3D".
Práce s "materiálem": Barvu #FFF5F5 jsem nevybral náhodou. Je to soft-look, který nepálí do očí jako agresivní bílá, a přitom dává vyniknout jemným stínům. Box-shadow pro mě není jen dekorace, je to simulace hloubky (Z-osa) v plochém prohlížeči. Každý div vnímám jako objekt ve scéně, který má svou váhu a prostorovou pozici.

Stagger efekt místo chaosu: Nechtěl jsem, aby se čísla jen tak "vysypala" na obrazovku. Jako majitel studia trvám na precizním timingu. Nastavil jsem 1s delay a 400ms rozestupy, aby oko uživatele stačilo vnímat pohyb. Je to jako postupné renderování scény – všechno musí mít svůj řád a plynulost.
Výkon jako priorita: V Breakdance jsem striktně zakázal těžké knihovny. Všechno běží na čistém Vanilla JS přes requestAnimationFrame. Chci 60 FPS i na levných mobilech, protože plynulost animací je pro mě vizitka technologické vyspělosti studia. Žádný balast, jen čistý výkon.

Logika priorit: Narazil jsem na to, že klasické mobilní řazení prvků rozbíjí myšlenkovou flow. Vyřešil jsem to přes Flexbox order. Indikátory progresu (tečky) musí být nahoře jako navigace v ateliéru, akční tlačítka musí být dole přímo pod palcem. Uživatel nesmí přemýšlet, kam kliknout.
Stretch mechanika: Nesnáším vizuální schody. Všechny karty jsem proto v CSS vynutil k roztažení na maximální výšku nejvyššího prvku. I když je textu málo, vizuální integrita celého gridu musí zůstat stoprocentní. Je to o detailech, které oddělují profesionální práci od průměru.

Škálovatelný systém: Celý web jsem postavil na sémantických třídách (jako .animate-me). Je to systém, který dýchá s agenturou. Kdokoli z týmu může přidat další statistiku nebo nový projekt a skript ji automaticky „chytne“ a zařadí do animace. Žádné další programování, prostě efektivní workflow.