Strona produktowa 3D / Projekt koncepcyjny

PIXEL COLA

Strona premiery napoju, którą się ogląda jak film: puszka 3D prowadzona scrollem przez pięć aktów, od wybuchu limonek po ofertę z przyciskiem zamówienia.

Zobacz na żywo

Chcesz podobny projekt? Wycena →

Typ projektuKoncept marki i strona 3D

PIXEL COLA to fikcyjna marka stworzona przez PixelExpert, żeby pokazać, co potrafi strona produktowa nowej generacji.

ProblemPremiera, która ginie w tłumie

Zwykły landing z packshotem i listą zalet wygląda jak setki innych. Nowy produkt potrzebuje pierwszego wrażenia.

RozwiązanieProdukt w 3D, scroll jak film

Puszka z modelu 3D prowadzi przez historię w 5 aktach, a tekst w każdym akcie sprzedaje: argumenty, profil smaku, zestaw i CTA.

Prezentacja projektu

Zobacz stronę w akcji

Kolejne akty scrolla: wejście z wybuchem owoców, etykieta, smak, spadek przez taflę i finał z ofertą.

PIXEL COLA — wejście puszki i wybuch owoców, desktop

PIXEL COLA — nagłówek z neonowym COLA i argumentami, desktop

PIXEL COLA — etykieta z opisami na liniach, desktop

PIXEL COLA — profil smaku i orbita limonek, desktop

PIXEL COLA — puszka spada w dół, desktop

PIXEL COLA — neonowy pasek nad taflą, desktop

PIXEL COLA — finał z zestawem i CTA, desktop

PIXEL COLA — wejście puszki i wybuch owoców, tablet

PIXEL COLA — nagłówek z neonowym COLA i argumentami, tablet

PIXEL COLA — etykieta z opisami na liniach, tablet

PIXEL COLA — profil smaku i orbita limonek, tablet

PIXEL COLA — neonowy pasek nad taflą, tablet

PIXEL COLA — finał z zestawem i CTA, tablet

PIXEL COLA — wejście puszki i wybuch owoców, telefon

PIXEL COLA — nagłówek z neonowym COLA i argumentami, telefon

PIXEL COLA — etykieta z opisami na liniach, telefon

PIXEL COLA — profil smaku i orbita limonek, telefon

PIXEL COLA — puszka spada w dół, telefon

PIXEL COLA — neonowy pasek nad taflą, telefon

PIXEL COLA — finał z zestawem i CTA, telefon

Zakres projektu

Jak zbudowaliśmy efekt „wow”

Od pliku z etykietą do strony, na której produkt gra główną rolę — każdy etap robimy u siebie.

Model 3D z Blendera

Puszka 330 ml w skali rzeczywistej: profil, wieczko, zawleczka i etykieta z prawdziwymi fontami. Model na stronie waży poniżej 0,5 MB.

Scroll jak film

Jedna oś czasu i pięć aktów: wejście, etykieta, smak, spadek, finał. Cofanie odtwarza wszystko wstecz, bez skoków.

Realizm i neon

Plastry limonki z miąższem, krople na puszce, bąbelki i neonowe akcenty w kolorze marki — na czarnym tle, które je podbija.

Telefon, SEO i dostępność

Tekst jest w HTML, nie w obrazku. Na telefonie jakość dopasowuje się do urządzenia, a bez WebGL strona pokazuje render i pełną treść.

Bez niedomówień

Najczęstsze pytania o strony 3D

Czy PIXEL COLA to prawdziwy produkt?

Nie. To fikcyjna marka, którą stworzyliśmy na potrzeby portfolio: nazwa, etykieta, model 3D i strona. Oferta i przycisk zamówienia w demie są częścią pokazu.

Czy zrobicie to dla mojego produktu?

Tak. Na podstawie zdjęć, projektu opakowania albo pliku 3D budujemy model produktu, a potem scenariusz strony pod premierę, kampanię albo stronę produktu w sklepie.

Czy taka strona zadziała na telefonie?

Tak. Na telefonie scena jest lżejsza, a jakość renderu sama się obniża na słabszych urządzeniach. Użytkownicy z włączonym ograniczeniem ruchu dostają spokojną wersję bez animacji.

Na jakiej technologii to działa?

Model w Blenderze, eksport do glTF, scena w Three.js i oś czasu GSAP ScrollTrigger. Bez systemu budowania — zwykłe HTML, CSS i JS, które działają na każdym hostingu.