Odkrywasz
Kuratorski katalog narzędzi AI, sprawdzany co tydzień.
Polka z klockami
Kazdy modul biblioteki w izolacji: zywa probka, API i zachowanie przy reduced-motion. Tresc kazdego modulu istnieje w HTML bez JS - animacja tylko odslania.
Tla i ambient
TloDotwave
Sekcyjny wrapper na wyspę DotWave. Props: wysokosc (jednostka CSS,
domyślnie "100%"), przygaszenie (0-1, krycie kropek).
Rusz kursorem lub kliknij w polu, by wzbudzić falę. Poniżej 768 px i przy
reduced-motion wyspa sama się wycisza.
Interaktywne tło sekcji Kropki reagują na kursor i kliknięcie
TloZorza
Ambientowe tło z trzech radialnych plam aurora dryfujących czystym CSS.
Props: intensywnosc (0-1, krycie warstwy plam, domyślnie
0.55). Reduced-motion i mobile: plamy nie dryfują, zostaje
statyczna poświata. Treść idzie slotem nad tłem.
Rama newslettera Spokojna zorza pod formularzem lub CTA
MglaCmentarna
Ambientowe tło z poziomych pasm szarości płynących bardzo wolno w bok.
Props: gestosc (0-1, krycie warstwy mgły, domyślnie
0.5). Reduced-motion i mobile: mgła stoi w miejscu. Treść idzie
slotem nad mgłą.
Cmentarz narzędzi Miejsce na nagrobki wycofanych narzędzi
Tekst
NaglowekGradient
API: tag (h1-h3, domyślnie h2), treść przez slot.
Opcjonalnie data-anim-delay i data-anim-stagger na
nagłówku. Gradient aurora przesuwa się w CSS, GSAP odsłania słowa (reveal slow,
once) przy wejściu w viewport. Bez JS tekst jest w pełni widoczny.
Ucz się AI bez ściemy
Grafika, multimedia, agenci, automatyzacje
LicznikStatystyk
API: wartosc (number, pełna liczba jest w HTML - SEO/AEO),
sufiks (np. "+", "%", "h"), etykieta (podpis).
GSAP odlicza od zera przy wejściu w viewport (snap 1). Reduced-motion: bez
odliczania, w HTML zostaje pełna wartość.
128 +
narzędzi w katalogu
14
zweryfikowane w 7 dni
9
nagrobki na cmentarzu
2400 +
minut nauki
TerminalPrompt
API: label (etykieta paska, domyślnie "PROMPT"),
pisz (boolean - jednorazowy efekt maszyny do pisania przy
wejściu w viewport). Treść w slot (linie w
.m-terminal__line). Przycisk kopiuje treść do schowka i
zmienia ikonę na "check". Bez JS: pełny tekst i działająca treść od razu.
Napisz zwięzłe streszczenie tego artykułu w 3 punktach.
Każdy punkt maksymalnie jedno zdanie, po polsku.
Wcielasz się w redaktora. Popraw ten tekst tak, by brzmiał naturalnie.
Karty i siatki
KartaTilt
API: maxDeg (domyślnie 6) steruje siłą przechyłu. Warstwy
paralaksy oznacz klasą .ax-tilt__layer i atrybutem
data-tilt-depth (px). Na dotyku i przy reduced-motion efekt jest
wyłączony - karta pozostaje płaska.
Ścieżka nauki
Pierwsze kroki w Claude
Najedź kursorem - karta przechyli się za wskaźnikiem, a tytuł uniesie się mocniej niż podpis.
SiatkaReveal
API: minKolumna (min. szerokość kafla, domyślnie "240px"),
gap, stagger, delay. Każde
bezpośrednie dziecko slotu jest animowane. Bez JS i przy reduced-motion
siatka jest od razu widoczna.
Robisz
Krótkie lekcje i questy prowadzą od zera do efektu.
Pokazujesz
Gotowe prompty i szablony do własnych projektów.
Wracasz
Postęp i odznaki czekają przy następnym logowaniu.
StosKart
API: top (przyklejenie karty od góry, domyślnie "12vh"),
gap (odstęp w kolumnie). Karty przekazujesz slotem - działają
jako sticky-stack na desktopie, a jako zwykła kolumna na mobile i przy
reduced-motion. Przewiń, aby zobaczyć efekt.
Odkrywasz
Wybierasz narzędzie z katalogu i sprawdzasz, do czego naprawdę się nadaje.
Robisz
Przechodzisz krótką lekcję i od razu odpalasz efekt na własnym przykładzie.
Pokazujesz
Zapisujesz gotowy prompt lub szablon i wracasz do niego, kiedy chcesz.
KartaBoss
API: badge (tekst plakietki, domyślnie "CAPSTONE"). Treść
przekazujesz slotem. Obwódka conic-gradient obraca się przez
@property - bez jego wsparcia pozostaje statyczna, tak samo przy
reduced-motion.
CAPSTONE
Zadanie końcowe ścieżki
Zbuduj własnego asystenta w Claude
Połącz wszystko z kursu - prompt systemowy, kontekst i listę zadań - w jeden działający przepływ. Ukończ, aby odblokować odznakę.
Postep i gamifikacja
RingPostepu
Czysty SVG pierścień postępu (stroke-dasharray). Propsy: wartosc
(0-100), rozmiar (px), grubosc (px),
gradient (bool - stroke gradientem aurora), animujOdZera
(bool, domyślnie true - IntersectionObserver dociąga wypełnienie od 0 przy wejściu
w viewport, bez GSAP). Tekst w środku przez domyślny slot. Bez JS widoczny od razu
w stanie końcowym.
35%
68%
3/3
PasekXp
Cienki płaski pasek postępu (4px, wzór wl-cc__bar). Propsy: procent
(0-100), gradient (bool - wypełnienie gradientem aurora),
animujOdZera (bool, domyślnie true - IntersectionObserver dociąga
wypełnienie od 0 przy wejściu w viewport, bez GSAP), etykieta (opis
a11y). Wypełnienie rośnie przez transform: scaleX (transform-origin
left) - nigdy przez szerokość, więc zero ruchu layoutu. Bez JS widoczne od razu.
Lekcja 3 z 7
XP do kolejnego poziomu
Ukończono
ChipStat
Chip "ikona + liczba + podpis" (wzór wl-stat). Ikona wchodzi domyślnym slotem
(SVG obrys 1.5-2px, bez emoji). Propsy: wartosc (liczba/tekst),
podpis (opis obok liczby), wariant
(xp zielony / streak pomarańczowy / czas
cyjan - akcent z palety aurora). Statyczny, w pełni czytelny bez JS.
1240 XP 7 dni seria ok. 4 h czas
MapaSciezki
Oś poziomów ścieżki nauki. Props: kroki - tablica
{ tytul, xp, status: gotowe|import-en|w-budowie, href?, opcjonalny? },
locale (pl|en), etykieta (aria). Linia SVG łączy
węzły (pozioma na desktopie, pionowa na mobile) i rysuje się przy scrollu;
węzły wskakują stagger. Węzły-gotowe mają obwódkę gradient aurora. Bez JS:
cała mapa widoczna, linia pełna. Reduced-motion: wersja statyczna.
Co potrafi Claude 40 XP gotowe Pierwsza rozmowa 60 XP gotowe Prompt krok po kroku 80 XP gotowe
4 Praca z plikami 90 XP EN - tlumaczymy po kolei
5 Twój własny asystent 120 XP opcjonalny wkrotce
Interakcja
PasekCzytania
Cienki pasek 2px przyklejony pod nagłówkiem; szerokość = procent
przewiniętego artykułu. Propsy: cel (selektor artykułu,
domyślnie article), gora (odsunięcie od góry,
np. 64px), class. Vanilla rAF + passive scroll,
animacja przez transform: scaleX. Przy 0% pasek znika.
Jak Claude czyta dłuższe materiały
Przewiń ten fragment - pasek na samej górze okna wypełni się gradientem aurora proporcjonalnie do tego, ile artykułu masz już za sobą. To ten sam wskaźnik, który znasz z widoku lekcji w aplikacji.
Pasek liczy postęp względem wysokości wskazanego elementu, a nie całej strony - dzięki temu działa poprawnie nawet, gdy artykuł otaczają hero, stopka i inne sekcje.
Odczyt i zapis pozycji dzieją się w jednej klatce rAF, a nasłuch scrolla jest passive - dlatego przewijanie pozostaje płynne. Bez JavaScriptu pasek po prostu się nie pojawia, bo nie niesie żadnej treści.
Przy włączonym trybie ograniczonego ruchu pasek dalej informuje o postępie, ale rezygnuje z wygładzania przejścia - aktualizuje się skokowo za każdym przewinięciem.
Ostatni akapit demonstracyjny - gdy dojdziesz tutaj, pasek u góry będzie niemal pełny. To wygodny sygnał dla czytelnika, ile jeszcze zostało do końca materiału.
PrzyciskMagnetyczny
Slotowy wrapper - owija dowolny przycisk bez zmiany jego kodu. Przycisk
ciazy ku kursorowi w promieniu promien (domyslnie 80px),
przesuwajac sie maks. o sila px (domyslnie 6). Sprezyste
dociaganie liczone lerpem w rAF, bez bibliotek. Na dotyku i przy
reduced-motion efekt jest wylaczony.
Drugi przycisk ma wiekszy promien (110px) i sile (10px) - reaguje z dalsza i przesuwa sie mocniej.
AkordeonFaq
Props: pytania: { q, a }[] (wymagane),
jeden?: boolean (gdy true - naraz otwarte tylko jedno pytanie,
przez natywny atrybut name), grupa?, class?.
Rozwijanie jest w pełni bez JS (grid-template-rows 0fr->1fr na
::details-content), chevron obraca się na [open].
Czy AiAi.tips jest darmowe?
Tak - fundament nauki i kuratorski katalog narzędzi są darmowe. Treści Pro są dodatkiem, a nie warunkiem startu.
Skąd wiadomo, że karty narzędzi są aktualne?
Każda karta ma datę ostatniej weryfikacji. Ceny i dostępność sprawdzamy cyklicznie, a zmiany trafiają do historii karty.
Czego nauczę się najpierw?
Zaczynasz od ścieżki fundamentu: jak rozmawiać z modelem, jak pisać prompty i jak nie dać się nabrać na modne wydmuszki.
PorownywarkaPrzed
Sloty: przed i po (dowolna treść -
obraz, panel, kod). Props: start? (pozycja 0-100),
etykietaPrzed?, etykietaPo?, wysokosc?.
Natywny input type=range steruje clip-path górnej
warstwy - klawiatura (strzałki) działa od ręki, zero zależności.
"Jesteś redaktorem. Napisz 3 tytuły artykułu o kotach dla początkujących, każdy do 60 znaków."
rola + zadanie + ograniczenia = przewidywalny wynik"napisz coś o kotach"
bez roli, bez celu, bez formatu - model zgadujeListaZadan
Props: zadania: string[] (wymagane),
klucz: string (slug lekcji - stan idzie do
localStorage["aiai_lekcja_v1:<klucz>"], nigdy do kluczy
questów), tytul?. Ptaszek rysuje się obrysem SVG (stroke-dash),
pasek postępu nad listą to scaleX, przy 100% - confetti.
Bez JS: zwykła, działająca lista checkboxów.
Zrób to teraz
Zrobione!
Marquee - przewijana taśma
Sloty: dowolne elementy. Propsy: kierunek ("lewo" | "prawo"),
sekundy (prędkość obiegu), pauzaNaHover (domyślnie
włączona), odstep, etykieta. Bez JS: pojedynczy,
przewijalny palcem rząd; z JS: płynna pętla (klon zawartości). Reduced-motion
zostawia statyczny rząd.