fancy-pixel

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 stays visible across the web. fancy-pixel is the embeddable badge that does the proving — and the data pipe in the same chip: one embed verifies the site and streams its interaction analytics (clicks, scroll, focus heatmaps) to a host's endpoint, keyed by siteKey. That is how external sites feed a hosting project — the Showcase + the coming Analytics Suite — while a project measuring itself reaches for fancy-heuristics directly. The hard part most badges get wrong is that the host page can simply hide them with one CSS rule — so verification is meaningless. fancy-pixel renders into an open Shadow DOM (host CSS can't reach in), confirms with an IntersectionObserver that it is actually on-screen, and only counts a page as seen once it is. And because the suite is Human+, the badge is inhabitable: it carries a stable handle and dispatches a shown event so an embedded agent reads its presence and state without scraping the DOM.

A zero-dependency, vanilla-TypeScript embeddable 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); mode ∈ placed (inline at a target selector/element) / floating (position: fixed in a corner). Every style renders into an open Shadow DOM so host CSS cannot hide it, and emits the data-fancy-badge marker the Showcase scanner detects plus a stable data-fancy-pixel handle and data-fancy-pixel-style. An IntersectionObserver verifies genuine on-screen visibility and dispatches a fancy-pixel:shown CustomEvent on document. The API is one call — mountPixel({ style, mode, target?, siteKey, endpoint?, href? }) → a { host, visible, destroy() } handle — or a single <script> tag that loads and auto-inits from its own data-* attributes (the IIFE global build also exposes window.FancyPixel.mountPixel). One endpoint, full pipe (opt-in): set endpoint and the single embed 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 data-collect="false" / collect: false for badge + liveness only; omit endpoint and no network request is ever made. The collector is inlined into the IIFE global, so the one external-site <script> is fully self-contained.

No build step — drop the one-line tag: <script src="https://unpkg.com/@particle-academy/fancy-pixel/dist/fancy-pixel.global.min.js" data-style="badge" data-mode="floating" data-site="YOUR_SITE_KEY" data-endpoint="https://your-host/heuristics"></script>. Or install and mount programmatically: npm i @particle-academy/fancy-pixel, then import { mountPixel } from "@particle-academy/fancy-pixel"; const pixel = mountPixel({ style: "badge", mode: "floating", siteKey: "YOUR_SITE_KEY", endpoint: "https://your-host/heuristics" }); — call pixel.destroy() to tear it down. For an inline badge pass mode: "placed" + a target selector/element. Leave endpoint off for a pure visual badge with zero network traffic; set it and one embed both verifies the site and streams its interaction analytics to the host (add data-collect="false" for badge + liveness only). Watch presence with document.addEventListener("fancy-pixel:shown", …).