<svelte:body> chapter

site/content/tutorial/16-special-elements/05-svelte-body/app-a/App.svelte

@@ -0,0 +1,30 @@
+<script>
+	let hereKitty = false;
+
+	const handleMouseenter = () => hereKitty = true;
+	const handleMouseleave = () => hereKitty = false;
+</script>
+
+<style>
+	img {
+		position: absolute;
+		left: 0;
+		bottom: -60px;
+		transform: translate(-80%, 0) rotate(-30deg);
+		transform-origin: 100% 100%;
+		transition: transform 0.4s;
+	}
+
+	.curious {
+		transform: translate(-15%, 0) rotate(0deg);
+	}
+</style>
+
+<svelte:body/>
+
+<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
+<img
+	class:curious={hereKitty}
+	alt="Kitten wants to know what's going on"
+	src="tutorial/kitten.png"
+>

site/content/tutorial/16-special-elements/05-svelte-body/app-b/App.svelte

@@ -0,0 +1,33 @@
+<script>
+	let hereKitty = false;
+
+	const handleMouseenter = () => hereKitty = true;
+	const handleMouseleave = () => hereKitty = false;
+</script>
+
+<style>
+	img {
+		position: absolute;
+		left: 0;
+		bottom: -60px;
+		transform: translate(-80%, 0) rotate(-30deg);
+		transform-origin: 100% 100%;
+		transition: transform 0.4s;
+	}
+
+	.curious {
+		transform: translate(-15%, 0) rotate(0deg);
+	}
+</style>
+
+<svelte:body
+	on:mouseenter={handleMouseenter}
+	on:mouseleave={handleMouseleave}
+/>
+
+<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
+<img
+	class:curious={hereKitty}
+	alt="Kitten wants to know what's going on"
+	src="tutorial/kitten.png"
+>

site/content/tutorial/16-special-elements/05-svelte-body/text.md

@@ -0,0 +1,14 @@
+---
+title: <svelte:body>
+---
+
+Similar to `<svelte:window>`, the `<svelte:body>` element allows you to listen for events that fire on `body`. This is useful with the `mouseenter` and `mouseleave` events, which don't fire on `window`.
+
+Add the `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag:
+
+```html
+<svelte:body
+	on:mouseenter={handleMouseenter}
+	on:mouseleave={handleMouseleave}
+/>
+```