Co jest na stronie
Pomyk to projekt koncepcyjny: marka, rower i jego parametry są wymyślone. Projekt powstał na tych samych narzędziach, na których działa moja strona firmowa: Next.js, panel treści Sanity i hosting na Cloudflare.
Na pierwszym ekranie stoi rower. Kiedy przewijasz, kamera go okrąża, a rower rozsuwa się na części i zatrzymuje cztery razy: cały rower, kierownica, bateria i silnik. Przy każdym przystanku jest krótki podpis z najważniejszym parametrem. Po ostatnim przystanku rower składa się z powrotem. Niżej są trzy kolory ramy, specyfikacja, pytania i formularz kontaktowy.
Ruch animacji najlepiej zobaczyć samemu, na telefonie. Odnośnik „Otwórz stronę projektu” jest na stronie realizacji.
Model roweru: „electric cycle” (otwiera się w nowej karcie) – adeelafzal2015 (otwiera się w nowej karcie) (Sketchfab), licencja CC BY 4.0 (otwiera się w nowej karcie). Zmieniony: materiały, kolory, marka i rozsunięcie części.
Klatki z Blendera zamiast modelu w przeglądarce
Animację 3D na stronie internetowej da się zrobić na dwa sposoby. W pierwszym przeglądarka pobiera model 3D i rysuje go na żywo. Produkt można wtedy obracać w dowolną stronę, ale telefon liczy grafikę przy każdym ruchu, a model trzeba mocno uprościć. Ten, którego użyłem, ma 142 części i 1,1 mln trójkątów, a jego plik źródłowy waży 80,8 MB.
W Pomyku wybrałem drugi sposób. Ruch kamery i rozsuwanie części wyrenderowałem wcześniej w Blenderze, darmowym programie do grafiki 3D, jako serię klatek: 150 dla komputera i 150 dla telefonu, bo pionowy ekran potrzebuje innego kadru. Strona pokazuje klatkę, która odpowiada temu, jak daleko przewinąłeś. Telefon wyświetla gotowe obrazy i nie liczy grafiki 3D. Na start pobiera pierwszą klatkę, a resztę dociąga w tle, kiedy oglądasz pierwszy ekran.
Ten sposób ma ograniczenia. Kamera jedzie zawsze tą samą trasą i roweru nie obrócisz palcem. Inny ruch, inne przystanki albo inny kolor na renderze to nowy render.
Ile waży strona
Pomiary z 25 października 2026 r. na wdrożonej stronie, z pustą pamięcią przeglądarki:
Co | Telefon | Komputer |
|---|---|---|
Pierwsze wczytanie | 258 KB | 259 KB |
Cała strona przewinięta do końca, ze wszystkimi klatkami | ok. 6,3 MB | ok. 6,3 MB |
LCP (kiedy widać największy element pierwszego ekranu) | 0,41–0,46 s | 0,28–0,29 s |
Z 258 KB na telefonie 143 KB to skrypty strony, 41 KB pierwsza klatka, 41 KB czcionki, a resztę zajmują HTML i style. Klatki są większością wagi strony, ale pobierają się w tle i nie wstrzymują pierwszego ekranu. Google uznaje LCP do 2,5 s za dobry wynik.
PageSpeed Insights na telefonie (środkowy wynik z trzech pomiarów, 25.10.2026): wydajność 98, ułatwienia dostępu 100, sprawdzone metody 100. SEO wyszło 69, bo demo jest celowo ukryte przed Google: fikcyjna firma nie powinna trafić do wyników wyszukiwania. Pozostałe sprawdzenia SEO przeszły.
Kto ma w telefonie włączone ograniczanie ruchu albo oszczędzanie danych, nie dostaje animacji. Widzi nieruchome obrazy przystanków z tymi samymi podpisami, a cała strona waży wtedy 493 KB.
Test na prawdziwym telefonie
Emulacja telefonu na komputerze nie pokazała dwóch rzeczy, które zobaczyłem na moim Samsungu.
- Przy wolnym przewijaniu obraz był nieostry. Żeby ruch był płynny, strona cały czas przenikała sąsiednie klatki, więc przy powolnym ruchu palca widać było dwa kadry naraz. Teraz przenikanie działa tylko na części drogi między klatkami, a po zatrzymaniu obraz wyostrza się do jednej klatki.
- Klatki były miękkie: telefon powiększał klatkę 720×1560 o 14%. Przeszedłem na klatki 900×1950. Komplet klatek telefonu waży przez to 5,9 MB zamiast 4,3 MB, ale obraz jest ostry.
Po tych poprawkach scena na telefonie Samsung wyglądała dobrze i przy wolnym przewijaniu, i przy szybkim machnięciu palcem. Testy automatyczne przechodzą w Chromium, czyli w silniku Chrome.
Co odrzuciłem po drodze
- Sekcję z rowerem w plenerze. Wstawiłem go w panoramy zdjęciowe drogi, lasu i miasta, ale wyglądał sztucznie: bez śladów użycia, bez rowerzysty, opona nie wgniatała się w podłoże. Przy prawdziwym produkcie lepsze są zdjęcia z sesji.
- Format WebP dla klatek. Na ciemnym tle zmieniał odcień i robił widoczne bloki w cieniach. Klatki są w formacie AVIF.
- Modele 3D zrobione przez AI ze zdjęć. Taki model to jedna bryła z wymyślonym wnętrzem i nie da się go rozłożyć na prawdziwe części.
Co zmieniasz sam w panelu
W panelu zmieniasz wszystkie teksty: nagłówek, podpisy przystanków, nazwy i opisy kolorów, specyfikację i pytania. Po kliknięciu „Publikuj” zmiana pojawia się na stronie po mniej więcej minucie. W moim pomiarze z 25.10.2026 zmiana podpisu pojawiła się po ok. 48 s, a przywrócenie poprzedniego po ok. 65 s.
Obrazy roweru pochodzą z renderu, więc w panelu ich nie podmienisz. Panel pilnuje za to, żeby podpisy pasowały do renderu: gdy nowy render ma inne przystanki, „Publikuj” jest nieaktywny, dopóki podpisy się nie zgadzają.
Czego potrzebuję, jeśli chciałbyś uzyskać podobny efekt na swojej stronie
Żeby produkt rozłożył się na części, każda część musi być w modelu osobno. Najlepiej, jeśli dostanę:
- plik CAD całego złożenia, najlepiej w formacie STEP; części objęte tajemnicą można usunąć przed wysłaniem,
- listę części z nazwami po polsku, choćby zrzut drzewa z programu CAD,
- kolory i wykończenia (np. RAL, mat albo połysk) i jedno zdjęcie produktu w dziennym świetle,
- logo w wektorze (SVG albo PDF),
- parametry techniczne z karty katalogowej,
- zdjęcia produktu w użyciu, jeśli są.
W Pomyku użyłem gotowego modelu z serwisu Sketchfab.
Bez pliku CAD rozkładania na części nie da się zrobić. Zostaje wtedy sam obrót kamery wokół modelu, który ze zdjęć i wymiarów odtworzy modelarz 3D (jego praca wyceniana osobno), albo zwykła strona ze zdjęciami. Gotowy model z serwisu ma sens tylko przy typowym produkcie i wtedy, gdy zgadzasz się, że to nie jest dokładnie Twój produkt.
Ile to kosztuje po odbiorze
Hosting, panel treści, formularz i statystyki działają na darmowych planach usług, na Twoich kontach, więc po odbiorze płacisz tylko za domenę. Klatki sceny leżą razem z plikami strony na Cloudflare, który za pobieranie plików strony nie pobiera opłat i nie limituje liczby zapytań. Co jeszcze mieści się w darmowych planach i kiedy przestają wystarczać, opisałem we wpisie Ile kosztuje utrzymanie strony internetowej?
Ceny stron bez animacji 3D są w cenniku. Stronę ze sceną 3D wyceniam po rozmowie o produkcie i materiałach, a wycenę przygotowuję w 2 dni robocze.
Pomiary i źródła
- Pomiary własne na wdrożonej stronie demo, 25.10.2026: waga strony i LCP (Playwright, pusta pamięć podręczna), PageSpeed Insights (telefon, środkowy wynik z 3), czas publikacji (sprawdzanie strony co 10 s).
- Model: „electric cycle” na Sketchfabie (otwiera się w nowej karcie), licencja CC BY 4.0 (otwiera się w nowej karcie)
- LCP: web.dev – Largest Contentful Paint (otwiera się w nowej karcie) (sprawdzone 26.10.2026)
- Pliki strony na Cloudflare bez opłat: Cloudflare Workers – cennik (otwiera się w nowej karcie) (sprawdzone 26.10.2026)