Case study04 / 10Sklep internetowyProjekt autorski2026

Craft Coffee.

Sklep rzemieślniczej palarni kawy: ziarna 3D z Blendera, spójna seria zdjęć produktów, katalog z filtrami i koszyk przygotowany pod płatności online.

Projekt na ekranieZobacz, jak działa
Craft Coffee, wersja desktopowa
Wersja desktopowa
Craft Coffee, wersja mobilna
Wersja mobilna

Od wyzwania do efektu.

Każdy etap pokazuję na zrzutach z działającej wersji. Kliknij ujęcie, żeby je powiększyć.

Klient
Projekt autorski (demo)
Technologie
  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • three.js
  • GSAP
  • Blender
Zakres projektu
  • Projekt UI/UX
  • Model 3D (Blender)
  • Art direction zdjęć
  • Katalog i koszyk
  • Zamówienie gotowe pod Stripe

Wyzwanie

Małe, lokalne marki (palarnie kawy, rękodzieło, produkty regionalne) sprzedają głównie stacjonarnie lub przez wiadomości na social mediach. Brakuje im sklepu, który przyjmie zamówienie i płatność o każdej porze - tracą sprzedaż poza godzinami otwarcia.

Sklep od pierwszego ekranu wygląda jak palarnia, a lekki model ziaren z Blendera działa też na telefonie.

Rozwiązanie

Zbudowałem sklep, który od pierwszego ekranu wygląda jak palarnia, a nie szablon. W hero unoszą się palone ziarna wymodelowane w Blenderze i pokazane w lekkiej scenie 3D (three.js), która działa też na telefonie. Dziesięć kaw ma spójną serię zdjęć produktów, a przewijana historia „Od ziarna do filiżanki” i strona o palarni pokazują proces na zdjęciach. Katalog filtruje kawy po paleniu, rodzaju i mieleniu i zapisuje wybór w adresie strony. Karta produktu liczy cenę wariantu i oszczędność na paczce 1 kg, a koszyk pokazuje, ile brakuje do darmowej dostawy. Proces zamówienia jest przygotowany pod podpięcie płatności Stripe.

Przewijana w poziomie historia procesu tłumaczy, za co klient płaci, zanim dotrze do cen.
Filtry zapisują się w adresie strony, więc klient może wysłać znajomemu link do gotowego wyboru.
Karta produktu od razu liczy cenę wariantu i pokazuje oszczędność na paczce 1 kg, co zachęca do większego zamówienia.

Efekt

Marka może sprzedawać online o każdej porze i docierać poza swój region, a zdjęcia i historia palarni budują zaufanie, którego mała marka potrzebuje w sieci. Podpowiedzi o oszczędności na większej paczce i progu darmowej dostawy zachęcają do większych zamówień.

Historia palarni opowiedziana zdjęciami buduje zaufanie, którego mała marka potrzebuje, żeby sprzedawać w sieci.
Koszyk podpowiada, ile brakuje do darmowej dostawy, i prowadzi prosto do zamówienia.

Strzałki w lewo i w prawo zmieniają ujęcie. Escape zamyka podgląd.

Chcesz podobny projekt?

Opowiedz mi o swojej firmie. Przygotuję bezpłatną wycenę i propozycję rozwiązania.

Wyceń projekt