Eksperymenty, projekty i pomysły, które wyszły poza fazę notatnika.

Plansza unosi się tuż poniżej linii wzroku (w AR), a obok niej czeka zasobnik z klockami. Budujesz, co tylko zechcesz, a po wciśnięciu „Ready” klocki zyskują masę, w Twoich dłoniach ląduje proca, a gra staje się sprawdzianem wytrzymałości tego, co właśnie stworzyłeś.

• Klocki przyciągają się do siatki co pół komórki – i to swoim dolnym rogiem, a nie środkiem, co znacznie ułatwia wyrównywanie ścian. Jeśli dwa elementy miałyby na siebie najść, podgląd zaświeci się na czerwono. W końcu zamek, który wybucha jeszcze przed pierwszym strzałem, to żaden zamek.
• Mechanika procy naśladuje rzeczywistość: jedna ręka trzyma widełki, drugą musisz sięgnąć po rzemień, a siła strzału zależy od siły naciągu. Grając przy biurku, celujesz wzrokiem i przytrzymujesz spację.
• Werdykt i podliczenie punktów czekają, aż opadnie bitewny pył: gra musi zarejestrować cztery kolejne odczyty całkowitego bezruchu (włączając w to rotację klocków). Kawałek gruzu, który pozornie się zatrzymał, może za ułamek sekundy przeważyć i oprzeć się o sąsiada.

• TypeScript
• WebXR
• three.js
• Fizyka Rapier
• RxJS
• Własna biblioteka sygnałów
• Własny renderer reaktywny

Kompaktowy język przypominający podręcznikowe instrukcje geometrii – punkty, proste, okręgi i ich przecięcia. Wpisujesz linijkę kodu, a figura rysuje się na ekranie. Z kolei jeśli konstruujesz ręcznie (klikając narzędziami), instrukcje dopisują się same w kodzie. Sam język pochodzi ze starego projektu w Meteorze z 2015 roku, ale edytor to całkowita przebudowa z 2026, oparta na bibliotece sygnałów.

• Jedynym źródłem prawdy jest kod. Narzędzia UI nie modyfikują grafu sceny, tylko dopisują instrukcje. Kliknięcie w punkt przecięcia generuje wyrażenie w stylu (c1.c2)[0], a nie sztywne współrzędne XY. Dzięki temu geometria zachowuje pełne relacje.
• Cała matematyka dzieje się na zespolonej płaszczyźnie rzutowej, co eliminuje mnóstwo błędów brzegowych: okręgi, które się mijają, i tak przecinają się w punktach zespolonych, a proste równoległe spotykają się w nieskończoności. Renderer po prostu odfiltrowuje to, co niefizyczne.
• Zaznaczanie działa dwukierunkowo: klikasz okrąg na rysunku – podświetla się jego kod; najeżdżasz kursorem na kod – okrąg na rysunku zmienia kolor na niebieski.

• TypeScript
• SVG
• RxJS
• Własna biblioteka sygnałów
• Własny renderer reaktywny

Dwie armie ścierają się na heksagonalnej planszy, ruch po ruchu. Oddział, którego wypada tura, podświetla się na czerwono, a wokół niego widać zasięg ruchu: kliknij, aby go tam wysłać, albo wskaż wroga – rycerze podejdą, uderzą, a przeciwnik odda tym, co mu zostało z oddziału. Grasz przeciwko sztucznej inteligencji lub ze znajomym przy jednej klawiaturze („gorące krzesła”).

• Pierwowzorem projektu był „KnightsJS” – zrobiony w 2016 roku w stacku Meteor + React + Redux na prelekcję krakowskiego meetupu JS. Tutaj ta sama gra opiera się na rdzeniu sygnałowym. Stan gry siedzi w zwykłych klasach, derywacje to memoizowane gettery, a przeliczają się tylko te wiązania, których wartości faktycznie się zmieniły.
• Ruch postaci odgrywany jest jak scenariusz: podejdź, wyląduj, uderz, przyjmij cios, oddaj. Co ciekawe, animację można przerwać w połowie, a stan aplikacji się od tego nie posypie.
• Algorytm przeciwnika przewiduje o jedną turę do przodu. Wycenia każdą potencjalną wymianę (zadane obrażenia w stosunku do otrzymanych), a kiedy żadna mu się nie opłaca – po prostu maszeruje w stronę najbliższego wroga.

• TypeScript
• SVG
• RxJS
• Własna biblioteka sygnałów
• Animacja sprite'ów

Klasyczna pierwsza aplikacja potraktowana jako ćwiczenie z renderowania. Na stronie to czysty DOM spięty sygnałami – komponenty są zwykłymi funkcjami, aktualizacje trafiają prosto w atrybuty i węzły tekstowe, a pod spodem nie ma żadnego frameworka. W goglach ta sama lista staje się unoszącym się panelem: każdy widżet to nadal zwykły HTML i CSS rzutowany w scenę, łącznie z wirtualną klawiaturą, która rozkłada się pod polem tekstowym jak telefon na podstawce.

