Studio WWW Napisz

Studio WWW — projekt i kod

Strony internetowe na zamówienieprojekt, kod i 3D: Strony, które robią robotę.

Nowoczesne strony www i sklepy dla firm — projekt, kod i 3D robione od zera, bez szablonów i bez bibliotek.

Zobacz realizacje Porozmawiajmy

Przewiń — cztery realizacje i rozbiór, co w nich siedzi

— fps bez bibliotek 3D

01Realizacje

Strony 3D i WebGL — rozbiór, nie galeria.

Cztery strony zbudowane od zera: HTML, CSS, JavaScript i własne renderery WebGL2. Pod każdą jest to, co naprawdę siedzi w środku — nie lista życzeń.

Wszystkie cztery to projekty koncepcyjne: marki fikcyjne, zbudowane jako przykłady. Żadna nie jest wdrożeniem dla klienta.

1280 × 800 px Zrzut z gotowej strony, bez mockupu
Zobacz na żywo

Pełna strona w tej karcie, nie zrzut

Pracownia architektoniczna · koncept · 2026

Pryzma

Ciepły papier i serif, a pod nimi przejście 3D: przewijanie prowadzi kamerę przez kolumnadę.

Renderer
Własny WebGL2 w jednym pliku: 25,4 kB, 7,9 kB po gzipie. Żadnej biblioteki 3D.
Przejście
Kamera sterowana przewijaniem — pełnoekranowy przelot przez kolumnadę między sekcjami.
Zasięg
Sprawdzone na 320, 390, 768 i 1440 px. axe-core: 0 naruszeń WCAG 2.1 AA.

StackHTML · CSS · JS · WebGL2 · fonty self-hosted

1440 × 900 px Zrzut z gotowej strony, bez mockupu
Zobacz na żywo

Pełna strona w tej karcie, nie zrzut

Sklep z konfiguratorem 3D · koncept · 2026

WILGA

Ramy rowerowe na miarę: konfigurator 3D, galeria modeli i koszyk, który pamięta wybór po odświeżeniu.

Konfigurator
19 opcji w pięciu grupach; każdy z czterech modeli ma 162 warianty. Rower generowany proceduralnie — bez plików .glb.
Koszyk
Stan w localStorage, odtwarzany po odświeżeniu. Cena liczona z katalogu, nie z tego, co siedzi w przeglądarce.
Waga
Cały sklep to cztery skrypty, 85,3 kB razem. Bez frameworka i bez package.json.

StackHTML · CSS · JS · WebGL2 · localStorage

1440 × 900 px Zrzut z gotowej strony, bez mockupu
Zobacz na żywo

Pełna strona w tej karcie, nie zrzut

Galeria artystki · koncept · 2026

OSTRA

Ciemna galeria ośmiu prac: portal w WebGL i soczewka, która pokazuje detal dopiero pod kursorem.

Portal
Shader WebGL2: mgła z szumu fbm i 18 ramek w perspektywie; przewijanie prowadzi kamerę przez próg.
Soczewka
Powiększenie 2,4× pod kursorem, z rozjazdem kanałów; na fokusie sterowana strzałkami.
Podgląd
Pełnoekranowy podgląd z nawigacją ←/→, Escape i powrotem fokusu na miniaturę.

StackHTML · CSS · JS · WebGL2 · shader

1440 × 900 px Zrzut z gotowej strony, bez mockupu
Zobacz na żywo

Pełna strona w tej karcie, nie zrzut

Studio gier · koncept · 2026

SPIĘCIE

Fikcyjne studio gier: przewijanie prowadzi kamerę przez neonowe miasto 3D w czterech rozdziałach zwiastuna.

Miasto
Własny renderer WebGL2: 1052 budynki, 118 neonów, 380 pojazdów i 1800 kropel deszczu na 1440 px. Bez bibliotek, bez wideo.
Efekty
Mokre odbicia, bloom, rozjazd kanałów i osobna gradacja koloru na każdy rozdział; rozdzielczość spada sama, gdy FPS jest za niski.
Sygnał
Mini-gra z oscyloskopem: zgodność fal liczona na żywo, a rozwiązanie odkodowuje wiadomość. Dźwięk z WebAudio, domyślnie wyłączony.

StackHTML · CSS · JS · WebGL2 · WebAudio

Bez szablonów.
Bez bibliotek.
Z pomiarem.

