The motif tells the brand idea: AI recommends your brand in the questions that bring customers. The field of dots is the market of questions. The object emerging from the light is the questions that bring customers. The orange point is the brand recommended by AI.
Idea
This example is live: it is drawn by the same script you use in your materials. Click the frame to replay the animation.
Field of dots The market of questions Everything people ask AI in a category.
Object Questions that bring customers It emerges from the field through light. In the MVP it is the map of Poland.
Point The brand recommended by AI One orange point per element. Always a circle.
Four hero variants
You choose the variant with three questions: does the frame have the object, is it dark or light, and where does the text stand. Dark D by default. Text at the bottom: G. Light: F. Smaller sections and category pages: E.
D · dark. Arc from the bottom, raster. Default for articles, reports and slides.
Show code
<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="#">Product</a><a href="#">Reports</a><a class="on" href="#">Blog</a><a href="#">Pricing</a></nav>
<span class="r"><a class="b b3 n S" href="#">Log in</a><a class="b b1b S" href="#">Book a demo</a></span>
</header>
<div class="ah-in">
<div class="ah-cr"><a href="#">Blog</a><span>/</span><span>Regions of Poland</span></div>
<h1>Where does AI send Poles to the seaside?</h1>
<p>We asked seven AI models where to spend a holiday on the Polish coast and checked which places they recommend most often.</p>
<div class="ah-m"><b>PromptEye research team</b><span>23 October 2026</span><span>9 min read</span></div>
</div>
</section>F · light. Straight gradient from the bottom, grey raster. On the website a frame on the sides; the white page closes the bottom.
Show code
<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="#">Product</a><a href="#">Reports</a><a class="on" href="#">Blog</a><a href="#">Pricing</a></nav>
<span class="r"><a class="b b3 n S" href="#">Log in</a><a class="b b1b S" href="#">Book a demo</a></span>
</header>
<div class="ah-in">
<h1>See how AI recommends your brand</h1>
<p>We check AI answers to the questions that bring customers and show what to change so that AI recommends your brand.</p>
</div>
</section>G · cover. Arc from the top, text at the bottom. Report covers and social media.
Show code
<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="#">Product</a><a href="#">Reports</a><a class="on" href="#">Blog</a><a href="#">Pricing</a></nav>
<span class="r"><a class="b b3 n S" href="#">Log in</a><a class="b b1b S" href="#">Book a demo</a></span>
</header>
<div class="ah-in">
<div class="ah-cr"><span>Report</span><span>·</span><span>March 2026</span></div>
<h1>Tourism in AI recommendations 2026</h1>
<p>Where seven AI models send Poles to the seaside, the mountains, the lakes and for a weekend. Over 5,000 places in 12 chapters.</p>
<div class="ah-m"><b>PromptEye</b><span>12 chapters</span><span>7 AI models</span></div>
<div class="ctas"><a class="b b1b L" href="#">Download the report</a><a class="b b3 L" href="#">See chapters</a></div>
</div>
</section>E · outline. The object drawn as a dot outline. Category pages and smaller sections.
Show code
<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="#">Product</a><a href="#">Reports</a><a class="on" href="#">Blog</a><a href="#">Pricing</a></nav>
<span class="r"><a class="b b3 n S" href="#">Log in</a><a class="b b1b S" href="#">Book a demo</a></span>
</header>
<div class="ah-in">
<div class="ah-cr"><a href="#">Blog</a><span>/</span><span>Categories</span></div>
<h1>Industry reports</h1>
<p>Whole-industry measurements: which brands AI recommends in buying questions and how that changes over time.</p>
</div>
</section>CTA
The dark CTA closes a page or a presentation. It shows a cropped part of the object with the point. It is the only composition in which the orange Moment button (b1a) stands next to the motif point.
Show code
<section class="t2end" data-pe-cta="raster">
<div class="t2end-in">
<h2>See how AI recommends your region</h2>
<p>We will show your brand’s results against the competition. The demo takes 30 minutes.</p>
<div class="pb-ctas"><a class="b b1a L" href="#">Book a demo</a><a class="b b3 L" href="#">Download the report</a></div>
</div>
</section>One motif, every format
The motif is computed from the frame. The pattern is the 1440 × 860 hero, and every other format has the scale s = √(W · H) / 1113. Margins, type and logo size per format are in the table in the Layout chapter. The object always sits at the right edge and fades towards the text.
Show code
<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">Report · Tourism</div>
<h1 style="font-size:80px">Where does AI send Poles to the seaside?</h1>
<p style="font-size:28px;max-width:760px">12,000 answers from seven AI models.</p>
</div>
</section>Show code
<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">Where does AI send Poles to the seaside?</h1></div>
</section>Show code
<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">Where does AI send Poles to the seaside?</h1>
<p style="font-size:28px;max-width:800px">12,000 answers from seven AI models.</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>No logo and text from 400 px: the bottom left corner is covered by the profile photo.
Show code
<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">See how AI recommends your brand</h1></div>
</section>Rules
- The script draws the motif. You never draw dots, raster, map or point in SVG, CSS or your own canvas. You add an attribute.
- Two levels. Raster fill (hero, covers, CTA) and dot outline (category pages, smaller sections).
- The dot is a circle. 10 px grid, six dot sizes.
- Colour. On black from #1B2B9C to #8DA1FF, no white. On white grey.
- One point per element. A 5 px orange circle fitted into the grid.
- The object sits at the right edge. Partly outside the frame. It fades towards the text and never enters the text column.
- Text never stands on colour. The gradient starts below the text column; the script checks it.
- The gradient faces away from the text. D, F, E and CTA from the bottom, G from the top.
- Hero: title and lead up to 3 lines. Longer text shrinks the gradient to a band at the edge.
- Data is linear. Tables, charts and figures without motif dots.
- Animation only fills with dots. About 2.5 s, the point at the end. No loop.
- The headline dot never appears with the motif point. If the frame has the point, the title has no dot.
Common mistakes
| Mistake | Correct |
|---|---|
| dots or map drawn in SVG/CSS | the data-pe-hero attribute; the script draws it |
| text centred over the motif | text on the left, at the top or at the bottom; the object at the right edge |
| headline dot next to the motif point | title without the dot |
| dot grid on a gradient | the dot grid only on a solid background |
| black frame without dots in an export | data-pe-static and await PEmotyw.ready; if needed PEmotyw.init(document) |
Implementation
You switch the motif on with an attribute on the section. The script detects the text column, computes the scale and takes care of legibility.
<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>| Attribute | On | What it does |
|---|---|---|
data-pe-hero="d" | .dk | arc from the bottom, raster; default for article, report, slide |
data-pe-hero="f" | .ahl.cx-l | light: straight gradient from the bottom, grey raster |
data-pe-hero="g" | .dk | arc from the top, text at the bottom; covers and social |
data-pe-hero="e" | .dk | dot outline; category pages, smaller sections |
data-pe-cta="raster|obrys" | .t2end | dark CTA with part of the object and the point |
data-pe-tekst | text column | the column the motif avoids (lewo, gora, dol) |
data-pe-static | section | no animation: PDF, print, export, screenshot |
// 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;Documents and presentations without a browser (Word, PowerPoint, Google Docs and Slides, Canva): the motif and gradients are drawn by JavaScript and cannot be recreated there. Use the colours, fonts, logo and solid backgrounds. Never imitate the motif with shapes.