• Wersja przeglądarkowa celowo wstrzymuje treść o sekundę, żeby pokazać mechanizm suspense bez frameworka: pasek postępu dostaje dokładnie ten sam czas trwania, więc wypełnia się w chwili, gdy lista zadań się pojawia.
• W goglach lista siedzi za przewijanym oknem, a portal przycina wszystko poniżej krawędzi – niewidoczne wiersze nie są rysowane i nie łapią promienia kontrolera, więc przycisku Delete przewiniętego poza widok nie da się nacisnąć przez przypadek.
• Dotknięcie pola tekstowego przywołuje klawiaturę na osobnym portalu, pochyloną w stronę dłoni. Przy dziesięciu kolumnach w rzędzie każdy klawisz ma w scenie około czterech centymetrów szerokości – więcej niż prawdziwy, bo taki właśnie chce być cel na końcu promienia. Panel i klawiatura nie współdzielą niczego poza obiektem stanu.

• TypeScript
• WebXR
• three.js
• RxJS
• Własna biblioteka sygnałów
• Własny renderer reaktywny
• PWA

Poligon doświadczalny renderera DOM-do-sceny, na którym zbudowane są pozostałe dema na gogle. Cztery panele wiszą w płytkim kokpicie – interakcje, obrazki, samoczynny ruch i model pudełkowy – a każdy z nich to zwykły HTML i CSS rzutowany przez własny portal. Wyceluj promieniem w przycisk, a przestylizuje się dokładnie tymi samymi przejściami CSS, które odtworzyłoby najechanie myszką – klatka po klatce, wewnątrz sceny.

• Przyciski odpowiadają na promień kontrolera tak samo jak na mysz: najechanie i wciśnięcie przestylowują element przez atrybuty danych, a każda zmiana transformacji czy koloru się animuje – przejścia CSS odgrywane w scenie three.js.
• Panel ruchu trzyma po jednym okazie na każdy mechanizm animacji: klatki kluczowe CSS, Web Animations API i pętlę klatek zapisującą style inline. Ten ostatni bierze klatki z sesji XR, a nie ze strony, bo gdy gogle przejmują wyświetlacz, strona przestaje się renderować – i pasek oparty o requestAnimationFrame po prostu by zamarł.
• Oba błędy renderowania, które ten projekt faktycznie wypuścił, przeszły wszystkie testy jednostkowe i wyłapał je dopiero człowiek patrzący na scenę. Suita wizualna to właśnie ten człowiek, zautomatyzowany: emulowane gogle odpowiadające jak Quest 3, każdy zegar zamrożony w pół ruchu, a fotografie porównywane z wzorcami piksel po pikselu.

• TypeScript
• WebXR
• three.js
• RxJS
• Własna biblioteka sygnałów
• Własny renderer reaktywny

Geodezyjna sfera pocięta na zazębiające się odłamki, które unoszą się przed Tobą w przestrzeni. Łapiesz je kontrolerem (lub po prostu dłonią) i przesuwasz, aż sąsiadujące krawędzie wskoczą na swoje miejsce z kliknięciem. Gdy bryła jest kompletna, zaczyna się powoli obracać... i chwilę później pęka na drobniejsze kawałki. Łamigłówka rośnie i komplikuje się tak długo, jak długo masz ochotę grać.

• Grafem sceny zarządza system reaktywny, a nie klasyczna pętla klatek. Siatki, materiały i geometrie są deklarowane jako sygnały, a pamięć zwalniana jest automatycznie, gdy elementy wypadną z grafu.
• Panel statusu to zwykły DOM – wyrenderowany z HTML/CSS, ale rzutowany w trójwymiarową scenę. Dzięki temu laser z kontrolera „klika” w przycisk dokładnie tak samo jak myszka. Napisane raz, obsługuje wszystkie formy interakcji.
• Algorytm podziału wielościanu i sprawdzanie klejenia to czysta, bezstanowa matematyka, odizolowana od kodu sceny i rygorystycznie testowana mechanizmem property-based testing (za pomocą fast-check).

• TypeScript
• WebXR
• three.js
• RxJS
• Własna biblioteka sygnałów
• Własny renderer reaktywny
• PWA

Saper na heksach. Cały interfejs to jeden duży element SVG spięty niewielką, autorską biblioteką sygnałów: wybierasz rozmiar planszy, klikasz lewym by odkrywać, a flagi stawiasz prawym przyciskiem (lub przytrzymując palec na ekranie).

• Zero wirtualnego DOM-u. Reaktywne prymitywy podmieniają atrybuty i węzły tekstowe bezpośrednio w drzewie, a komponenty to zwykłe funkcje zwracające typy Observable.
• Zakryty obszar planszy to nie tysiąc niezależnych sześciokątów, lecz jedna, zintegrowana ścieżka SVG (łącznie ze skomplikowanymi otworami). Dzięki temu plansza zachowuje się i rysuje jako spójna powierzchnia.
• Przeliczanie współrzędnych na piksele, rysowanie konturów i wykrywanie kliknięć zostało wydzielone do osobnego pakietu matematycznego – współdzielonego z innymi aplikacjami opartymi na siatkach (jak np. Knights).

• TypeScript
• SVG
• RxJS
• Własna biblioteka sygnałów
• PWA