Obok
Pulpit, który żyje razem z pogodą za oknem.
2026 · projekt własny · projekt, assety, kod, wdrożenie
W skrócie
Problem
Strony z pogodą i „dashboardy” wyglądają tak samo – tabelki i ikonki. Chciałem sprawdzić, czy codzienne informacje mogą być doświadczeniem, a nie listą.
Rozwiązanie
Pulpit w stylu systemu operacyjnego nad żywym krajobrazem latarni, który zmienia się z prawdziwą pogodą i porą dnia. Codzienne rzeczy – pogoda, przypomnienia, zakupy, rynki, wiadomości, muzyka – jako aplikacje w oknach.
Moja rola
Wszystko: koncepcja, makiety, assety wizualne, frontend, integracje, wdrożenie.
Wyzwanie
Zrobić stronę, która wygląda jak scena z filmu, a jednocześnie działa jak narzędzie: ładuje się szybko, nie zawiesza się, gdy któreś API nie odpowie, i jest wygodna na telefonie. Każdy efekt musiał mieć powód i zmieścić się w 60 klatkach na sekundę.
Najciekawsze rozwiązania
01Świat zależny od pogody
Pięć scen (słońce, chmury, deszcz, pogodna noc, pochmurna noc) jako zapętlone wideo, dobierane według prawdziwej pogody i pory dnia w lokalizacji użytkownika. Przejścia między scenami bez przeskoku, poster jako pierwszy kadr, żeby nic nie migało przy ładowaniu.
02Dane na żywo, które się nie psują
Pogoda, kursy walut i kryptowalut, wiadomości i muzyka z kilku publicznych API. Każde źródło ma cache i zapasowego dostawcę, a dane są walidowane, zanim trafią do interfejsu. Gdy coś nie odpowie, okno pokazuje ostatnie dane zamiast błędu.
03Aplikacje w oknach
Okna jak w systemie: otwieranie, przenoszenie, kolejność, skróty klawiszowe, a na telefonie arkusze od dołu. Przypomnienia z kalendarzem, lista zakupów, rynki z wykresem i alertami cenowymi, wiadomości z podziałem Polska/Świat.
04Spotlight z szybkimi poleceniami
Jedno pole, w którym wpisujesz „dodaj mleko i jajka do listy” albo „przypomnij jutro o 8 o dentyście”, a Obok zamienia to na akcję w odpowiedniej aplikacji.
Assety
Krajobrazy i animacje sceny przygotowałem sam: najpierw kadr, potem animacja, potem obróbka pod web – bezszwowe pętle, poster z pierwszej klatki, kompresja pod szybkie ładowanie. Jeden kadr bazowy dla wszystkich warstw, żeby sceny pasowały do siebie co do piksela.
Słońce 
Chmury 
Deszcz 
Pogodna noc 
Pochmurna noc
Technologie
Next.js · TypeScript · Tailwind · Motion · Zustand · Zod · REST · Vitest · Playwright · Vercel
Liczby
- 95Lighthouse wydajność (desktop)
- 5scen pogodowych
- 6aplikacji
- kilka źródeł danych na żywo z zapasowymi dostawcami
- 60 fpsanimacji interfejsu na typowym laptopie
Czego się nauczyłem
Że „wow” robi się w szczegółach, których nikt nie zauważa, dopóki ich nie zabraknie: poster, który nie miga, okno, które nie znika przy błędzie API, pętla bez przeskoku. I że najtrudniejsze w efektownej stronie jest to, żeby nadal była szybka.