HOUSE 10. Architektura w ruchu

Dom, który prowadzi wzrok dalej

Na początku jest jeden kadr: dom po zmroku, światło w oknach i basen przed fasadą. Można zatrzymać się na tym obrazie. W HOUSE 10 ruch palca lub kółka myszy robi jednak to, co w filmie robi montażysta — wybiera następne ujęcie. Kamera zbliża się do budynku, a kolejne rozdziały zwracają uwagę na podejście, granicę między wnętrzem a ogrodem, materiały i światło.

Chciałem sprawdzić, czy prezentacja architektury może mieć tempo opowieści, nie odbierając odbiorcy kontroli. Dlatego film nie biegnie sam: kierunek i prędkość wyznacza przewijanie. Można przystanąć przy detalu, cofnąć do poprzedniego ujęcia albo uruchomić automatyczną podróż.

Scroll jako oś czasu filmu

Przewijanie wideo klatka po klatce potrafi się zacinać. Tutaj materiał jest rozłożony na 240 obrazów WebP. Przeglądarka dekoduje je poza głównym wątkiem, a WebGL płynnie łączy dwa sąsiednie kadry według pozycji strony. Dzięki temu nawet powolny ruch kółka nie musi oznaczać skoku obrazu.

Tekst pojawia się w rytmie ujęć, bez ciężkich paneli zakrywających dom. Pod podpisami film miejscowo ciemnieje i mięknie, aby litery dało się przeczytać także na jasnym tle. GSAP ScrollTrigger pilnuje rozdziałów, a Lenis odpowiada za płynność przewijania.

Kiedy obraz przestaje być obrazem

Po ostatnim rozdziale kadr zaczyna pękać na punkty światła. Cząsteczki nie są osobną dekoracją nałożoną na film: biorą pozycję i kolor z jego pikseli. Ta sama mapa steruje chwilą, w której cząsteczka się pojawia i odpowiadający jej fragment obrazu znika. Najpierw rozpadają się krawędzie, potem reszta sceny; przez szczeliny widać przestrzenne słowa ARCHITECTURE IN MOTION.

To przejście ma swoją rolę w historii strony. Oddziela filmową wizytę przy domu od drugiej części, w której można przyjrzeć się idei projektu.

Monografia, po której porusza się kamera

Za filmem nie czeka zwykła lista sekcji. Tytuł, manifest, trzy etapy, zestawienie materiałów i finałowy cytat stoją pod różnymi kątami w przestrzeni CSS 3D. Przewijanie prowadzi kamerę po zaplanowanej krzywej: mija teksty i obrazy, patrzy z góry na siatkę materiałów, po czym wraca nad basen.

Elementy mają głębię, ale pozostają tekstem HTML — można je zaznaczyć i odczytać. Gdy przewiniesz stronę wstecz, kamera wraca po tej samej trasie. Całość działa w czystym HTML, CSS i JavaScript, bez frameworka i kroku budowania.

Projekt koncepcyjny, prawdziwy eksperyment z interakcją

HOUSE 10 nie dokumentuje wybudowanego domu. Film powstał z użyciem AI, a opisy budynku i materiałów są częścią koncepcji prezentacyjnej. Rzeczywistym przedmiotem projektu jest sposób opowiadania: synchronizacja obrazu, tekstu i kamery z gestem przewijania.

Najlepiej otworzyć demo i samemu zmienić tempo. Kod oraz opis techniki są dostępne w repozytorium. Pierwsze wejście pobiera około 42 MB klatek, a na słabszym sprzęcie efekty 3D mogą działać mniej płynnie.