Kontrast liczony skryptem, axe-core na każdym z czterech projektów, testy od 320 do 1440 px. To, co widać, zostało zmierzone.

02Jak pracuję

Projektowanie strony: cztery kroki, żadnych niedomówień.

Każdy krok kończy się czymś, co możesz otworzyć, kliknąć i sprawdzić — zanim podejmiesz następną decyzję.

  1. Rozpoznanie i zakres

    Ustalamy, co strona ma robić, do kogo mówi i co musi być w niej naprawdę. Bez listy funkcji „na wszelki wypadek”.

    DostajeszSpisaną strukturę sekcji i listę funkcji, do których można wrócić.

  2. Projekt i prototyp

    Układ, typografia, paleta i ruch w jednym prototypie, który klikasz w przeglądarce — także na telefonie.

    DostajeszProjekt do obejrzenia na 320 i 1440 px, zanim powstanie pierwsza linia kodu.

  3. Kod

    Statyczny HTML, CSS i JavaScript. Bez frameworka, bez wtyczek, bez buildu. Jeśli 3D jest potrzebne — własny shader, nie biblioteka.

    DostajeszKod, który otwiera się z pliku i działa, plus wyniki axe i testów na czterech szerokościach.

  4. Wdrożenie i przekazanie

    Publikacja, sprawdzenie na prawdziwych urządzeniach i krótkie przekazanie: co gdzie leży i jak zmienić treść.

    DostajeszStronę na Twoim hostingu i repozytorium, które nie jest czarną skrzynką.

03Co dostajesz

Strona dla firmy: lista, którą naprawdę dowożę.

Nie „nowoczesny wygląd”, tylko rzeczy, które da się sprawdzić w narzędziach — i pokazać palcem.

Mobile-first od 320 px
Układ projektowany od najmniejszego ekranu w górę, nie odwrotnie. 320 px to nie „tryb awaryjny”, tylko punkt wyjścia.
WCAG 2.1 AA
axe-core: 0 naruszeń na każdym z czterech projektów. Kontrast liczony skryptem, nie na oko.
Core Web Vitals
Obrazy webp z width i height, lazy-loading poza pierwszym ekranem, zero blokujących bibliotek.
Fonty i obrazy self-hosted
Pliki woff2 i grafika na Twoim serwerze. Bez CDN, bez zapytań do Google, bez rzeczy, które mogą zniknąć.
Zero zależności
Żadnego frameworka, package.json ani buildu. Katalog wrzucasz na hosting i działa.
Kod gotowy do przejęcia
Czytelne nazwy, komentarze przy decyzjach, jeden plik = jedna odpowiedzialność. Inny zespół wejdzie w to bez archeologii.
Ruch z hamulcem
prefers-reduced-motion wyłącza animacje, a brak WebGL pokazuje statyczny obraz — treść zostaje w całości.
Klasyczny fallback
Bez JavaScriptu strona nadal się czyta; bez WebGL dostaje poster, nie pustą ramkę.
Pryzma na telefonie: nagłówek „Światło jest materiałem” nad ciemną sceną 3D i przyciski na całą szerokość.

Pryzma · 390 px

WILGA na telefonie: nagłówek, limonkowy przycisk i okno konfiguratora z rowerem 3D nad panelem opcji.

WILGA · 390 px

OSTRA na telefonie: ciemna scena z portalem, nagłówek „Wejdź do środka” i przyciski jeden pod drugim.

OSTRA · 390 px

SPIĘCIE na telefonie: neonowe miasto w deszczu, nagłówek „Gry, w które się wchodzi” i dwa przyciski jeden pod drugim.

SPIĘCIE · 390 px

Te same cztery projekty na 390 px. Inna siatka, ta sama treść — bez ukrywania połowy strony.

04Strona bez szablonu

Szablon nie jest zły. Jest tylko czyjś.

Strona bez szablonu kontra motyw — porównanie po mechanizmach, nie po opiniach: co realnie zmienia się, kiedy strona jest pisana pod jeden konkretny projekt.

Waga strony

Szablon

Page builder, slider, trzy wtyczki i fonty z CDN. Każda z tych rzeczy to kolejne zapytanie przed pierwszym renderem.

Strona szyta

Jeden HTML, jeden CSS, dwa pliki JS. Do przeglądarki jedzie tylko to, czego strona naprawdę używa.

