Naciśnij, a się ugnie
Naciśnij siedzisko, a zapadnie się pod dłonią i powoli wróci do kształtu jak pianka z pamięcią. Twarde, średnie i miękkie wypełnienie ugina się każde na swój sposób.
Projekt koncepcyjny
Kanapa
Konfigurator modułowej sofy premium. Złóż ją z gotowego układu albo moduł po module, obij jedną z sześciu tkanin, a potem podejdź tak blisko, że zobaczysz splot i naciśniesz poduszki.
Wypróbuj Kanapę na żywo (otwiera się w nowej karcie)
Na żywo w przeglądarce, nie film. Otwiera się w nowej karcie, po polsku, i sam dobiera jakość do urządzenia.
Marka Kanapa, jej tkaniny i ceny są fikcyjne. Stworzyliśmy je, żeby pokazać, co potrafimy. Ceny są orientacyjne, nic tu nie jest sprzedawane, a przycisk „Poproś o wycenę” niczego nie wysyła.
- Produkt
- Sofy modułowe
Wyzwanie
Sofę wybiera się dłońmi
Sofę wybiera się dotykiem. Klient siada, przesuwa dłonią po tkaninie i ogląda szwy. W sklepie internetowym dostaje tylko zdjęcie jednego układu w jednym obiciu.
Przy sofach modułowych jest jeszcze trudniej. Układów są dziesiątki, obić sześć, a kolorów wiele. Żadna sesja zdjęciowa nie pokaże wszystkiego. Kanapa pozwala klientowi złożyć sofę, a potem obejrzeć ją z bliska.
Podejście
Najpierw detale, potem przyciski
Zaczęliśmy od tego, co klient sprawdza w salonie. Tkaniny powstały ze skanów prawdziwych materiałów, więc bouclé widać jako pętelki, a w lnie zgrubienia nici. Każdy szew obszywa lamówka, a poduszka ugina się pod dłonią i powoli wraca do kształtu.
Każda sofa powstaje z jednego systemu modułów: siedzisk, podłokietników, wałków i poduszek oparcia na siatce co 250 mm. Reguły decydują, co gdzie może stanąć, więc każdy układ klienta da się naprawdę wyprodukować.
Katalog to dane, oddzielone od sceny. Moduły, tkaniny, kolory i grupy cenowe producenta to zmiana danych. Dzięki temu konfigurator działa pod własną marką (white label).
Studio jest spokojne, żeby sofa była najważniejsza. Białe wnętrze otacza ją ze wszystkich stron, kamera krąży wokół niej i płynnie przechodzi między wybranymi ujęciami. Na laptopie jest jeden panel, na telefonie jeden wysuwany arkusz.
Co można w nim zrobić
Sześć obić, każde w swoich kolorach
Szenil żakardowy, bouclé, len z domieszką, welur, wełna i skóra półanilinowa. Każde obicie ma sześć albo siedem kolorów, a każda próbka jest wycięta z samej tkaniny.
Ułóż moduły po swojemu
Dodawaj, przesuwaj i obracaj moduły na podłodze. Wybierz, co biegnie wzdłuż każdej krawędzi: wałek, podłokietnik albo nic. Ruch, po którym sofy nie dałoby się zbudować, jest odrzucany.
Krok po kroku
Tryb „Konfiguruj krok po kroku” pyta po kolei o kształt, obicie, kolor, wypełnienie, krawędzie i poduszki. Podsumowanie zbiera wszystkie wybory, a każdy można zmienić.
Dziewięć układów na start
Sofy dwu- i trzyosobowe, narożniki, sofy z szezlongiem i dwie wyspy, a do każdej można dodać puf. Każdy układ to punkt wyjścia, który da się przestawić.
Przewodnik po detalach
Cztery krótkie kroki przybliżają kamerę: do splotu, do szwów, do poduszki, którą można nacisnąć, i do lamówki w kontrastowym kolorze.
Cena na bieżąco i wycena
Wycena zmienia się z każdym modułem, obiciem, kolorem, wypełnieniem i lamówką, a obok niej widać czas realizacji. Wycena wymienia każdy element z ceną.
Link do sofy
Każda sofa, także ułożona ręcznie, ma link, który otwiera ją ponownie dokładnie taką samą, w tym samym języku.
Płynnie także na telefonie
Kanapa dobiera jakość do urządzenia i obniża ją, gdy sprzęt zaczyna nie nadążać. Na telefonie panel staje się jednym arkuszem, a gdy nic się nie rusza, studio przestaje rysować.
Od całego pokoju po pojedynczą nić
Kanapa · Sofa dwuosobowa z pufem, szenil żakardowy Szron 
Kanapa · Narożnik lewy, bouclé Kłębek w kolorze Kamień, lamówka ecru 
Kanapa · Szenil żakardowy Szron z odległości dłoni
Jak jest zbudowany
- React Three Fiber i three.js
- Studio, sofa i każda tkanina rysowane w WebGL 2.
- React i TypeScript
- Panel, edytor, przewodnik, tryb krok po kroku i cena, otypowane od początku do końca.
- Rapier
- Fizyka, dzięki której poduszki dekoracyjne układają się tam, gdzie się opierają.
- zustand
- Wspólny stan sofy, tkaniny, kamery i nacisku. Scena płynnie podąża za każdą zmianą.
- Tailwind CSS, Radix i Motion
- Kontrolki na dostępnych komponentach bazowych, dopasowane do marki, z animacją sprężystą.
- Vite
- Statyczny build. Bez serwera.
Co to oznacza dla Twojego produktu
Kanapa pokazuje sofy, ale jej części są uniwersalne. To zestaw modułów i reguły między nimi, tkaniny, które bronią się z odległości dłoni, katalog jako dane oraz cena na bieżąco z czasem realizacji.
Zamień sofę na łóżka, szafy albo szafki kuchenne: system zostaje, a my modelujemy Twój asortyment. Napisz, co produkujesz, a pokażemy, czego by to wymagało.
Wypróbuj Kanapę na żywo
Na żywo w przeglądarce, nie film. Otwiera się w nowej karcie, po polsku, i sam dobiera jakość do urządzenia.
Studio 3D pobiera się dopiero po naciśnięciu przycisku.
Chcesz taki dla swojej kolekcji?
Napisz, co produkujesz i gdzie sprzedajesz. Odpowiemy w ciągu kilku dni roboczych.
Opowiedz o swoim produkcie