Architekt kontekstu i systemów AI

Nadaję pomysłom
formę, która
działa.

Łączę narrację, projektowanie i AI. Tworzę strony, które wciągają w opowieść, oraz narzędzia, które pomagają zrozumieć dane.

Zobacz działające przykłady — bez instalacji.

Portfolio / 01–09

Znajdź projekt
bliski Twojemu pomysłowi.

Strona, która przyciąga uwagę. Narzędzie, które porządkuje dane. Treść, która wyjaśnia.
Sprawdź, jak przekładam te potrzeby na konkretne rozwiązania.

9 projektów

  1. Okładka koncepcyjna01
    Pokaz interaktywny

    KÁRMÁN

    Modele 3D, film i narracja prowadzą przez złożony temat.

    Poznaj projekt
  2. Okładka koncepcyjna02
    Interaktywna ekspozycja

    Muzeum Kármána

    Cyfrowa ekspozycja, w której odbiorca sam bada zjawiska.

    Poznaj projekt
  3. Okładka koncepcyjna03
    Demo produktu · online

    AURA One

    Strona produktu z modelem 3D i filmową opowieścią.

    Poznaj projekt
  4. Okładka koncepcyjna04
    Demo marki · online

    KAKAWA

    Film i narracja budują spójny świat marki i jej produktu.

    Poznaj projekt
  5. Okładka koncepcyjna05
    Nagranie pokazu

    Silesia Pulse

    Od danych do raportu i komentarza AI — z kontrolą liczb.

    Poznaj projekt
  6. Okładka koncepcyjna06
    Migawka · 05.09.2026

    Geo Pulse

    Monitoring rynkowy, raporty i scenariusze dla firmy.

    Poznaj projekt
  7. Okładka koncepcyjna07
    Działające narzędzie

    Druga opinia o kredycie

    Weryfikacja RRSO i arkusz z otwartymi formułami.

    Poznaj projekt
  8. Okładka koncepcyjna08
    Demo · dane zastępcze

    Pulse AXIS

    Zespół, zadania i rytm pracy na jednej wizualnej płycie.

    Poznaj projekt
  9. Okładka koncepcyjna09
    PDF · Horizon w produkcji

    Mapy Myśli · Horizon

    Od książki o myśleniu po interaktywną publikację.

    Poznaj projekt

Wybierz kartę, aby przejść do opisu i materiałów projektu.

Pokazy, narzędzia i publikacje — w przeglądarce.

01 · Stronaotwiera się tutaj

KÁRMÁN — sto kilometrów nad ziemią

strona żyje
Pokaz otwiera się tutaj · fragmenty w osobnej karcie

Cztery kadry · kliknij, aby powiększyć

Od pułapu samolotu do orbity w jednym przewinięciu

Tam kończy się lotnictwo — powietrza jest za mało, żeby skrzydło miało co chwycić. Theodore von Kármán policzył wysokość, na której samolot musiałby lecieć z prędkością orbitalną, żeby się utrzymać, a wtedy skrzydła przestają być mu do czegokolwiek potrzebne.

Powyżej tej linii zaczyna się drabina napędów i każdy jej szczebel należy do innej fizyki. Pokaz przechodzi przez nie po kolei, w tempie, które nadaje czytelnik.

Dźwięk idzie od pierwszej sekundy i nie jest tłem: lektor prowadzi kolejne sceny, muzyka trzyma tempo wznoszenia, a grzmot nad Saharą wchodzi dokładnie wtedy, kiedy burza zapala się w kadrze.

Przewijanie jest wznoszeniem.

Fizyka, silniki i liczby są źródłowane. Fikcyjna jest wyłącznie oprawa narracyjna.

Drabina napędówCztery szczeble, cztery różne silniki. Pokaz przechodzi przez nie po kolei, w miarę jak rośnie wysokość i zmienia się to, co fizyka jeszcze dopuszcza.

