Skrzypek. Naprawa obuwia

Problem

Ryszard Skrzypek's workshop at Nowy Świat 34 has been open for over fifteen years and holds 5.0 from 125 Google reviews. It has no site of its own. It exists online only through directories: Cylex, Yelp, top100.pl. Someone looking for a cobbler in the city centre finds an address and opening hours, not a reason to walk into this one.

Solution

A static site where scrolling drives one continuous camera flight through a miniature of the workshop: three scenes with no cut, from the tenement front through the door to the workbench. Below the film sits the whole informational part: what gets repaired, three steps, reviews, hours and a map. No backend, no build step, no dependencies. The owner gets files that will stand up anywhere.

What it does

• Scrolling drives the camera through three scenes with no cut: the front, the door, the workshop
• Each scene's copy rises and fades in step with the camera; the last one holds the phone number
• Below the film, the whole informational part: services, three steps, reviews, contact with a map
• The phone number is tappable everywhere, and the map comes from Google Maps
• The business in schema.org LocalBusiness: hours, address and rating go straight into search results
• Dot navigation down the right: a click lands in the middle of the scene you picked
• A lighter mode on phones: no particles, a coarser seek step, copy against the bottom edge

How it's built

• Three files and an asset folder: index.html carrying all the copy and styles, scrub-engine.js, three mp4 clips and three webp posters
• The engine builds its own DOM and injects its own CSS inside a cascade layer, so the page's tokens always beat its defaults
• Scroll maps onto the video's playback time; the clip is loaded as a Blob, so the host never has to answer an HTTP range request
• The frame chases its target by interpolation, and no new seek is issued while the decoder is still busy. Without that a fast flick freezes the clip on a phone
• iOS will not paint a muted video without a gesture, so the first touch plays and pauses every clip that has loaded
• A scene's poster stays on top until the video paints its first real frame
• The informational part sits above the engine's layers and slides over the film like a curtain
• A height-only change is ignored on touch: a phone's address bar reports a resize, and recomputing would yank the scroll position

How it looks

The opening scene: the tenement front on Nowy Świat, a boot for a shop sign, the camera still outsideThe second scene: the camera in the workshop doorway, racks of shoes, a stool, the bench behind themThe last scene: a polished shoe on the bench under a row of tools, beside the phone number and a link to the servicesThe services block: six entries set as a craftsman's menu rather than a grid of cardsContact: the address, the opening hours and the map

What it changed

• A workshop holding 5.0 from 125 reviews after fifteen years existed online only inside other people's directories. This gives it an address of its own instead of an entry in a listing site
• Not deployed: no traffic and no phone calls to report, because the owner has not seen it yet
• What it costs the owner to keep: static hosting, no dependencies, no build step
• 10.0 MiB of video and 309 KiB of posters, the whole site, without a byte of dependency
• Both seams between clips are frame-locked: PSNR 22.4 and 22.3 dB on an identical composition
• Clips encoded for scrubbing: native 720p, CRF 20, GOP 8, faststart, no audio

Stack

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

Story

Nobody asked for this site. I picked the workshop off a list of Warsaw businesses with no site of their own and built the whole thing on spec, so there would be something to show the owner. That is why it still carries noindex, a preview mark in the corner, and business details to be confirmed at the counter. The film is generated: one opening image, three five-second flights, and each scene's poster cut from the last frame of the one before it, which is why the seams line up on composition. There is not one dependency: it is three files that open off a disk.