Motyw opowiada ideę marki: AI poleca Twoją markę w pytaniach, które przynoszą klientów. Pole kropek to rynek pytań. Obiekt, który wyłania się ze światła, to pytania, które przynoszą klientów. Pomarańczowy punkt to marka polecona przez AI.
Idea
Przykład działa na żywo: rysuje go ten sam skrypt, którego używasz w materiałach. Kliknij kadr, żeby odtworzyć animację.
Pole kropek Rynek pytań Wszystko, o co ludzie pytają AI w danej kategorii.
Obiekt Pytania, które przynoszą klientów Wyłania się światłem z pola. W MVP to mapa Polski.
Punkt Marka polecona przez AI Jeden pomarańczowy punkt na element. Zawsze koło.
Cztery warianty hero
Wariant wybierasz trzema pytaniami: czy kadr ma obiekt, czy jest ciemny czy jasny i gdzie stoi tekst. Domyślnie ciemne D. Tekst na dole: G. Jasne: F. Mniejsze sekcje i strony kategorii: E.
D · ciemne. Łuk od dołu, raster. Domyślne dla artykułu, raportu i slajdu.
Pokaż kod
<section class="ah dk" data-pe-hero="d">
<header class="hn">
<img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye">
<nav><a href="#">Produkt</a><a href="#">Raporty</a><a class="on" href="#">Blog</a><a href="#">Cennik</a></nav>
<span class="r"><a class="b b3 n S" href="#">Zaloguj</a><a class="b b1b S" href="#">Umów demo</a></span>
</header>
<div class="ah-in">
<div class="ah-cr"><a href="#">Blog</a><span>/</span><span>Regiony Polski</span></div>
<h1>Dokąd AI wysyła Polaków nad morze?</h1>
<p>Zapytaliśmy siedem modeli AI, gdzie spędzić wakacje nad polskim morzem, i sprawdziliśmy, które miejsca polecają najczęściej.</p>
<div class="ah-m"><b>Zespół badawczy PromptEye</b><span>23 października 2026</span><span>9 min czytania</span></div>
</div>
</section>F · jasne. Gradient prosty od dołu, szary raster. Na stronie rama po bokach, dół zamyka biała strona.
Pokaż kod
<section class="ah ahl cx-l f86" data-pe-hero="f">
<header class="hn">
<img src="assets/logo/svg/prompteye-logo-color-on-light.svg" alt="PromptEye">
<nav><a href="#">Produkt</a><a href="#">Raporty</a><a class="on" href="#">Blog</a><a href="#">Cennik</a></nav>
<span class="r"><a class="b b3 n S" href="#">Zaloguj</a><a class="b b1b S" href="#">Umów demo</a></span>
</header>
<div class="ah-in">
<h1>Zobacz, jak AI poleca Twoją markę</h1>
<p>Sprawdzamy odpowiedzi modeli AI w pytaniach, które przynoszą klientów, i pokazujemy, co zmienić, żeby AI polecało Twoją markę.</p>
</div>
</section>G · okładka. Łuk od góry, tekst na dole. Okładki raportów i social media.
Pokaż kod
<section class="ah dk gt gt-k" data-pe-hero="g">
<header class="hn">
<img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye">
<nav><a href="#">Produkt</a><a href="#">Raporty</a><a class="on" href="#">Blog</a><a href="#">Cennik</a></nav>
<span class="r"><a class="b b3 n S" href="#">Zaloguj</a><a class="b b1b S" href="#">Umów demo</a></span>
</header>
<div class="ah-in">
<div class="ah-cr"><span>Raport</span><span>·</span><span>marzec 2026</span></div>
<h1>Turystyka w rekomendacjach AI 2026</h1>
<p>Dokąd siedem modeli AI wysyła Polaków nad morze, w góry, na Mazury i na weekend. Ponad 5 tysięcy miejsc w 12 rozdziałach.</p>
<div class="ah-m"><b>PromptEye</b><span>12 rozdziałów</span><span>7 modeli AI</span></div>
<div class="ctas"><a class="b b1b L" href="#">Pobierz raport</a><a class="b b3 L" href="#">Zobacz rozdziały</a></div>
</div>
</section>E · obrys. Obiekt narysowany obrysem z kropek. Strony kategorii i mniejsze sekcje.
Pokaż kod
<section class="ah dk" data-pe-hero="e">
<header class="hn">
<img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye">
<nav><a href="#">Produkt</a><a href="#">Raporty</a><a class="on" href="#">Blog</a><a href="#">Cennik</a></nav>
<span class="r"><a class="b b3 n S" href="#">Zaloguj</a><a class="b b1b S" href="#">Umów demo</a></span>
</header>
<div class="ah-in">
<div class="ah-cr"><a href="#">Blog</a><span>/</span><span>Kategorie</span></div>
<h1>Raporty branżowe</h1>
<p>Pomiary całych branż: które marki AI poleca w pytaniach zakupowych i jak to się zmienia w czasie.</p>
</div>
</section>CTA
Ciemne CTA zamyka stronę albo prezentację. Pokazuje przycięty fragment obiektu z punktem. To jedyna kompozycja, w której pomarańczowy przycisk Moment (b1a) stoi obok punktu motywu.
Pokaż kod
<section class="t2end" data-pe-cta="raster">
<div class="t2end-in">
<h2>Sprawdź, jak AI poleca Twój region</h2>
<p>Pokażemy wyniki Twojej marki na tle konkurencji. Demo trwa 30 minut.</p>
<div class="pb-ctas"><a class="b b1a L" href="#">Umów demo</a><a class="b b3 L" href="#">Pobierz raport</a></div>
</div>
</section>Jeden motyw, każdy format
Motyw liczy się od kadru. Wzorcem jest hero 1440 × 860, a każdy inny format ma skalę s = √(W · H) / 1113. Marginesy, pismo i wielkość logo dla formatów są w tabeli w rozdziale Układ. Obiekt zawsze stoi przy prawej krawędzi i wygasa w stronę tekstu.
Pokaż kod
<section class="ah dk" data-pe-hero="d" style="width:1920px;height:1080px">
<img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye" style="position:absolute;z-index:2;left:64px;top:64px;height:28px">
<div class="ah-in" style="left:64px;top:216px;width:880px">
<div class="ah-cr" style="font-size:20px">Raport · Turystyka</div>
<h1 style="font-size:80px">Dokąd AI wysyła Polaków nad morze?</h1>
<p style="font-size:28px;max-width:760px">12 000 odpowiedzi siedmiu modeli AI.</p>
</div>
</section>Pokaż kod
<section class="ah dk" data-pe-hero="d" style="width:1200px;height:630px">
<img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye" style="position:absolute;z-index:2;left:64px;top:64px;height:28px">
<div class="ah-in" style="left:64px;top:140px;width:618px"><h1 style="font-size:56px">Dokąd AI wysyła Polaków nad morze?</h1></div>
</section>Pokaż kod
<section class="ah dk gt" data-pe-hero="g" style="width:1080px;height:1350px">
<div class="ah-in" style="left:72px;bottom:152px;top:auto;width:936px">
<h1 style="font-size:72px">Dokąd AI wysyła Polaków nad morze?</h1>
<p style="font-size:28px;max-width:800px">12 000 odpowiedzi siedmiu modeli AI.</p>
</div>
<img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye" style="position:absolute;z-index:2;left:72px;bottom:72px;height:32px">
</section>Bez logo i z tekstem od 400 px: lewy dolny róg zasłania zdjęcie profilu.
Pokaż kod
<section class="ah dk" data-pe-hero="d" style="width:1584px;height:396px">
<div class="ah-in" data-pe-tekst="lewo" style="left:400px;top:146px;width:720px"><h1 style="font-size:52px;margin:0">Zobacz, jak AI poleca Twoją markę</h1></div>
</section>Zasady
- Motyw rysuje skrypt. Nie rysujesz kropek, rastra, mapy ani punktu w SVG, CSS ani na własnym canvasie. Dodajesz atrybut.
- Dwa poziomy. Wypełnienie rastrem (hero, okładki, CTA) i obrys z kropek (strony kategorii, mniejsze sekcje).
- Kropka to koło. Siatka 10 px, sześć wielkości kropki.
- Kolor. Na czerni od #1B2B9C do #8DA1FF, bez bieli. Na bieli szarość.
- Jeden punkt na element. Pomarańczowe koło 5 px wpisane w siatkę.
- Obiekt przy prawej krawędzi. Częściowo poza kadrem. Wygasa w stronę tekstu i nie wchodzi w kolumnę tekstu.
- Tekst nie stoi na kolorze. Gradient zaczyna się pod kolumną tekstu; skrypt sam to sprawdza.
- Gradient naprzeciw tekstu. D, F, E i CTA od dołu, G od góry.
- Hero: tytuł i lead do 3 linii. Dłuższy tekst zmniejsza gradient do pasa przy krawędzi.
- Dane są liniowe. Tabele, wykresy i ryciny bez kropek motywu.
- Animacja tylko wypełnia kropkami. Ok. 2,5 s, punkt na końcu. Bez pętli.
- Kropka po tytule nigdy z punktem motywu. Jeśli kadr ma punkt, tytuł jest bez kropki.
Najczęstsze błędy
| Błąd | Poprawnie |
|---|---|
| kropki lub mapa narysowane w SVG/CSS | atrybut data-pe-hero, rysuje skrypt |
| tekst na środku kadru nad motywem | tekst po lewej, u góry albo na dole; obiekt przy prawej krawędzi |
| kropka po tytule obok punktu motywu | tytuł bez kropki |
| siatka kropek na gradiencie | siatka tylko na jednolitym tle |
| czarny kadr bez kropek w eksporcie | data-pe-static i await PEmotyw.ready; w razie potrzeby PEmotyw.init(document) |
Jak wdrożyć
Motyw włączasz atrybutem na sekcji. Skrypt sam rozpoznaje kolumnę tekstu, liczy skalę i pilnuje czytelności.
<link rel="stylesheet" href="styles.css">
<section class="ah dk" data-pe-hero="d">
<div class="ah-in">
<h1>Dokąd AI wysyła Polaków nad morze?</h1>
<p>Lead, maks. 3 linie (ok. 150 znaków).</p>
</div>
</section>
<script src="js/pe-light.js"></script>
<script src="js/pe-pl.js"></script>
<script src="js/pe-raster.js"></script>
<script src="js/pe-motyw.js"></script>| Atrybut | Na czym | Co robi |
|---|---|---|
data-pe-hero="d" | .dk | łuk od dołu, raster; domyślny dla artykułu, raportu, slajdu |
data-pe-hero="f" | .ahl.cx-l | jasne: gradient prosty od dołu, szary raster |
data-pe-hero="g" | .dk | łuk od góry, tekst na dole; okładki i social |
data-pe-hero="e" | .dk | obrys z kropek; strony kategorii, mniejsze sekcje |
data-pe-cta="raster|obrys" | .t2end | ciemne CTA z fragmentem obiektu i punktem |
data-pe-tekst | kolumna tekstu | kolumna, którą motyw omija (lewo, gora, dol) |
data-pe-static | sekcja | bez animacji: PDF, druk, eksport, zrzut |
// React / Next.js: po zamontowaniu sekcji
useEffect(() => { window.PEmotyw.init(ref.current); }, []);
// Eksport do PNG/PDF: data-pe-static na sekcji, potem
await window.PEmotyw.ready;Dokumenty i prezentacje bez przeglądarki (Word, PowerPoint, Google Docs i Slides, Canva): motyw i gradienty rysuje JavaScript, więc nie da się ich tam odtworzyć. Używasz kolorów, fontów, logo i jednolitego tła. Nie naśladujesz motywu kształtami.