Projekt koncepcyjny

Louver

Konfigurator rolet i żaluzji premium. Salon renderowany na żywo w przeglądarce, w którym każda roleta, godzina, pora roku i widok za oknem zmienia światło. Cena nadąża za każdym wyborem.

Wypróbuj Louver 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 Louver, jej kolekcje i ceny są fikcyjne. Stworzyliśmy je, żeby pokazać, co potrafimy. Nic tu nie jest sprzedawane, a przycisk „Zamów wycenę” niczego nie wysyła.

Produkt
Rolety i żaluzje
Cały ekran konfiguratora Louver w zimowe popołudnie. Panel „Light & room” po lewej ma gotowe ustawienia światła oraz kąt nachylenia lamel i wysokość żaluzji. Panel po prawej podaje styl, kolekcję, kolor, szerokość lamel, wymiar okna i osprzęt drewnianej żaluzji, a pod spodem wycenę na 4298 zł.
Louver · Konfigurator, światło po lewej, żaluzja i cena po prawej

Wyzwanie

Zdjęcie nie pokaże, jak roleta zmienia pokój

Roletę kupuje się dla światła, które wpuszcza. Klient chce wiedzieć, jak transparentna tkanina zmiękcza poranek, jak lamele kładą pasy na podłodze po południu i czy wieczorem nikt nie zajrzy do środka.

Zdjęcia produktu pokazują jedno wykończenie, o jednej porze, w jednym pokoju. Kolekcja premium to setki kombinacji. Louver odpowiada na te pytania w przeglądarce klienta.

Podejście

Najpierw światło, potem cała reszta

Zaczęliśmy od światła, nie od przycisków. Tor słońca wynika z godziny, pory roku i kierunku okna, a plama światła przesuwa się po podłodze, gdy klient przeciąga suwak czasu.

Każda roleta i żaluzja powstaje w 3D z danych katalogowych: lamele, pionowe pasy, plisy i tkanina. Każdy materiał inaczej reaguje na światło: tkanina transparentna prześwituje pod słońce, a zaciemniająca pogrąża pokój w półmroku.

Katalog to dane, oddzielone od sceny. Produkty, materiały, kolory i ceny nowej marki to tylko zmiana w danych i właśnie dlatego konfigurator może działać pod dowolną marką (white label).

Sterowanie jest dyskretne, żeby pierwszy plan należał do pokoju: dwa panele na laptopie, jeden wysuwany panel na telefonie i cztery ujęcia kamery dobrane do tego, co pokazują. Pokój, okno, sofa i podłoga.

Co można w nim zrobić

Pięć rodzajów, jedenaście kolekcji

Żaluzje poziome z aluminium, naturalnego drewna i materiału drewnopodobnego. Żaluzje pionowe z PVC, tkaniny i tkaniny transparentnej. Rolety materiałowe, plisy i rolety dzień-⁠noc. Każda powstaje z danych katalogowych, a nie z gotowego modelu.

Louver · Żaluzja pozioma, transparentna żaluzja pionowa, roleta w kolorze gliny, plisa, roleta dzień-⁠noc, 13:45, zima
Louver · Żaluzja z naturalnego drewna, okno na południe, zima, od 10:30 do 14:36

Słońce według zegara

Przesuń suwak czasu od wschodu słońca do nocy. Wybierz porę roku, kierunek okna i niebo, czyste albo zachmurzone. Lamele rzucają ostre pasy przy oknie i coraz miększe w głębi pokoju.

Louver · Od zmierzchu do nocy, lampy włączone, roleta zaciemniająca opuszczona, widok na miasto, lato

Lampy i prywatność nocą

Zapal lampę wiszącą i stojącą. Po zmroku to one budują nastrój wnętrza, a opuszczona roleta pokazuje, jak dobrze chroni pokój przed spojrzeniami.

Louver · Konfiguracja krok po kroku: roleta w kolorze Glina z napędem elektrycznym, wpisany wymiar okna 180 × 160 cm, podsumowanie z ceną 4 569 zł

Pytanie po pytaniu

Przycisk „Start configuring” uruchamia tryb, który zadaje pytania po jednym, a kamera i światło ustawiają się tak, żeby pokazać odpowiedź. Podsumowanie zbiera każdy wybór razem z ceną.

