Strona 3D i sklep demo / Projekt koncepcyjny

LUMARET

Strona premiery kolekcji zegarków, którą przewija się jak film: dwa modele 3D z Blendera, pięć taktów scrolla i sklep demo z koszykiem.

Zobacz na żywo

Chcesz podobny projekt? Wycena →

Typ projektuKoncept marki, strona 3D i sklep demo

LUMARET to fikcyjna marka zegarków stworzona przez PixelExpert, żeby pokazać, jak może wyglądać strona premium z produktem w roli głównej.

ProblemDrogi produkt, który trzeba zobaczyć

Zegarek kupuje się oczami: zdjęcia z katalogu nie oddają odbić, faktury ani tego, jak działa mechanizm czy ekran.

RozwiązanieModele 3D, scroll jak film, sklep

Dwa zegarki w trzech wykończeniach prowadzą przez pięć taktów, a po nich czeka sklep z kartą produktu i koszykiem.

Prezentacja projektu

Zobacz stronę w akcji

Kolejne takty scrolla i sklep: wejście, tarcza, trzy charaktery, mechanizm, smartwatch Cime 47, karta produktu i koszyk.

LUMARET — wejście, Aube 39 w złotym wykończeniu, desktop

LUMARET — takt Tarcza, sunburst Aube 39 Argent, desktop

LUMARET — takt Trzy charaktery, Aube 39 Noir i wybór wersji, desktop

LUMARET — takt Mechanizm, kaliber LUM-01 widoczny przez szafirowy dekielek, desktop

LUMARET — takt Cime 47, smartwatch z żywym ekranem, desktop

LUMARET — sklep, karta produktu z wyborem wersji i paska, desktop

LUMARET — wejście, Aube 39 w złotym wykończeniu, tablet

LUMARET — takt Tarcza, sunburst Aube 39 Argent, tablet

LUMARET — takt Trzy charaktery, Aube 39 Noir i wybór wersji, tablet

LUMARET — takt Mechanizm, kaliber LUM-01 widoczny przez szafirowy dekielek, tablet

LUMARET — takt Cime 47, smartwatch z żywym ekranem, tablet

LUMARET — sklep, karta produktu z wyborem wersji i paska, tablet

LUMARET — wejście, Aube 39 w złotym wykończeniu, telefon

LUMARET — takt Tarcza, sunburst Aube 39 Argent, telefon

LUMARET — takt Trzy charaktery, Aube 39 Noir i wybór wersji, telefon

LUMARET — takt Mechanizm, kaliber LUM-01 widoczny przez szafirowy dekielek, telefon

LUMARET — takt Cime 47, smartwatch z żywym ekranem, telefon

LUMARET — sklep, karta produktu z wyborem wersji i paska, telefon

Zakres projektu

Od briefu do koszyka

Art direction, modele 3D, strona i sklep demo. Każdy etap robimy u siebie.

Dwa modele z Blendera

Aube 39 (automat z widocznym mechanizmem: mostki z paskami genewskimi, balans z włosem, szkieletowy rotor) i Cime 47 (sportowy smartwatch), każdy w wykończeniu srebrnym, czarnym i złotym, wiernie według plansz koncepcyjnych. Model Aube waży 2,96 MB, Cime 1,26 MB, a na telefonie odpowiednio 1,41 i 0,72 MB.

Scroll jak film

Pięć taktów na jednej osi czasu: wejście, tarcza z opisanymi detalami (hotspoty i pierścień sekund), trzy charaktery, mechanizm w ruchu i Cime 47. Strona sama dopływa do każdego taktu, a cofanie odtwarza wszystko wstecz.

Sklep demo z żywym ekranem

Karta produktu z wyborem wersji i paska, koszyk zapamiętywany w przeglądarce i ekran smartwatcha, który naprawdę pokazuje godzinę i zmienia tarcze. Bez płatności: to pokaz.

Szybkość i telefon

Treść jest w HTML. Wersja HTML (bez sceny 3D) ma w Lighthouse na telefonie wydajność 98, dostępność 100, LCP 2,3 s i CLS 0,002. Scena 3D rysuje do 23 wywołań na komputerze i do 18 na telefonie, w trakcie przewijania nie kompiluje nowych shaderów, a w spoczynku odświeża się 8 razy na sekundę.

Bez niedomówień

Najczęstsze pytania o strony 3D

Czy LUMARET to prawdziwa marka?

Nie. To fikcyjna marka, którą stworzyliśmy na potrzeby portfolio: nazwa, kolekcja, modele 3D, strona i sklep. Ceny są przykładowe, a koszyk niczego nie sprzedaje. Część materiałów koncepcyjnych (moodboardy i plansze do modelowania) powstała z pomocą AI, a modele i strona są naszą pracą w Blenderze i kodzie.

Czy zrobicie to dla mojego produktu?

Tak. Na podstawie zdjęć, rysunków technicznych albo pliku 3D budujemy model produktu, a potem scenariusz strony pod premierę, kampanię lub sklep. Jeśli sprzedajesz online, dokładamy kartę produktu i prawdziwy koszyk z płatnościami.

Czy taka strona zadziała na telefonie?

Tak. Na telefonie scena używa lżejszych modeli i niższej jakości renderu, a na słabszym sprzęcie albo bez WebGL zostaje pełna strona w HTML z gotowymi obrazami produktu. Użytkownicy z ograniczonym ruchem dostają spokojną wersję bez animacji.

Na jakiej technologii to działa?

Modele powstają w Blenderze i trafiają na stronę jako glTF z kompresją meshopt i teksturami WebP. Scenę prowadzą three.js, GSAP ScrollTrigger i Lenis. Całość to zwykłe HTML, CSS i JS, bez systemu budowania, więc działa na każdym hostingu.