diff --git a/.env.example.ini b/.env.example.ini
index 8d9449e..4b698eb 100755
--- a/.env.example.ini
+++ b/.env.example.ini
@@ -4,4 +4,7 @@ api_key     = ""
 verify_peer = 0
 
 [time]
-date_time_zone = "Europe/Stockholm"
\ No newline at end of file
+date_time_zone = "Europe/Stockholm"
+
+[playground]
+misskey_demo_instance = ""
\ No newline at end of file
diff --git a/public/assets/css/pages/playground/index.css b/public/assets/css/pages/playground/index.css
index 5f9e45a..907235b 100644
--- a/public/assets/css/pages/playground/index.css
+++ b/public/assets/css/pages/playground/index.css
@@ -72,6 +72,42 @@ section.sss button {
 	margin-top: var(--padding);
 }
 
+/* ## Misskey */
+
+section.misskey-feed {
+	display: grid;
+	align-items: center;
+	height: 25vh;
+	overflow: hidden;
+	margin: var(--padding) 0;
+}
+
+section.misskey-feed misskey-note {
+	gap: calc(var(--padding) / 2);
+	display: none;
+	align-items: center;
+	flex-direction: column;
+	padding: var(--padding);
+	border-radius: 6px;
+	background-color: rgba(255, 255, 255, .1);
+	grid-template-columns: 50px 1fr;
+}
+
+section.misskey-feed misskey-note.active {
+	display: grid;
+}
+
+section.misskey-feed misskey-note img {
+	border-radius: 6px;
+	width: 100%;
+}
+
+section.misskey-feed misskey-note div {
+	display: flex;
+	gap: calc(var(--padding) / 2);
+	flex-direction: column;
+}
+
 /* ## Coffee */
 
 section.coffee {
diff --git a/public/assets/js/pages/playground/index.js b/public/assets/js/pages/playground/index.js
index 6530a3a..977d012 100644
--- a/public/assets/js/pages/playground/index.js
+++ b/public/assets/js/pages/playground/index.js
@@ -1,5 +1,6 @@
 import { Elevent } from "/assets/js/modules/npm/Elevent.mjs";
 
+// Super Secret Settings trigger
 new Elevent("click", document.querySelector("section.sss button"), (event) => {
 	const SSS_TAG_NAME = "super-secret-settings";
 
@@ -20,4 +21,72 @@ new Elevent("click", document.querySelector("section.sss button"), (event) => {
 
 	// Navigate SSS element to playground page
 	new vegvisir.Navigation("/playground/super-secret-settings").navigate(sssElement);
+});
+
+// Misskey-microblogger preview
+fetch(new URL(document.querySelector("section.misskey-feed").dataset.endpoint), {
+	method: "POST",
+	headers: {
+		"Content-Type": "application/json"
+	},
+	body: JSON.stringify({
+		withFiles: false,
+		withBots: true,
+		limit: 5
+	})
+}).then(async (response) => {
+	const template = document.querySelector("section.misskey-feed template");
+	const feed = document.querySelector("section.misskey-feed");
+	
+	feed.innerHTML = "";
+	feed.dataset.loaded = true;
+
+	// Create element for each note from template
+	(await response.json()).forEach((note, idx) => {
+		const element = template.content.cloneNode(true);
+		const url = new URL(response.url);
+		url.pathname = `/notes/${note.id}`;
+
+		// Update template DOM
+		element.querySelector("a").href = url.toString();
+		element.querySelector(".text").innerText = note.text;
+		element.querySelector(".pfp").src = note.user.avatarUrl;
+		element.querySelector(".posted").innerText = note.user.createdAt;
+		element.querySelector(".username").innerText = note.user.username;
+
+		// Mark first element as active for fade animation
+		if (idx === 0) {
+			element.querySelector("misskey-note").classList.add("active");
+		}
+
+		feed.appendChild(element);
+	});
+
+	// Cycle between each note with a fade-out, fade-in animation
+	const FADE_DURATION = 300;
+	const DISPLAY_TIMEOUT = 4000;
+
+	const fadeOut = async () => {
+		await feed.animate({opacity: 0}, {duration: FADE_DURATION, fill: "forwards"}).finished;
+		setTimeout(() => {
+			const element = feed.querySelector("misskey-note.active");
+			element.classList.remove("active");
+		
+			// Make next sibling element active or roll over if last
+			element.nextElementSibling
+				? element.nextElementSibling.classList.add("active")
+				: feed.firstElementChild.classList.add("active");
+
+			fadeIn();
+		}, FADE_DURATION);
+	}
+
+	const fadeIn = async () => {
+		await feed.animate({opacity: 1}, {duration: FADE_DURATION, fill: "forwards"}).finished;
+		setTimeout(() => {
+			fadeOut();
+		}, DISPLAY_TIMEOUT);
+	}
+
+	setTimeout(() => fadeOut(), DISPLAY_TIMEOUT);
 });
\ No newline at end of file
diff --git a/public/playground/index.php b/public/playground/index.php
index 9606726..c78acf4 100644
--- a/public/playground/index.php
+++ b/public/playground/index.php
@@ -113,17 +113,39 @@
 	<?php endforeach; ?>
 
 </section>
+<!--
 <section class="sss">
 	<h1>I'm so bored.</h1>
 	<p>Don't like the way my website looks? These oficially very Super Secret Settings<sup><a href="https://minecraft-archive.fandom.com/wiki/Super_Secret_Settings">&#8482;</a></sup> will give you something else to look at!</p>
 	<button class="inline">Try it</button>
 </section>
+-->
+<section>
+	<p>I set up a microblogging instance where bots endlessly talk with each other. It's as dumb or dumber than you think - the idea that is. The bots are even dumber, and dumb bots on social media was <a href="https://codeberg.org/vlw/misskey-microblogger#background">part of the reason</a> why I made this program.</p>
+</section>
+<section class="misskey-feed" data-endpoint="<?= $_ENV["playground"]["misskey_demo_instance"] ?>">
+	<h3>What-a' bots doin'?!</h3>
+	<p>Loading feed preview...</p>
+	<template>
+		<misskey-note>
+			<img class="pfp">
+			<a><div>
+				<p><strong class="username"></strong> - <span class="posted"></span></p>
+				<p class="text"></p>
+			</div></a>
+		</misskey-note>
+	</template>
+</section>
+<section class="actions">
+	<a href="https://codeberg.org/vlw/misskey-microblogger"><button class="inline">view source code</button></a>
+	<a href="https://misskey-microblogger.sites.vlw.se"><button class="inline solid">open website</button></a>
+</section>
 <section class="coffee">
 	<img src="data:image/gif;base64,<?= base64_encode(VV::embed("public/assets/media/playground/coffee.gif")) ?>">
 	<div>
 		<h1>What else.. I've had <?= $coffee->get_today() ?> cup<?= to_plural($coffee->get_today()) ?> of coffee today!</h1>
 		<p>That's <?= $coffee->get_average_month_str() ?> the daily average for me (last 30 days). Here I'm counting how many ~300ml cups of coffee I've had since midnight for my timezone <?= $_ENV["time"]["date_time_zone"] ?>, that was <?= $time->since_midnight_str() ?> ago.</p>
-		<p>How much coffee is enough coffee? <a href="<?= $_ENV["api"]["base_url"] . Endpoints::PLAYGROUND_COFFEE->value ?>">Click here to see my answer!!</a> (NOT CLICKBAIT). Each array value is a UNIX timestamp that represents a single cup of coffee.</p>
+		<p>How much coffee is enough coffee? <a href="<?= $_ENV["api"]["base_url"] . Endpoints::PLAYGROUND_COFFEE->value ?>">Click here to see my answer!</a> (NOT CLICKBAIT, RAW DATA!). Each array value is a UNIX timestamp that represent a single cup of coffee.</p>
 	</div>
 </section>
 <script type="module"><?= VV::js("public/assets/js/pages/playground/index") ?></script>
\ No newline at end of file