Skrzypek. Naprawa obuwia

Problem

Zakład Ryszarda Skrzypka przy Nowym Świecie 34 działa od ponad piętnastu lat i ma 5,0 ze 125 opinii w Google — i nie ma własnej strony. Istnieje w sieci wyłącznie przez katalogi: Cylex, Yelp, top100.pl. Ktoś, kto szuka szewca w Śródmieściu, znajduje wpis z adresem i godzinami, a nie powód, żeby przyjść akurat tutaj.

Rozwiązanie

Statyczna strona, na której przewijanie steruje ciągłym przelotem kamery przez miniaturowy świat zakładu — trzy sceny bez cięcia, od fasady kamienicy przez drzwi do warsztatu. Pod filmem pełna część informacyjna: co naprawiamy, trzy kroki, opinie, godziny i mapa. Zero backendu, zero kroku budowania, zero zależności — właściciel dostaje pliki, które postawi gdziekolwiek.

Co robi

• Przewijanie steruje przelotem kamery przez trzy sceny bez cięcia: fasada, drzwi, warsztat
• Tekst każdej sceny wjeżdża i gaśnie w rytm kamery; ostatnia scena trzyma numer telefonu
• Pod filmem pełna część informacyjna: usługi, trzy kroki, opinie, kontakt z mapą
• Telefon klikalny wszędzie, mapa dojazdu z Google Maps
• Dane firmy w schema.org LocalBusiness — godziny, adres i ocena idą prosto do wyników wyszukiwania
• Nawigacja kropkami po prawej: klik przeskakuje do środka wybranej sceny
• Wersja mobilna w lżejszym trybie: bez cząstek, rzadszy seek, tekst przy dolnej krawędzi

Na czym zbudowane

• Trzy pliki i katalog assetów: index.html z całą treścią i stylami, scrub-engine.js, trzy klipy mp4 i trzy plakaty webp
• Silnik buduje własny DOM i wstrzykuje własny CSS w warstwie kaskady, więc tokeny strony zawsze wygrywają nad jego domyślnymi
• Scroll mapuje się na czas odtwarzania wideo; klip ładowany jako Blob, więc hosting nie musi obsługiwać żądań zakresowych HTTP
• Klatka goni cel interpolacją, a nowy seek nie idzie, dopóki dekoder nie skończy poprzedniego — bez tego szybkie machnięcie palcem zamraża klip na telefonie
• iOS nie namaluje wyciszonego wideo bez gestu, więc pierwszy dotyk uruchamia i zatrzymuje każdy załadowany klip
• Plakat sceny zostaje na wierzchu, dopóki wideo nie namaluje pierwszej klatki
• Część informacyjna leży nad warstwami silnika i nasuwa się na film jak kurtyna
• Zmiana samej wysokości okna jest ignorowana na dotyku — pasek adresu w telefonie zgłasza zmianę rozmiaru, a przeliczenie szarpałoby pozycją scrolla

Jak to wygląda

Pierwsza scena: fasada kamienicy przy Nowym Świecie, but-szyld nad witryną, kamera jeszcze przed wejściemDruga scena: kamera w progu warsztatu — regały z butami, stołek i blat roboczy w głębiTrzecia scena: wypolerowany but na blacie pod rzędem narzędzi, obok numer telefonu i odnośnik do usługSekcja usług: sześć pozycji spisanych jak menu rzemieślnika, bez siatki kartKontakt: adres, godziny otwarcia i mapa dojazdu

Co to zmieniło

• Zakład z 5,0 ze 125 opinii i piętnastoma latami pracy istniał w sieci wyłącznie w cudzych katalogach — strona daje mu własny adres zamiast wpisu w Cylexie
• Niewdrożona: żadnych liczb z ruchu ani telefonów, bo właściciel jeszcze jej nie widział
• Koszt utrzymania po stronie właściciela: hosting statyczny, zero zależności, zero kroku budowania
• 10,0 MiB wideo i 309 KiB plakatów — cała strona bez jednego bajtu zależności
• Dwa szwy między klipami frame-locked: PSNR 22,4 i 22,3 dB przy identycznej kompozycji kadru
• Klipy enkodowane pod scrubbing: 720p natywne, CRF 20, GOP 8, faststart, bez audio

Stack

• Statyczny HTML
• Vanilla JS
• scroll-world (MIT)
• ffmpeg
• Higgsfield (gpt_image_2, seedance)
• Vercel

Historia

Zakład o tę stronę nie prosił. Wybrałem go z listy warszawskich firm bez własnej witryny i zbudowałem całość na spekulację, żeby mieć co pokazać właścicielowi — dlatego strona ma jeszcze noindex, znacznik wersji poglądowej w rogu i dane firmy do potwierdzenia przy ladzie. Film jest generowany: jeden obraz startowy, trzy pięciosekundowe przeloty, a plakaty kolejnych scen wycięte z ostatnich klatek poprzednich — dlatego szwy schodzą się co do kompozycji. Zależności nie ma żadnej: to trzy pliki, które otwierają się z dysku.