Strony internetoweIdentyfikacja wizualnaSocial mediaGoogle AdsAutomatyzacje AIOpieka nad stroną
Dlaczego jaPortfolioProcesCennikKontakt
PLEN日本語
Porozmawiajmy

CEKARO.

Strona polskiego producenta figur dekoracyjnych, który od 1995 roku robi wszystko we własnej pracowni: od formy, przez odlew, po ręczne malowanie. Trzy wersje językowe, bo figury trafiają do klientów w całej Europie.

Zobacz stronę na produkcji cekaro.pl
Pierwszy ekran strony CEKARO: fioletowe tło, napis marki i figury z katalogu, między innymi czarny byk ze złotymi rogami.

Iskra

Od czego się zaczęło

Zaczęło się od logo. Dzień później powstały trzy warianty strony: jeden bliski materiałom od klientki, drugi z liftingiem i trzeci w mocnym 3D.

Do wersji produkcyjnej przeszła z wariantu trójwymiarowego cała architektura tła: gradienty, siatka podłogi i wielki napis marki. Tak zdecydowała klientka.

Tekst „O nas” firma przygotowała sama, od razu po polsku, angielsku i niemiecku, więc strona od początku była planowana w trzech językach.

Immersja

Jak to zostało zrobione

W galerii każda kategoria ma model 3D figury z katalogu. Figury lekko się kołyszą i reagują na kursor. Pełny obrót usunąłem, bo tył modelu byłby zgadywany, a strona ma pokazywać prawdziwy produkt.

Pierwszy ekran pokazuje render figur z katalogu: byka ze złotymi rogami, głowę, goryla i misia. Zastąpił wcześniejszy kadr z generatora obrazów, który przemalowywał produkty.

Wielki napis CEKARO w tle nalewa się złotem w miarę przewijania. Zdjęcie ekipy przykleja się do ekranu obok tekstu o firmie, żeby pod nim nie zostawała pustka.

Substancja

Co siedzi pod spodem

Każdy język ma własny adres i własne dane dla wyszukiwarki, więc Google widzi trzy pełnoprawne strony, a nie jedną z przełącznikiem. Wersja niemiecka zwraca się do klienta per „Sie”, bo to rynek hurtowy.

Modele przed publikacją przechodzą przez własny skrypt odchudzający. Skan ważący 87 MB trafia na stronę jako plik 366 KB.

Decyzje techniczne
dla zainteresowanych kodem
Next.js 16, prerendering statyczny

Treść przychodzi gotowa z serwera, a three.js ładuje się dopiero w przeglądarce, więc tekst nie czeka na grafikę 3D.

three.js, jeden kontekst WebGL na wszystkie kafle

Modele dzielą jeden kontekst, a gdy któryś się nie wczyta, w kaflu zostaje zastępcza bryła, więc galeria nigdy nie jest pusta.

gltf-transform we własnym skrypcie

Skany ważące dziesiątki megabajtów schodzą do kilkuset kilobajtów, zanim trafią na stronę.

PL, EN i DE z canonical i hreflang

Każdy język ma własny adres, sitemapę i obrazek do udostępnień, a x-default wskazuje wersję angielską dla reszty Europy.

GSAP, ScrollTrigger i Lenis

Ruch podąża za przewijaniem, a przy prefers-reduced-motion animacje i płynne przewijanie się wyłączają.

JSON-LD LocalBusiness

Wyszukiwarka dostaje dane firmy razem z rokiem założenia w formie, którą rozumie.

Iskra· © 2026 Przemysław Wojenka