Miałem robić kreacje. Zrobiłem galaktykę. Weekend zszedł mi na czymś, co z reklamą nie ma pozornie nic wspólnego: 200 000 punktów wirujących wokół jasnego jądra, siatka jak z Tronu, panel z przewijającym się kodem. Skończyłem i dopiero wtedy zadałem sobie pytanie, które powinienem zadać na początku: ile z tego da się przełożyć na robotę, za którą ktoś płaci?
Najpierw zobacz, o czym mówię. Potem policzymy rachunek.
// demo ładuje się dopiero, gdy dojedziesz do tego miejsca. Dlaczego — niżej. otwórz w nowej karcie →
Czym są interaktywne treści
Interaktywne treści to materiały, które reagują na działanie odbiorcy — klikasz, przesuwasz, wpisujesz coś, a treść się zmienia. Odbiorca przestaje być widzem i staje się operatorem. To jedyna różnica, ale zmienia wszystko, bo zmienia rolę.
W praktyce to kilka powtarzalnych formatów:
- Kalkulatory i konfiguratory — policz marżę, dobierz rozmiar, złóż zestaw.
- Quizy i testy dopasowania — „który wariant jest dla Ciebie”.
- Wizualizacje danych, po których można klikać i filtrować.
- Symulacje i dema — jak to, które masz wyżej: pokazujesz mechanizm, zamiast go opisywać.
- Interaktywne karty produktu — obrót 360°, podgląd na żywo, personalizacja.
Statyczny wpis mówi: „tak to działa”. Interaktywna treść mówi: „sprawdź sam”. Druga wersja jest trudniejsza do zrobienia i znacznie trudniejsza do zignorowania.
Dlaczego to trzyma uwagę dłużej niż obrazek
Nie mam na to własnych liczb i nie będę ich udawał — demo poszło na stronę dzisiaj. Mam za to mechanizm, który widzę w każdej kampanii od lat.
Obrazek konsumuje się w sekundę. Wideo ma jeden bieg: play. Interaktywna treść ma pętlę: robisz ruch, widzisz efekt, chcesz sprawdzić następny. Każdy suwak w tym demie to zaproszenie do kolejnego kliknięcia, a każde kliknięcie to mikro-inwestycja czasu, po której trudniej wyjść. To nie magia. To ta sama mechanika, która trzyma ludzi w prostych grach na telefonie.
Do tego dochodzi coś, czego banner nie umie: wynik jest Twój. Ustawiłeś trzy ramiona i pomarańczową paletę — to już Twoja galaktyka, nie moja. Kalkulator, który pokazuje Twoją marżę, działa dokładnie tak samo. Personalizacja bez zbierania danych.
Co interaktywność daje w reklamie i SEO
Rozbijam to na cztery warstwy, bo w każdej działa inaczej.
1. Kreacja reklamowa
Na Meta i TikToku pierwsze pół sekundy decyduje o wszystkim. Nagranie z ekranu takiego demo — spirala, która obraca się pod palcem — to ruch, którego algorytm nie widział w setce podobnych reklam z tej samej branży. Nie sprzedaje. Zatrzymuje kciuk, a to jest jedyne zadanie góry lejka.
2. Strona docelowa
Interaktywny element na landingu robi coś, czego nie robi żaden akapit: kwalifikuje ruch. Kto przeklikał konfigurator, ten wie, czego chce. To materiał na segment remarketingowy dużo lepszy niż „wszyscy, którzy odwiedzili stronę”. Więcej o tym, jak układać etapy, jest w notatce o lejku treści.
3. SEO
Google nie ma metryki „fajność”. Ma za to linki i zachowanie użytkownika. Narzędzie, kalkulator albo dobra wizualizacja są linkowalne — ludzie podają je dalej, bo są użyteczne, a nie dlatego, że ktoś poprosił. To najzdrowszy link building, jaki znam. Warunek jest jeden: wokół interaktywnego elementu musi stać porządny tekst, bo wyszukiwarka indeksuje słowa, nie piksele.
4. Widoczność w AI
I tu jest haczyk, o którym mało kto mówi. Model językowy nie kliknie w Twój suwak. ChatGPT, Perplexity i podsumowania AI w wyszukiwarce czytają tekst, nagłówki i dane strukturalne. Jeżeli cała wartość strony siedzi w canvasie, dla AI ta strona jest pusta. Dlatego każde demo musi mieć tekstowego bliźniaka: opis, wnioski, liczby, FAQ. Rozwijam to w notatce o widoczności w AI (GEO).
Rachunek: co ten efekt kosztuje
Każdy efekt ma cenę w kilobajtach, klatkach i baterii. Rozpisałem demo z góry na czynniki, żeby było widać, za co się płaci.
| Element | Co daje odbiorcy | Co kosztuje stronę |
|---|---|---|
| 200 000 cząsteczek liczonych na GPU | wrażenie skali, „to żyje” | pamięć karty graficznej, bateria telefonu |
| Suwaki i presety | sprawczość, powód, żeby zostać | dodatkowy kod, ryzyko przycięć przy każdej zmianie |
| Bloom i post-processing | „drogie” wrażenie, neon | kilka dodatkowych przebiegów renderowania na każdą klatkę |
| Panel z przewijającym się kodem | dowód, że to nie jest stock | prawie nic — to zwykły HTML |
| Biblioteka 3D z zewnętrznego serwera | nic bezpośrednio | kilkaset kilobajtów do pobrania przed startem |
Ostatni wiersz jest najważniejszy, bo on decyduje o tym, czy strona zdąży się pokazać. Dlatego demo wyżej siedzi w osobnym pliku, w ramce z atrybutem loading="lazy": dopóki nie przewiniesz do tego miejsca, przeglądarka nie pobiera ani jednego bajtu. Tekst, który czytasz, ładuje się tak samo szybko, jak każdy inny wpis w tym notatniku.
Core Web Vitals: gdzie interaktywność się wykłada
Google mierzy trzy rzeczy i ma dla nich konkretne progi. Warto je znać na pamięć, zanim wrzuci się na stronę cokolwiek ciężkiego:
- LCP (czas do wyświetlenia największego elementu) — dobry wynik to 2,5 s lub mniej. Zabija go biblioteka ładowana w nagłówku strony.
- INP (opóźnienie reakcji na kliknięcie) — dobry wynik to 200 ms lub mniej. Zabija go ciężkie przeliczanie w tym samym wątku, w którym działa interfejs.
- CLS (przeskoki układu) — dobry wynik to 0,1 lub mniej. Zabija go element bez zarezerwowanej wysokości, który dopycha treść w dół po załadowaniu.
Trzy z czterech interaktywnych zabawek, które widziałem na stronach klientów, przewracały się na tym samym: ładowały się razem ze stroną, zamiast poczekać na swoją kolej. Efekt jest taki, że strona przez dwie sekundy jest biała, a użytkownik już jej nie ogląda. Więcej pojęć z tej działki zebrałem w słowniku technicznym i w słowniku UX i CRO.
Jak osadzić ciężkie demo i nie zabić strony
Protokół, którego trzymam się u siebie — w tej kolejności:
- Wynieś demo do osobnego pliku. Nie do treści wpisu. Osobny plik ma własny kod, własne style i nie może niczego popsuć w reszcie strony.
- Osadź je w ramce z
loading="lazy". Przeglądarka pobierze je dopiero wtedy, gdy zbliży się do ekranu użytkownika. - Zarezerwuj wysokość. Ramka ma stałą wysokość, więc tekst pod nią nigdzie nie skacze. To całe CLS.
- Ogranicz koszt na telefonie. W demie ograniczam gęstość pikseli do dwukrotności i chowam część interfejsu poniżej 620 px szerokości. Można iść dalej i zmniejszać liczbę cząsteczek na słabszym sprzęcie.
- Napisz tekstowego bliźniaka. Wszystko, co demo pokazuje, opisz słowami — dla wyszukiwarki, dla modeli AI i dla kogoś, komu nie działa WebGL.
- Zmierz to samo dwa razy. Raz w narzędziu, raz na własnym, starszym telefonie. Drugi pomiar jest prawdziwy.
Kiedy nie robić interaktywnej treści
- Kiedy nie masz jeszcze ruchu. Najpiękniejszy konfigurator obejrzy dwanaście osób, z czego dziesięć to Ty.
- Kiedy nie umiesz opisać jednym zdaniem, po co on jest. Efekt bez zadania to koszt.
- Kiedy podstawy leżą: brak pomiaru, wolny hosting, karta produktu bez zdjęć.
- Kiedy to ma być „coś jak u konkurencji”. Kopia efektu bez powodu jest widoczna od razu.
- Kiedy termin jest na wczoraj. Ciężkie rzeczy robi się wolno albo źle.
Błędy, które sam popełniłem
- Ładowanie biblioteki na każdej podstronie. Nawet tam, gdzie nic się nie animowało.
- Brak zarezerwowanej wysokości. Cała treść podskakiwała w momencie startu animacji.
- Efekt bez opisu. Podstrona ładna jak z filmu, w wynikach wyszukiwania niewidzialna, bo poza tytułem nie było na niej ani jednego zdania.
- Testowanie wyłącznie na swoim sprzęcie. Na moim komputerze 60 klatek. Na trzyletnim telefonie pokaz slajdów.
Najczęstsze pytania
Czym są interaktywne treści?
To materiały, które reagują na działanie odbiorcy i zmieniają się w odpowiedzi na jego wybór — kalkulatory, konfiguratory, quizy, interaktywne wizualizacje i dema. Odbiorca nie ogląda gotowego przekazu, tylko sam go współtworzy.
Czy interaktywne treści pomagają w SEO?
Pośrednio, ale realnie. Nie ma czynnika rankingowego „interaktywność”. Są za to linki przychodzące do użytecznych narzędzi, dłuższy czas na stronie i mniejsza liczba powrotów do wyników wyszukiwania. Warunek: wokół interaktywnego elementu musi być indeksowalny tekst.
Czy animacja WebGL zaszkodzi Core Web Vitals?
Zaszkodzi, jeśli ładuje się razem ze stroną. Nie zaszkodzi, jeśli wyniesiesz ją do osobnego pliku, osadzisz w ramce z leniwym ładowaniem i zarezerwujesz jej stałą wysokość. Wtedy koszt ponosi tylko ten, kto do niej dojedzie.
Czy modele AI widzą interaktywną treść?
Nie. Systemy generatywne czytają tekst, nagłówki i dane strukturalne — nie klikają w suwaki i nie renderują grafiki 3D. Dlatego każde demo powinno mieć opisową wersję tego samego: definicje, wnioski i sekcję pytań i odpowiedzi.
Czy trzeba umieć programować, żeby zrobić coś takiego?
Żeby zrobić galaktykę — tak, przynajmniej na poziomie podstaw JavaScriptu, choć dziś model językowy przeprowadzi Cię przez większość drogi. Żeby zrobić skuteczną interaktywną treść — nie. Kalkulator marży w formularzu albo quiz dopasowania produktu robi się bez linijki kodu i zwykle zarabia szybciej niż efekt specjalny.
Od czego zacząć przy małym sklepie?
Od jednego kalkulatora albo quizu, który odpowiada na realne pytanie klienta przed zakupem: „ile mnie to będzie kosztować” albo „który wariant jest dla mnie”. Jedna taka rzecz, dobrze opisana i wpięta w lejek, robi więcej niż dziesięć efektów.
Dokąd dalej
Jeśli dopiero układasz treści: TOFU, MOFU, BOFU — czym jest lejek treści. Jeśli interesuje Cię, jak być cytowanym przez modele: widoczność w AI. Jeśli szukasz pojęć: słownik marketingu internetowego. Cały spis tematów jest na stronie tematy.
— MK · wróć do notatnika
