ATMentions
Webmentions for the ATmosphere. Drop one tag on any page and show how the open atproto network reacted to it — Bluesky likes & reposts, standard.site recommends, reads, Frontpage, Margin notes, Semble saves, and anything built next. No accounts, no tracking, no lock-in: it's as plug 'n play as a jquery plugin :-).
The widget is open-source and can be themed with CSS variables.
See it live — four variants
Live reactions to this very page (yes, the one you're reading), rendered in each variant:
Default — variant="default": a strip of chips, one per reaction type.
Minimal — variant="minimal": a single count that expands to the breakdown.
Full — variant="full": one row per type, tagged with the logo of the app it came from.
Mentions — variant="mentions": one webmention-style sentence per person, combining everything they did.
Add it to your site
<script type="module" src="https://cdn.jsdelivr.net/gh/pixeline/atmentions@v0.1.2/dist/atmentions.min.js"></script>
<atmentions-reactions data-url="https://your.site/post"></atmentions-reactions>
Point data-url at the page you want reactions for — it's the only required attribute. Everything below is optional.
Theme — the variant attribute
variant chooses the layout (default: default):
variant="default"— a horizontal strip of chips, one per reaction type; click a chip to reveal who reacted.variant="minimal"— a single "◇ N ATmosphere reactions" count that expands to the per-type breakdown. Best where space is tight.variant="full"— one row per reaction type, each tagged with the logo of the app it came from (Bluesky, Margin, Semble, standard.site, Frontpage, standard-reader, pckt — name on hover). Click a row to see who.variant="mentions"— one webmention-style sentence per person, combining everything they did ("liked and replied to this on Bluesky, and bookmarked it on Margin"), newest first.
<atmentions-reactions data-url="https://your.site/post" variant="full"></atmentions-reactions>
Light or dark — the appearance attribute
Defaults to a light palette; add appearance="dark" for the dark one:
<atmentions-reactions data-url="https://your.site/post" appearance="dark"></atmentions-reactions>
What it matches reactions against
data-url(required) — the page's public URL. Matches URL-keyed reactions: Margin notes, Semble saves, Frontpage posts, Bluesky link cards.data-aturi— your page's standard.site document AT-URI (at://…/site.standard.document/…). Matches recommends, reads, and other AT-URI-keyed reactions.data-bsky(advanced) — an anchor Bluesky post AT-URI, to tie likes/reposts/replies to a specific post.
Empty state
empty-text="…"— custom text when a page has no reactions yet (default: "No ripples in the ATmosphere yet.").hide-empty— render nothing at all when there are no reactions, instead of the empty-state line.
Colors — CSS variables
The widget renders in a Shadow DOM, so your page's CSS can't leak in and break it — but these custom properties pass through. Set them on the element (or any ancestor):
atmentions-reactions {
--atmo-fg: #3d3c3c; /* text + icon color */
--atmo-muted: #777; /* secondary labels */
--atmo-accent: #f7b4ed; /* hover / focus border */
--atmo-bg: transparent; /* chip / row background */
--atmo-radius: 0.5rem; /* corner rounding */
--atmo-font: system-ui, sans-serif; /* typeface */
}