Karta przewodnika nad podłogą: „9:15 pm · Summer”, tytuł kroku „Dusk falls, the lamps glow”, krok 5 z 8 ze znacznikami postępu, strzałka wstecz, przyciski „Next” i „Exit tour”.
Louver · Przewodnik, krok 5 z 8

Przewodnik

Osiem krótkich rozdziałów opowiada historię: zimowe słońce, które sięga dalej, szare dni, długie letnie wieczory, prywatność po zmroku. Każdy rozdział ustawia kamerę, światło i roletę. Po zakończeniu pokój wraca do Twoich ustawień.

Kolumna z ceną w podsumowaniu konfiguratora Louver. Okno 1, 180 × 160 cm, kosztuje 3251 zł, a okno 2, 120 × 160 cm, 2303 zł. Razem 5554 zł.
Louver · Cena w podsumowaniu, dwa okna, każde z własnym wymiarem

Cena na bieżąco, nawet dla trzech okien

Cena zmienia się z każdym wyborem: rodzajem, materiałem, kolorem, dodatkami i wymiarem. Wymiary każdego okna wpisujesz w centymetrach albo calach, a wycena obejmuje do trzech okien. Model wyceny obsłuży też własne tabele cenowe marki (szerokość × wysokość).

Trzy widoki, każdy z własnym światłem

Ogród, miasto za rzeką albo panorama z 35. piętra, wszystkie zbudowane w 3D. Każdy widok barwi światło, które wpada do pokoju, a o zmierzchu w oknach miasta zapalają się kolejne światła.

Także na telefonie

Louver dobiera poziom jakości do urządzenia i obniża go, gdy urządzenie przestaje nadążać. Na telefonie dwa panele zamieniają się w jeden, który przesuwasz palcem w górę i w dół. Tablet ma własny układ, a każdy przycisk jest na tyle duży, że łatwo w niego trafić palcem.

  • Salon w konfiguratorze Louver wiosennym rankiem. Wschodnie okno zasłania roleta dzień-⁠noc, a niskie słońce przechodzi przez jej transparentne pasy i kładzie miękkie ukośne smugi na sofie, ścianie i dywanie.
    Louver · Roleta dzień-⁠noc, 8:00, okno na wschód, wiosna
  • Salon w zimowe popołudnie. Biała drewniana żaluzja jest opuszczona, lamele są otwarte, a niskie słońce kładzie ostre pasy światła na sofie, ścianie nad nią i dywanie.
    Louver · Żaluzja z naturalnego drewna, 13:45, okno na południe, zima
  • Salon nocą, z zapaloną lampą wiszącą i stojącą. Roleta zaciemniająca w kolorze kamienia zakrywa całe okno, więc miasta za szybą nie widać, a pokój jest osłonięty od spojrzeń.
    Louver · Roleta zaciemniająca, lampy włączone, 22:00, widok na miasto

Jak jest zbudowany

React Three Fiber i three.js
Pokój, słońce i każda roleta, renderowane w WebGL 2.
React i TypeScript
Panele, przewodnik, tryb krok po kroku i cena, w pełni otypowane.
zustand
Wspólny stan rolety, światła i kamery. Scena płynnie przechodzi w każdy nowy stan.
Tailwind CSS i shadcn/ui
Kontrolki na komponentach Radix, dopasowane do marki i obsługiwane z klawiatury.
Motion
Sprężyste animacje paneli, próbek kolorów i ceny.
Vite
Strona statyczna. Nie potrzebuje serwera.

Co to znaczy dla Twojego produktu

Louver pokazuje rolety, ale jego części są uniwersalne: model światła dziennego, reagujące na nie materiały, katalog jako dane, cena na bieżąco i podsumowanie gotowe do przekazania do koszyka.

Zamień rolety na lampy albo fronty kuchenne – albo na sofy, jak w Kanapie. Katalog i cena na bieżąco zostają, a Twoje produkty wymodelujemy tak, żeby do nich pasowały. Napisz, co produkujesz, a pokażemy, czego by to wymagało.

Wypróbuj Louver na żywo

Na żywo w przeglądarce, nie film. Otwiera się w nowej karcie, po polsku, i sam dobiera jakość do urządzenia.

Wypróbuj Louver na żywo (otwiera się w nowej karcie)

Chcesz taki dla swojej kolekcji?

Napisz, co produkujesz i gdzie sprzedajesz. Odpowiemy w ciągu kilku dni roboczych.

Opowiedz o swoim produkcie