Przy ziemi
silnik turboodrzutowy, dopóki jest co sprężać
200 km
ABEP, oddychający resztkami atmosfery
400 km
silnik Halla
Wyżej
jonowy siatkowy, ciąg liczony w miliniutonach
WarsztatThree.js na WebGPU · scena liczona na żywo · modele 3D · lektor · muzyka
Three.js w wersji WebGPU — scena liczona w czasie rzeczywistym, nie odtwarzana z nagrania · tekstury Ziemi z zestawu NASA Blue Marble · Słońce, terminator i cień jako czysta geometria · burza nad Czadem jako składnik świetlny w shaderze · modele 3D statków i stoczni · pokaz prowadzony przewijaniem, z dźwiękiem od pierwszej sekundy: muzyka ElevenLabs Music (kompozycja 166 s), lektor ElevenLabs (głos „Piotr"), SFX grzmotów, miks mierzony w LUFS · tła w oprawie narracyjnej z generowanego wideo, z jawną plakietką pochodzenia na kadrze.
Rok
sierpień 2026
Format
pokaz sterowany przewijaniem
Otwórz KÁRMÁN → jedno przewinięcie, sto kilometrów
Kod QR do strony KÁRMÁN

srv1792035.hstgr.cloud/karman
Zeskanuj — pokaz otworzy się na telefonie. Najlepiej w słuchawkach i na dużym ekranie.

02 · Stronaotwiera się tutajekspozycja pierwsza

Muzeum Kármána

strona żyje
Ekspozycja otwiera się tutaj · gabloty w osobnej karcie Robione na duży ekran — na telefonie gubi klatki

Przesuń, aby zobaczyć więcej · kliknij kadr, aby powiększyć

Tu eksponaty wolno ruszać

Trzy zjawiska fizyczne, każde jako osobny eksponat z suwakiem. Scena przelicza się przy każdym ruchu suwaka, zamiast odtwarzać nagraną animację.

Tokamak nie jest bryłą wyeksportowaną z programu do modelowania — powstaje z parametrów w przeglądarce, więc zmiana wymiaru przebudowuje siatkę, zamiast podmieniać plik.

Widok da się przełączyć na pasma, których oko nie widzi, a wnętrze aparatu obejrzeć z wygaszonym zjawiskiem, bo plazma zasłania konstrukcję, którą ma pokazać.

Adres jest tu stanem. Końcówka ?g=plazma otwiera ekspozycję wprost na wybranej gablocie, więc linkiem można wysłać komuś jedno zjawisko zamiast strony tytułowej.

Naraz żyje najwyżej jeden kontekst karty graficznej. Tła i łączniki między gablotami montują się dopiero przy wjeździe w kadr i giną razem z nim, bo trzy sceny naraz zdławiłyby przeglądarkę.

Co działa w ramceKadr powyżej to działająca strona, więc wszystko w nim reaguje. Karuzela ma po pięć zdjęć na zjawisko, a kaseta muzyki dwa utwory i wyciszenie.

  • Przewijanie w kadrzeprowadzi przez całą ekspozycję

  • Strzałki pod zdjęciemprzewijają karuzelę gabloty

  • Kaseta przy lewej krawędziwysuwa muzykę ekspozycji

Ekspozycja liczy każdą scenę na bieżąco, na karcie graficznej, i pod tym kątem jest zrobiona: monitor i przeglądarka z akceleracją sprzętową. Telefon ją otworzy, natomiast ruch bywa tam szarpany, a część efektów gaśnie z założenia, żeby w ogóle dało się przewijać.

Każdy obraz w gablotach nosi plakietkę pochodzenia, a każda liczba klasę: zmierzona narzędziem, przyjęta w projekcie, policzona ze wzoru albo dopisana dla opowieści.

WarsztatThree.js na WebGPU · TSL · model parametryczny · raymarching · zero CDN
Three.js w wersji WebGPU z zejściem na WebGL · TSL, czyli shadery pisane w JavaScripcie zamiast w GLSL · postprocessing z węzłów TSL: bloom, FXAA, rozmycie gaussowskie · tokamak jako model parametryczny liczony w przeglądarce, z przekrojem schodkowym 93°/73°/56° i pięcioma wywołaniami rysowania · kropla i łuk rysowane raymarchingiem, bez siatki · fizyka w osobnych modułach: równanie Sahy dla jonizacji, krzywa Paschena dla przebicia gazu, widmo i kaskada dla rozkładu mocy · trzy wyspy kodu ładowane osobno dla plazmy, kropli i łuku · GLTFLoader i OrbitControls · karuzela fotografii na transformacjach 3D · tła i łączniki montowane leniwie, żeby naraz żył najwyżej jeden kontekst WebGL · deep-linki ?g= prowadzące wprost do gabloty · ścieżka dźwiękowa z własnym suwakiem · fonty i biblioteki lokalnie, bez CDN.
Ekspozycja
pierwsza · trzy zjawiska
Aparaty
jeden udostępniony, dwa w przygotowaniu
Rejestr
każda liczba ma klasę
Wejdź do Muzeum → trzy gabloty, jedno kliknięcie
Kod QR do Muzeum Kármána

srv1792035.hstgr.cloud
Zeskanuj — ekspozycja otworzy się na telefonie. Najlepiej wygląda na monitorze.

03 · Stronadostępneprodukt wymyślony, wykonanie prawdziwe

AURA One — świat zostaje, reszta się dopisuje

strona żyje Obejrzyj w przeglądarce →

Strona produktu, po której chodzi się jak po filmie

Model okularów obraca się w przeglądarce, a film i lektor prowadzą przez cztery akty.

WarsztatThree.js · model 3D (GLB) · GSAP + ScrollTrigger · Lenis · lektor · PWA
Three.js r185 z postprocessingiem (bloom, tone mapping) · model GLB 12 MB ładowany przez GLTFLoader · GSAP i ScrollTrigger · płynne przewijanie Lenis · sekwencja 48 klatek webp do obrotu bez 3D · film mp4 · lektor ElevenLabs w pięciu aktach · dźwięk otoczenia · osobne lustro mobilne /m/ · PWA z instalacją i trybem offline (service worker) · żyroskop jako dodatek na telefonie · biblioteki lokalnie, bez CDN.
Obejrzyj AURA One → 30 sekund wystarczy
Kod QR do strony AURA One

aura-one-demo.netlify.app
Zeskanuj — telefon dostaje osobną wersję.

04 · Stronadostępnemarka wymyślona, wykonanie prawdziwe

KAKAWA — od owocu do ceremonii

strona żyje Obejrzyj w przeglądarce →

Jedno ujęcie od świtu w dżungli po gotowy kubek

Film prowadzi całą stronę bez jednego cięcia, a lektor prowadzi przez ceremonię parzenia.

Warsztatwideo ciągłe · lektor · osobna wersja mobilna · PWA · formularz z funkcją serwerową
film 4K przygotowany pod web z podpisami lektora · rozdziały sterowane przewijaniem · GSAP i Lenis na desktopie, czysty CSS na telefonie · lustro mobilne /m/ z automatycznym rozpoznaniem urządzenia · PWA: instalacja na ekranie głównym, tryb offline, service worker · blokada wygaszania ekranu na czas ceremonii (Wake Lock) · udostępnianie systemowe (Web Share) · przejścia między stronami (View Transitions) · formularz oparty o funkcję serwerową · quiz i filtr odmian na danych z pliku.
Obejrzyj KAKAWA → 40 sekund wystarczy
Kod QR do strony KAKAWA

kakawa.netlify.app
Zeskanuj — telefon dostaje osobną wersję.

05 · System analitycznypokaz z obrony · odtwarzanie na stronie

Silesia Pulse — puls gospodarczy Śląska

Kliknij, aby rozpocząć · pokaz prowadzi sam do końca · F — pełny ekran · spacja — dalej · P — pauza

Przesuń, aby zobaczyć więcej · kliknij kadr, aby powiększyć

System, który sprawdza własne wnioski, zanim je zapisze

Model językowy, który raz na dobę pisze komentarz do liczb, jest łatwy do zbudowania i trudny do obronienia. Silesia Pulse sprawdza każdą liczbę, którą model wypisze, zanim ta liczba wejdzie do arkusza. Reszta architektury wzięła się z tej jednej decyzji.

Pod spodem pracują trzy skrypty Pythona i jeden przycisk w Excelu. Pierwszy schodzi po dane zewnętrzne i odkłada je lokalnie, żeby pokaz nie zależał od cudzego serwera — kursy NBP, notowania trzech śląskich spółek, VIX i indeks ryzyka geopolitycznego AI-GPR. Power Query scala dziesięć zapytań w jedną tabelę: sześć lat notowań dzień po dniu. Drugi skrypt wchodzi do otwartego skoroszytu, czyta stamtąd konfigurację i dopisuje komentarz do każdej daty. Trzeci uruchamia całą tę drogę jednym kliknięciem. Power BI podłącza się do tego samego skoroszytu i nie przelicza niczego po swojemu, tylko czyta tę jedną tabelę razem z komentarzami — arkusz, pulpit i czat stoją na wspólnym źródle. Ta sama tabela przechodzi przez cztery poziomy analityki: opisowy, wyjaśniający, prognostyczny i preskryptywny, a każdy z nich ma w systemie swój ekran. Dane dojrzewają tu do decyzji, zamiast kończyć na wykresie.

Walidator jest tu rzeczą posuniętą najdalej. Każdy świeżo napisany komentarz przechodzi porównanie liczba po liczbie z danymi tego samego wiersza. Przy rozjeździe komentarz wraca do modelu z instrukcją korygującą, najwyżej dwa razy, a gdy dalej się nie zgadza, komórka zostaje pusta. Brak odczytu też nie przechodzi jako zgoda, bo niepewność i poprawność to dwie różne rzeczy. Odrzucone pozycje trafiają do osobnego arkusza razem z powodem, więc po każdym przebiegu widać, czego system o sobie nie wie. W trybie odświeżania walidator sprawdza dodatkowo komentarze już zapisane i przepisuje te, które zestarzały się po korekcie danych.

Sterowanie siedzi w ukrytym arkuszu obok: model, limit odpowiedzi, okno dni, profil inwestora i tryb pracy. Klucza API nie ma tam i nigdy nie było, a w jego miejscu stoi odsyłacz do pliku poza skoroszytem. Ta sama zasada wróciła w raporcie, bo czat z asystentem ryzyka to własny wizual napisany od zera w TypeScripcie — trzynaście wydań do wersji 2.2. Pyta model na żywo, a gdy połączenie zawiedzie, składa odpowiedź z kolumny wygenerowanej wcześniej. Klucza nie zna również on, bo rozmowa idzie przez serwer, który go trzyma.

Kierunek wnioskowania jest ustalony z góry i nie zmienia się pod wynik: od ryzyka geopolitycznego ku rynkom, nigdy odwrotnie. Korelacje raportowane są jako korelacje. Samego systemu nie otworzysz z przeglądarki, bo pracuje w Excelu i Power BI — pokaz powyżej jest jego zapisem z dnia obrony, a każdy kadr w nim pochodzi z działającego arkusza i raportu.

Obrona
lipiec 2026 · UE Katowice · ocena 5
Zakres
6 lat danych · 4 poziomy analityki
06 · Monitoringmigawka · 2026-09-05

Geo Pulse — monitoring rynkowy

Droga szoku od ropy do raty kredytu

Każdy pulpit pokaże, że ropa drożeje. Żaden nie powie małej firmie, kiedy wróci to do niej ratą kredytu. Geo Pulse prowadzi jeden łańcuch — od szoku geopolitycznego przez ropę i inflację po koszt pieniądza — i mierzy opóźnienia między ogniwami. To one rozstrzygają, czy przedsiębiorca zdąży zareagować, czy dowie się po fakcie.

Pod spodem działa jeden mechanizm. Kolektor w Pythonie schodzi po dane do sześciu publicznych źródeł i składa z nich jedną migawkę, a wszystko, co widać, powstaje dopiero z niej. Osiem zakładek terminala czyta ten sam plik, więc żaden ekran nie powie czegoś innego niż sąsiedni.

Raport AI jest tu rzeczą posuniętą najdalej. Z jednej migawki powstają trzy wyjścia tej samej treści: strona w terminalu, wydanie HTML otwierane w nowej karcie i dokument .docx do pobrania. Wydanie to pojedynczy plik bez zasobów z sieci — można je wysłać mailem, położyć w archiwum i otworzyć za pięć lat, a arkusz druku robi z niego przyzwoity PDF. Dokument jest prawdziwym plikiem Worda, a nie stroną przebraną za dokument: okładka z galerii, nagłówek z numeracją stron, natywne wykresy z własnym skoroszytem, równania i podpisy z polami. Odbiorca klika wykres i edytuje dane.

Perspektywa firmy pyta o profil działalności i przelicza założone zmiany kursu, energii i stopy procentowej na jeden miesiąc rozliczeń, z jawnymi wzorami i wypisanymi granicami scenariusza. Źródła i FAQ tłumaczą 81 pojęć, każde z własnym rysunkiem. Multimedia niosą tygodniową edycję w trzech formatach: rozmowę audio, film objaśniający i prezentację. Archiwum wydań zbiera raporty po dacie, a przy każdym leży migawka, z której powstał — stary raport da się więc przeliczyć, zamiast bronić go słowem honoru.

Najbliższy krok jest wdrożeniowy, a nie koncepcyjny. Kolektor przechodzi na serwer z harmonogramem, więc migawka będzie odświeżana dzień po dniu, a archiwum zapełni się samo — jedno wydanie dziennie, z własnym plikiem i własną migawką. Nota AI zacznie powstawać razem z liczbami, gdy narrator dostanie klucz. Dalej czekają: weryfikacja starszych odczytów, dłuższa historia do testowania zależności i konektory do usług pracujących na danych. Każdy etap ma warunek gotowości w miejscu, w którym zwykle stawia się datę.

Otwórz terminal w osobnej karcie — pełny ekran →
07 · Kalkulator RRSOdziała tutaj

Druga opinia o ofercie kredytowej

Narzędzie działa w ramce powyżej · kadry 2 i 3 to ten sam kalkulator po pobraniu, w Excelu · kliknij, aby powiększyć

Sprawdź RRSO z oferty, zanim podpiszesz umowę

Pięć konstrukcji, na które natyka się każdy, kto bierze kredyt gotówkowy: stała stopa, zmienna z podwyższoną marżą na start, prowizja potrącana z wypłaty, ubezpieczenie liczone od salda, karencja. Mają zbliżone oprocentowanie i różnią się miejscem, w którym siedzi koszt. Widać je dopiero w RRSO policzonym z rzeczywistych przepływów.

Wpisz RRSO, które bank podaje w ofercie. Kalkulator policzy je drugi raz, z parametrów tej samej oferty, i pokaże różnicę w punktach procentowych. Jeśli liczby się rozjeżdżają, któraś strona opisuje inny kredyt.

Przycisk „Pobierz arkusz XLSX" nie zapisuje wyników, tylko buduje działający skoroszyt: pokrętła, lista wyboru, wszystkie formuły otwarte i nazwane. Formuły przychodzą złamane na wiersze przez parser, więc w pasku formuły można je czytać i sprawdzać, a nie tylko uruchomić.

Harmonogram liczony jest dwiema niezależnymi drogami, wierszowo i formułą tablicową, a skoroszyt pokazuje różnice między nimi wiersz po wierszu. Silnik przeliczyłem dodatkowo w drugim języku: 8 118 sprawdzeń, największa rozbieżność 1,4 · 10−11.

Całość to jeden plik HTML bez bibliotek. Otwiera się z dysku i działa bez internetu.

Otwórz w osobnej karcie — pełny ekran →
08 · Systemdemonstrator

Pulse AXIS

Pulse AXIS — płyta z rdzeniem i sześcioma torami pracy

Przesuń, aby zobaczyć więcej · kliknij kadr, aby powiększyć

Sześć torów pracy, jeden rytm dnia

Płyta, na której widać całą pracę nad jednym dużym projektem naraz. W środku rdzeń: rozdaje priorytety i trzyma bramkę wydania. Wokół sześć torów, każdy prowadzi inny etap. Pod belką leży doba od siódmej rano do dwudziestej drugiej — widać, w którym bloku właśnie płynie prąd.

Demonstrator oprowadza po sobie sam. Piętnaście ujęć z lektorem, pięć minut i dwie sekundy: kamera dojeżdża do elementu, strzałka pokazuje szczegół, klamra obejmuje to, o czym akurat mowa.

Mechanika jest prawdziwa, dane zmyślone. Projekt na płycie to bezosobowy serwis firmowy — czterdzieści dwie podstrony i trzy wersje językowe — a zespół nosi imiona greckie, żeby nikt nie wziął tego za cudze zlecenie.

Buduję to, bo sam tego potrzebowałem. Rzecz jest w połowie drogi i tak jest opisana: kurier zapisu, jedyny element realnie zmieniający pliki, w tej wersji jest wyłączony.

Otwórz płytę — pełny ekran, przycisk ▶ włącza lektora →
Mapy Myśli jako ekosystem poznawczy — okładka
09 · Publikacje

Mapy Myśli jako ekosystem poznawczy

Rzecz o porządkowaniu myślenia: mapa myśli potraktowana nie jak notatka, lecz jak żywy system, w którym idee rosną, łączą się i konkurują o uwagę. Od mnemotechniki Buzana do neuro-syntezy.

Sto dwadzieścia trzy strony, dwanaście rozdziałów. Materiał dydaktyczny, marzec 2026.

Fragment do przeczytania obejmuje wstęp ze spisem treści, rozdział pierwszy, rozdział o mapie jako narzędziu twórczym — z serendypią przestrzenną, czyli mechanizmem, w którym dwie odległe myśli trafiają obok siebie i wyłania się z tego wartość, której nikt nie przewidział — oraz rozdział ostatni, o tym, dokąd to wszystko zmierza.

AI Horizon — Technologia, synteza, ludzkość. Druga książka, w produkcji. Trzynaście rozdziałów o trzech różnych sposobach myślenia o przyszłości technologii i o tym, co widać dopiero po przyłożeniu ich do siebie.

Tym razem nośnikiem nie jest PDF, tylko aplikacja HTML: wizualizacje, które czytelnik otwiera, przesuwa i sprawdza samodzielnie. Nowy papier dla treści, która się rusza.

Wydanie
marzec 2026
Objętość
123 str. · 12 rozdziałów
Współpraca

Jak to wygląda

Strony i demonstratory

Od wizytówki po pokaz sterowany przewijaniem, z wideo i lektorem.

Analiza danych i raportowanie

Pipeline, pulpit, raport cykliczny. Z widoczną drogą każdej liczby.

Teksty specjalistyczne i e-booki

Materiały dydaktyczne, publikacje, dokumentacja.

Pracuję rundami. Najpierw rozmowa i Twoje materiały — razem ustalamy, co ma z tego wyjść. Potem dostajesz wersję do obejrzenia: nie jest to opis ani makieta, a działająca rzecz, którą otwierasz i klikasz. Mówisz, co poprawić, i wchodzimy w kolejną rundę.

Nie lubię niespodzianek pod koniec, więc wolę, żebyś widział efekt, zanim poprawka zacznie cokolwiek kosztować. Zwykle starczają dwie, trzy rundy — i dlatego trzymam terminy, które podaję.

Pierwsza rozmowa jest bezpłatna i nic nie przesądza.

Medalion z drzewem życia

To tylko pytanie, nie zamówienie

Nie musisz wiedzieć, czego dokładnie chcesz. Wystarczy, że napiszesz, co Ci chodzi po głowie — resztę ustalimy w rozmowie.

Odpisuję w ciągu doby.
Nie zapisuję nikogo na newsletter.
Adres pocztowy stoi pod spodem, jeśli wolisz napisać wprost.

Czego potrzebujesz
Mailbaraniecki.ai@gmail.com
LokalizacjaSosnowiec