C3S (Clever Code Craft Studio) to studio, które prowadzę z Romualdem Karkoszką. Projektujemy i budujemy aplikacje webowe, systemy wewnętrzne i automatyzacje. W październiku 2026 dawną c3s.pl zastąpiła całkiem nowa strona i całkiem nowa koncepcja: zamiast listy usług jest spacer po galerii polskiego malarstwa. Przewijanie prowadzi kamerę po obrazach Chełmońskiego, Matejki, Wyspiańskiego i Mehoffera, między nimi płótno rozpada się na piksele, raster i tusz, a kustosz szeptem opowiada, jak pracujemy.
Ta strona jest w dziesiątce finalistów Kursorów Roku 2026 w kategorii WWW Roku. Poniżej opisuję, skąd ten pomysł, jak strona działa pod spodem i co oceniało jury.
W finale Kursorów Roku 2026
Kursory Roku to ogólnopolski konkurs dla twórców, marek i przedsiębiorców. Organizuje go placówka oświatowa Jestem Interaktywna, matronat medialny ma magazyn GIRLBOSSKIE, a partnerem kategorii WWW Roku jest LH.pl. Kategoria nagradza „najlepszą stronę internetową stworzoną dla siebie albo dla kogoś innego”. Według regulaminu jury ocenia wykonanie, oryginalność pomysłu, wartość merytoryczną, użyteczność i realny wpływ.
Według organizatorów w tej edycji oddano 94 780 głosów, sylwetki kandydatów obejrzano 186 478 razy, a jury obradowało przez tydzień. Kandydaturę C3S reprezentuje Romuald. Laureatów poznamy 7 grudnia 2026 na gali w Collegium Da Vinci w Poznaniu.
Całkiem nowa strona i całkiem nowa koncepcja
Dawną c3s.pl wymieniliśmy w całości: nowy układ, nowe teksty, nowa grafika i nowy kod. Z dawnej strony zostały tylko wpisy bloga - 26 po polsku i 26 po angielsku - pod tymi samymi adresami co wcześniej.
Strona studia programistycznego zwykle wygląda tak samo: lista usług, zrzuty paneli, logotypy technologii. Poszliśmy w drugą stronę. Każdy rozdział stoi na jednym obrazie polskiego malarza i niesie jedną myśl o tym, jak pracujemy. Gatunek - stronę, którą ogląda się jak film przewijany - podpatrzyliśmy na pear.no. Kod, układ i grafika są nasze.
Koncepcję wymyśliliśmy razem z Romualdem. Ja ją zaprojektowałem i zbudowałem, Romuald użyczył głosu kustoszowi.
Sześć rozdziałów, siedem obrazów
| Rozdział | Obraz | Myśl |
|---|---|---|
| I Zaproszenie | Józef Chełmoński, „Bociany”, 1900 | „Pług poczeka.” Powtarzalną robotę zrobi maszyna. |
| II Clever | Jan Matejko, „Stańczyk”, 1862 | „Clever to nie spryt, tylko zobaczyć problem, zanim zrobi się kosztowny.” |
| II Code | Stanisław Wyspiański, „Apollo. System Kopernika”, 1904 | „Tak piszemy kod: z części, które da się wymienić bez rozbijania całego okna.” |
| II Craft | Józef Mehoffer, „Dziwny ogród”, 1902-1903 | „W oprogramowaniu detale też widać dopiero wtedy, gdy ich brakuje.” |
| III Proces | Jan Matejko, „Zawieszenie dzwonu Zygmunta”, 1874 | „Najpierw plan. Potem liny.” |
| IV Kolekcja | magazyn prac studia | „Jedyne eksponaty w tej galerii, które zrobiliśmy sami.” |
| V Warunki | Stanisław Noakowski, szkic z 1916 r. | „Plany zostają u Ciebie.” Kod, dane i prawa autorskie po stronie klienta. |
| VI Rozmowa | Jan Matejko, „Astronom Kopernik”, 1873 | „Kopernik też miał pomysł na system. Porozmawiajmy o Twoim.” |
Reprodukcje pochodzą z Wikimedia Commons i z Cyfrowego Muzeum Narodowego w Warszawie i są w domenie publicznej. Podpisy - tytuł, datowanie, zbiory - sprawdziliśmy w katalogach instytucji, które przechowują dzieła. Dwa obrazy pokazujemy inaczej niż w oryginale i mówią o tym podpisy: z „Dziwnego ogrodu” tylko fragment, a szkic Noakowskiego na poszerzonym arkuszu, żeby obok zmieścił się tekst.
Obraz, który rozpada się na piksele
Za tekstem leży jedno płótno WebGL na cały ekran. Pozycja przewinięcia wyznacza, który obraz widać, gdzie patrzy kamera i w jakiej fazie jest przejście do następnego obrazu. Przewijanie zostaje zwykłe - strona go nie przejmuje, więc kółko myszy, gładzik i palec działają jak na każdej innej stronie.
Między obrazami płótno rozpada się na piksele, raster i tusz. Nagłówki wchodzą wyraz po wyrazie, a animowane są tylko przezroczystość i przesunięcie. Nic nie jest przycinane, więc ogonki polskich liter są całe w każdej klatce. Skok do odległego rozdziału z menu to cięcie, a nie przewijanie przez wszystkie sceny po drodze.
Trzy tryby: film, spokój i zwykła strona
Film to tylko jedna z trzech postaci tej samej strony:
- Filmowy - gdy przeglądarka ma WebGL2 i kartę graficzną.
- Filmowy spokojny - gdy ktoś ograniczył ruch w ustawieniach systemu: kamera stoi, nie ma pikseli ani rastra, obrazy zmieniają się zwykłym przenikaniem, a tekst pojawia się bez animacji.
- Zwykła strona - bez WebGL2 albo bez JavaScriptu: te same obrazy i cała treść jako przewijane plansze.
Zwykłą stronę dostają też przeglądarki, w których grafikę liczy sam procesor: maszyny wirtualne, komputery z wyłączoną akceleracją i roboty mierzące szybkość, w tym PageSpeed Insights. Scena WebGL blokowałaby tam stronę na całe sekundy. Mówię to uczciwie: wynik PageSpeed dotyczy więc zwykłej wersji, a nie filmu.
Pierwszy ekran jest gotowy od pierwszego malowania. Tekst nie czeka na skrypt, pod obrazem od razu widać jego rozmyty podgląd zapisany w HTML, a grafika 3D uruchamia się dopiero po pokazaniu pierwszego ekranu.
Kustosz, który szepcze
Lektor szeptem wita gościa i czyta kolejne plansze, a napisy końcowe zwykłym głosem. To głos Romualda: nagrania powstały w ElevenLabs na klonie jego głosu, krótkimi frazami. Do pliku trafia tylko ujęcie, w którym cztery automatyczne kontrole nie słyszą dźwięcznego głosu, a rozpoznawanie mowy słyszy właściwe słowa. W każdym języku jest ponad dwadzieścia nagrań.
Głos zaczyna dopiero po pierwszym kliknięciu, bo przeglądarki nie pozwalają odtwarzać dźwięku bez gestu użytkownika. Przycisk „Włącz głos / Wycisz” jest w górnym pasku, a wybór zostaje zapamiętany. Plansza jest czytana, gdy zostanie na ekranie przez niecałe pół sekundy, więc kto przewija szybko, nie słyszy urywków. Nagrania pobierają się dopiero wtedy, gdy są potrzebne.
Kolekcja: osiem naszych prac
Rozdział IV to magazyn. O ciemną ścianę stoją oparte wydruki prac studia z etykietami inwentarzowymi. Przegląda się je strzałkami, przesunięciem palca albo klawiszami, a lektor czyta opis tej, którą widać. Każda praca czeka pod płótnem i odsłania się, gdy pierwszy raz stanie w stojaku.
W magazynie są: nowa strona Smart Architektura, nowa strona IZAR, Wrocław w 3D, analiza lokalizacji, kwalifikator UKSC, kalkulator szyn prądowych, CRM dla Key Account Managera oraz system sprzedaży i magazynu. Dwie ostatnie to makiety z przykładowymi danymi, reszta to zrzuty działających stron. Strony Smart Architektura i IZAR po odsłonięciu grają jako film: wczytują się z własnymi animacjami, jadą w dół i wracają na górę.
Pod spodem: dla Google, AI i ludzi
- Strona statyczna, bez frameworka i bez kompilacji. Nie ładuje niczego z zewnętrznych serwerów, a kroje pisma (Brygada 1918, Inter, JetBrains Mono) są na serwerze strony, przycięte do łacinki z polskimi znakami.
- Wersja angielska powstaje z polskiej: te same sceny i kadry, inne nagrania. Teksty przeszły trzy niezależne tłumaczenia, wybór najlepszej wersji każdego zdania i korektę.
- Stare adresy działają. Blog z dawnej strony stoi pod tymi samymi adresami, a dawne ścieżki dostały przekierowania. Mapa strony ma 62 adresy z wersjami językowymi.
- Treść dla AI: pliki llms.txt i llms-full.txt w obu językach, a każdy obraz ma opis dla czytników ekranu i dla robotów.
- Asystent „Zapytaj o ofertę” odpowiada na pytania o C3S na podstawie treści strony, czyta odpowiedzi głosem Romualda i przekazuje zapytania na hej@c3s.pl.
- Statystyki tylko za zgodą. Dopóki gość nie kliknie „Zgoda”, strona niczego nie wysyła do Google i nie zapisuje plików cookie.
Czy Twoja strona też musi być filmem?
Nie musi. Większość firm potrzebuje strony szybkiej, czytelnej i znalezionej w Google, a nie sceny w WebGL. Z c3s.pl warto wziąć co innego: stronę, która nie wygląda jak sto innych w branży, ma jeden wyraźny pomysł i nadal działa na słabym telefonie, bez JavaScriptu i dla robotów. Jeśli chcesz pogadać o swojej, porozmawiajmy.
Koncepcja: Romuald Karkoszka i Przemysław Czujowski. Projekt i wykonanie: Przemysław Czujowski. Głos kustosza: Romuald Karkoszka. Obrazy: domena publiczna. Strona: c3s.pl.