A small tool to view real-world ActivityPub objects as JSON! Enter a URL
or username from Mastodon or a similar service below, and we'll send a
request with
the right
Accept
header
to the server to view the underlying object.
{
"@context": [
"https://www.w3.org/ns/activitystreams",
{
"ostatus": "http://ostatus.org#",
"atomUri": "ostatus:atomUri",
"inReplyToAtomUri": "ostatus:inReplyToAtomUri",
"conversation": "ostatus:conversation",
"sensitive": "as:sensitive",
"toot": "http://joinmastodon.org/ns#",
"votersCount": "toot:votersCount",
"blurhash": "toot:blurhash",
"focalPoint": {
"@container": "@list",
"@id": "toot:focalPoint"
},
"Hashtag": "as:Hashtag"
}
],
"id": "https://mastodon.social/users/anatudor/statuses/112551564705281523",
"type": "Note",
"summary": null,
"inReplyTo": null,
"published": "2024-06-03T07:43:04Z",
"url": "https://mastodon.social/@anatudor/112551564705281523",
"attributedTo": "https://mastodon.social/users/anatudor",
"to": [
"https://www.w3.org/ns/activitystreams#Public"
],
"cc": [
"https://mastodon.social/users/anatudor/followers",
"https://fosstodon.org/users/codepen",
"https://front-end.social/users/bramus"
],
"sensitive": false,
"atomUri": "https://mastodon.social/users/anatudor/statuses/112551564705281523",
"inReplyToAtomUri": null,
"conversation": "tag:mastodon.social,2024-06-03:objectId=721568396:objectType=Conversation",
"content": "<p>Here's a pure CSS char by char text reveal on scroll! </p><p><span class=\"h-card\" translate=\"no\"><a href=\"https://fosstodon.org/@codepen\" class=\"u-url mention\">@<span>codepen</span></a></span> demo <a href=\"https://codepen.io/thebabydino/pen/MWPeLmp\" target=\"_blank\" rel=\"nofollow noopener\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">codepen.io/thebabydino/pen/MWP</span><span class=\"invisible\">eLmp</span></a></p><p>No splitting text into individual characters!</p><p>Inspired by an old Toblerone Story page, except that used JS (reasonable for cross-browser support) and was splitting the text into individual characters (yikes! 😱)</p><p>cc <span class=\"h-card\" translate=\"no\"><a href=\"https://front-end.social/@bramus\" class=\"u-url mention\">@<span>bramus</span></a></span> </p><p><a href=\"https://mastodon.social/tags/CSS\" class=\"mention hashtag\" rel=\"tag\">#<span>CSS</span></a> <a href=\"https://mastodon.social/tags/pureCSS\" class=\"mention hashtag\" rel=\"tag\">#<span>pureCSS</span></a> <a href=\"https://mastodon.social/tags/noJS\" class=\"mention hashtag\" rel=\"tag\">#<span>noJS</span></a> <a href=\"https://mastodon.social/tags/scroll\" class=\"mention hashtag\" rel=\"tag\">#<span>scroll</span></a> <a href=\"https://mastodon.social/tags/scrollAnimation\" class=\"mention hashtag\" rel=\"tag\">#<span>scrollAnimation</span></a> <a href=\"https://mastodon.social/tags/text\" class=\"mention hashtag\" rel=\"tag\">#<span>text</span></a> <a href=\"https://mastodon.social/tags/textEffect\" class=\"mention hashtag\" rel=\"tag\">#<span>textEffect</span></a> <a href=\"https://mastodon.social/tags/revealEffect\" class=\"mention hashtag\" rel=\"tag\">#<span>revealEffect</span></a> <a href=\"https://mastodon.social/tags/code\" class=\"mention hashtag\" rel=\"tag\">#<span>code</span></a> <a href=\"https://mastodon.social/tags/coding\" class=\"mention hashtag\" rel=\"tag\">#<span>coding</span></a> <a href=\"https://mastodon.social/tags/frontend\" class=\"mention hashtag\" rel=\"tag\">#<span>frontend</span></a> <a href=\"https://mastodon.social/tags/webDev\" class=\"mention hashtag\" rel=\"tag\">#<span>webDev</span></a> <a href=\"https://mastodon.social/tags/web\" class=\"mention hashtag\" rel=\"tag\">#<span>web</span></a> <a href=\"https://mastodon.social/tags/webDevelopment\" class=\"mention hashtag\" rel=\"tag\">#<span>webDevelopment</span></a> <a href=\"https://mastodon.social/tags/dev\" class=\"mention hashtag\" rel=\"tag\">#<span>dev</span></a></p>",
"contentMap": {
"en": "<p>Here's a pure CSS char by char text reveal on scroll! </p><p><span class=\"h-card\" translate=\"no\"><a href=\"https://fosstodon.org/@codepen\" class=\"u-url mention\">@<span>codepen</span></a></span> demo <a href=\"https://codepen.io/thebabydino/pen/MWPeLmp\" target=\"_blank\" rel=\"nofollow noopener\" translate=\"no\"><span class=\"invisible\">https://</span><span class=\"ellipsis\">codepen.io/thebabydino/pen/MWP</span><span class=\"invisible\">eLmp</span></a></p><p>No splitting text into individual characters!</p><p>Inspired by an old Toblerone Story page, except that used JS (reasonable for cross-browser support) and was splitting the text into individual characters (yikes! 😱)</p><p>cc <span class=\"h-card\" translate=\"no\"><a href=\"https://front-end.social/@bramus\" class=\"u-url mention\">@<span>bramus</span></a></span> </p><p><a href=\"https://mastodon.social/tags/CSS\" class=\"mention hashtag\" rel=\"tag\">#<span>CSS</span></a> <a href=\"https://mastodon.social/tags/pureCSS\" class=\"mention hashtag\" rel=\"tag\">#<span>pureCSS</span></a> <a href=\"https://mastodon.social/tags/noJS\" class=\"mention hashtag\" rel=\"tag\">#<span>noJS</span></a> <a href=\"https://mastodon.social/tags/scroll\" class=\"mention hashtag\" rel=\"tag\">#<span>scroll</span></a> <a href=\"https://mastodon.social/tags/scrollAnimation\" class=\"mention hashtag\" rel=\"tag\">#<span>scrollAnimation</span></a> <a href=\"https://mastodon.social/tags/text\" class=\"mention hashtag\" rel=\"tag\">#<span>text</span></a> <a href=\"https://mastodon.social/tags/textEffect\" class=\"mention hashtag\" rel=\"tag\">#<span>textEffect</span></a> <a href=\"https://mastodon.social/tags/revealEffect\" class=\"mention hashtag\" rel=\"tag\">#<span>revealEffect</span></a> <a href=\"https://mastodon.social/tags/code\" class=\"mention hashtag\" rel=\"tag\">#<span>code</span></a> <a href=\"https://mastodon.social/tags/coding\" class=\"mention hashtag\" rel=\"tag\">#<span>coding</span></a> <a href=\"https://mastodon.social/tags/frontend\" class=\"mention hashtag\" rel=\"tag\">#<span>frontend</span></a> <a href=\"https://mastodon.social/tags/webDev\" class=\"mention hashtag\" rel=\"tag\">#<span>webDev</span></a> <a href=\"https://mastodon.social/tags/web\" class=\"mention hashtag\" rel=\"tag\">#<span>web</span></a> <a href=\"https://mastodon.social/tags/webDevelopment\" class=\"mention hashtag\" rel=\"tag\">#<span>webDevelopment</span></a> <a href=\"https://mastodon.social/tags/dev\" class=\"mention hashtag\" rel=\"tag\">#<span>dev</span></a></p>"
},
"attachment": [
{
"type": "Document",
"mediaType": "video/mp4",
"url": "https://files.mastodon.social/media_attachments/files/112/551/549/636/697/920/original/f06b55859781f34e.mp4",
"name": "Animated GIF. Shows a fixed position paragraph of text, always in the middle of the viewport regardless of scroll. This paragraph, initially a pale pink on a light background filling each letter, one by one, with a darker, more vibrant pink upon scrolling. When the page isn't scrolled at all yet, no letter is filled yet, they're all light pink. When the page is scrolled all the way down, all the letters are filled up with the darker pink.",
"blurhash": "U7Q]$m00Ioxu0KbbniX8X,X8nPg2iwkCkBa|",
"focalPoint": [
0,
0
],
"width": 800,
"height": 580
},
{
"type": "Document",
"mediaType": "image/png",
"url": "https://files.mastodon.social/media_attachments/files/112/551/550/476/996/099/original/3e299417a30fc987.png",
"name": "Screenshot for this demo with the paragraph filled up in the darker pink up to about half the way. The DevTools pannel is open on the right to highlight the fact that there is absolutely no JS and no splitting of the paragraph text into individual letters.",
"blurhash": "U|Lqb2~qIUIUWBWBj[j[f+fkf6f7f6fQfQfQ",
"focalPoint": [
0,
0
],
"width": 1867,
"height": 969
},
{
"type": "Document",
"mediaType": "image/png",
"url": "https://files.mastodon.social/media_attachments/files/112/551/555/548/186/780/original/af483f2af47a9131.png",
"name": "Screenshot of the inspiration Toblerone Story page. DevTools panel open on the right to show that the way this is one is by splitting the paragraph into words and then each word into letters.",
"blurhash": "U~J*n]~qxuIUt7t7j[ayRjRjayj[t7ofj[ay",
"focalPoint": [
0,
0
],
"width": 820,
"height": 409
},
{
"type": "Document",
"mediaType": "image/png",
"url": "https://files.mastodon.social/media_attachments/files/112/551/556/232/456/996/original/51e1e86a4c819a22.png",
"name": "Screenshot of what the demo looks in a non-supporting browser. The text is always fully filled up and there is a support info box saying:\n\n\"Sorry, it appears your browser does not support animation-timeline, which is necessary for the scroll effects in this demo demo to work. As of June 2024, this is only supported by Chromium browsers 115+ and Firefox 110+ with the layout.css.scroll-driven-animations.enabled flag set to true in about:config.\"",
"blurhash": "UeP$j:M{lAWB4Uo#jEi_9}oJibkWDNnOkqbw",
"focalPoint": [
0,
0
],
"width": 1417,
"height": 788
}
],
"tag": [
{
"type": "Mention",
"href": "https://fosstodon.org/users/codepen",
"name": "@codepen@fosstodon.org"
},
{
"type": "Mention",
"href": "https://front-end.social/users/bramus",
"name": "@bramus@front-end.social"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/css",
"name": "#css"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/purecss",
"name": "#purecss"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/nojs",
"name": "#nojs"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/scroll",
"name": "#scroll"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/scrollanimation",
"name": "#scrollanimation"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/text",
"name": "#text"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/texteffect",
"name": "#texteffect"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/revealeffect",
"name": "#revealeffect"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/code",
"name": "#code"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/coding",
"name": "#coding"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/frontend",
"name": "#frontend"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/webdev",
"name": "#webdev"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/web",
"name": "#web"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/webdevelopment",
"name": "#webdevelopment"
},
{
"type": "Hashtag",
"href": "https://mastodon.social/tags/dev",
"name": "#dev"
}
],
"replies": {
"id": "https://mastodon.social/users/anatudor/statuses/112551564705281523/replies",
"type": "Collection",
"first": {
"type": "CollectionPage",
"next": "https://mastodon.social/users/anatudor/statuses/112551564705281523/replies?min_id=112564538013198075&page=true",
"partOf": "https://mastodon.social/users/anatudor/statuses/112551564705281523/replies",
"items": [
"https://mastodon.social/users/anatudor/statuses/112554194920113197",
"https://mastodon.social/users/anatudor/statuses/112564538013198075"
]
}
},
"likes": {
"id": "https://mastodon.social/users/anatudor/statuses/112551564705281523/likes",
"type": "Collection",
"totalItems": 20
},
"shares": {
"id": "https://mastodon.social/users/anatudor/statuses/112551564705281523/shares",
"type": "Collection",
"totalItems": 15
}
}