A site built with Fancy UI wants to prove it — that's how it earns a listing in the public Showcase, and how the suite's reach stays visible. FancyPixel is the embeddable badge that does the proving: it renders into an open Shadow DOM so the host page's CSS can't hide it (visibility is part of verification), and it stamps the same data-fancy-badge marker the Showcase scanner already detects. The same chip is the data pipe: point it at a host's endpoint and one embed both verifies the site and streams its interaction analytics — clicks, scroll, focus heatmaps — to that host, keyed by siteKey. That is how external sites feed a hosting project (the Showcase + the coming Analytics Suite); a project measuring itself uses fancy-heuristics directly. And because it's Human+, it's inhabitable — the badge exposes a stable data-fancy-pixel handle and dispatches a fancy-pixel:shown event, so an embedded agent reads its presence and state without scraping the DOM.

FancyPixel is an embeddable verification badge + liveness/collection beacon with three styles × two placement modes: style ∈ badge ("Powered by Fancy UI" wordmark + glyph) / mark (glyph only) / beacon (a pulsing dot), and mode ∈ placed (inline at a target selector/element) / floating (position: fixed in a screen corner). It renders into an open Shadow DOM — host CSS cannot hide it — and every style emits the data-fancy-badge marker the Showcase scanner detects plus a stable data-fancy-pixel handle. An IntersectionObserver confirms it is genuinely on-screen (not display:none, off-screen, or 0-size) and dispatches a fancy-pixel:shown CustomEvent on first visibility. The API is a single call — mountPixel({ style, mode, target?, siteKey, endpoint?, href? }) returning a { host, visible, destroy() } handle — or a one-line <script> tag that auto-inits from its own data-* attributes. One endpoint, full pipe (opt-in): set endpoint and the single embed does three things — renders the badge, POSTs the verification/liveness ping to ${endpoint}/pixel, and starts a bundled fancy-heuristics-js collector that streams interaction events (clicks, scroll, pointer heatmap, dwell — humans and agents) to ${endpoint}/collect, keyed by siteKey. Pass collect: false / data-collect="false" for badge + liveness only; omit endpoint and no network request is ever made. The collector is inlined into the global build, so the one external-site <script> is self-contained — no third-party runtime dependencies.

Drop the one-line embed — no build step: <script src="…/fancy-pixel.global.min.js" data-style="badge" data-mode="floating" data-site="YOUR_KEY" data-endpoint="https://your-host/heuristics"></script>. Or mount it programmatically: import { mountPixel } from "@particle-academy/fancy-pixel"; const pixel = mountPixel({ style: "badge", mode: "floating", siteKey: "YOUR_KEY", endpoint: "https://your-host/heuristics" }); — then pixel.destroy() to tear it down. For an inline placement, pass mode: "placed" + a target selector or element. Leave endpoint off and it's a pure visual badge with no network traffic; set it and the one embed renders the badge and streams the site's interaction analytics to the host (add data-collect="false" for badge + liveness only). Observe presence with document.addEventListener("fancy-pixel:shown", …) or read the data-fancy-pixel handle directly.