Typografia

Szablon

Skala i tracking z ustawień motywu; nagłówek łamie się tam, gdzie przewidział autor szablonu, nie autor zdania.

Strona szyta

Skala liczona od 320 px, tracking i łamanie ustawione pod konkretne zdanie — także polskie znaki i sieroty.

Efekty

Szablon

Gotowy slider albo wtyczka 3D, której nikt nie konfiguruje, bo dokumentacja ma czterdzieści stron.

Strona szyta

Shader napisany pod tę jedną scenę: działa na dotyku, pauzuje poza ekranem i ma sensowny fallback.

Dostępność

Szablon

Kontrast i fokus zostają takie, jakie wyszły z motywu. Zwykle nikt ich później nie sprawdza.

Strona szyta

Kontrast liczony skryptem, axe w każdym projekcie, cała strona przechodzona klawiaturą — z pułapką fokusa w podglądach.

Szablon bywa dobrym wyborem — kiedy liczy się budżet bardziej niż charakter. Wtedy mówię to wprost, zamiast wciskać custom.

05Pytania

Strona na zamówienie — pytania przed pierwszym mailem.

Krótko i bez cennika: jak pracuję, co dostajesz, telefon, hosting i szablony.

Jak wygląda praca nad stroną na zamówienie?

W czterech krokach: rozpoznanie i zakres, projekt i prototyp, kod, wdrożenie i przekazanie. Każdy krok kończy się czymś, co możesz otworzyć, kliknąć i sprawdzić, zanim podejmiesz następną decyzję. Zaczynamy od jednego maila: napisz, co masz i co ma się dziać po wejściu na stronę.

Co dostaję na koniec?

Stronę na Twoim hostingu i repozytorium, które nie jest czarną skrzynką: statyczny HTML, CSS i JavaScript bez frameworka i bez buildu, wyniki axe-core i testów na czterech szerokościach ekranu oraz krótkie przekazanie — co gdzie leży i jak zmienić treść.

Czy strona będzie dobrze działać na telefonie?

Tak. Układ projektuję od 320 px w górę, a prototyp klikasz w przeglądarce także na telefonie. Kod oddaję z wynikami testów na czterech szerokościach, od 320 do 1440 px. Bez WebGL albo przy włączonym ograniczeniu ruchu strona pokazuje statyczny obraz, a treść zostaje w całości.

Czy potrzebuję własnego hostingu i domeny?

Tak — strona trafia na Twój hosting i pod Twoją domenę. To statyczne pliki: bez bazy danych, bez buildu i bez wtyczek do aktualizowania, więc wystarczy zwykły hosting — katalog wrzucasz na serwer i działa. Publikację i sprawdzenie na prawdziwych urządzeniach robię w ramach wdrożenia.

Czy korzystasz z gotowych szablonów?

Nie. Każda strona jest pisana od zera pod jeden projekt — bez page buildera, bez wtyczek i bez bibliotek 3D. Szablon bywa dobrym wyborem, kiedy liczy się budżet bardziej niż charakter; wtedy mówię to wprost, zamiast wciskać custom.

Czy robisz strony 3D i WebGL?

Tak, kiedy 3D ma sens: piszę własny renderer WebGL2 pod konkretną scenę, bez bibliotek 3D. Scena reaguje na dotyk, zatrzymuje się poza ekranem, a bez WebGL strona pokazuje statyczny obraz. Cztery realizacje wyżej to projekty koncepcyjne, które pokazują to w praktyce.

Ile kosztuje strona internetowa na zamówienie?

Wycena zależy od zakresu, dlatego zaczynam od rozmowy, a nie od cennika na stronie. Napisz na ngencode.dev@gmail.com, co masz i co strona ma robić — odpowiem wprost, także wtedy, gdy to zadanie nie jest dla mnie.

06Kontakt

Zacznijmy od jednego maila.

Napisz, co masz i co ma się dziać po wejściu na stronę. Odpowiem wprost — także wtedy, gdy to zadanie nie jest dla mnie.

Pisz tutaj

ngencode.dev@gmail.com

Wycena zależy od zakresu, dlatego zaczynam od rozmowy, a nie od cennika na stronie.

Formularz demonstracyjny. Nie wysyła wiadomości i niczego nie zapisuje. Realna droga kontaktu to mail obok.

demo — nic nie wyjdzie