diff --git a/src/content/sandbox.tsx b/src/content/sandbox.tsx
new file mode 100644
index 0000000..0f41b64
--- /dev/null
+++ b/src/content/sandbox.tsx
@@ -0,0 +1,31 @@
+import BasePage from "../components/BasePage.js";
+import Viewport from "../components/Viewport.js";
+import type { Page } from "../types.js";
+
+const title = "Sandbox page";
+export const sandbox: Page = {
+	title,
+	ref: "/sandbox.html",
+	content: <BasePage title={title}>
+		<main>
+			<h1>{title}</h1>
+			<div style="height: 30em"></div>
+			<div class="sandbox-inset-3d">
+				<Viewport>
+					<div class="ceiling"></div>
+					<div class="content">
+						<p>
+							This is some text to test selection and rendering of a 3d transformed section.
+							<a href="/index.html">Go to home page</a>
+						</p>
+						<p>
+							Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+						</p>
+					</div>
+					<div class="floor"></div>
+				</Viewport>
+			</div>
+			<div style="height: 30em"></div>
+		</main>
+	</BasePage>
+}
diff --git a/src/pages.tsx b/src/pages.tsx
index 3f9f5d7..1325e8d 100644
--- a/src/pages.tsx
+++ b/src/pages.tsx
@@ -3,6 +3,7 @@ import { index } from "./content/index.js";
 import { updates, updatesIndex } from "./content/updates.js";
 import { words, wordsIndex } from "./content/words.js";
 import { projects, projectsIndex } from "./content/projects.js";
+import { sandbox } from "./content/sandbox.js";
 import { links } from "./content/links.js";
 
 export const pages: Page[] = [
@@ -14,4 +15,5 @@ export const pages: Page[] = [
 	projectsIndex,
 	...projects,
 	links,
+	sandbox,
 ];
diff --git a/web/style.css b/web/style.css
index ea93d40..2910b26 100644
--- a/web/style.css
+++ b/web/style.css
@@ -108,3 +108,33 @@ body {
 .author p {
 	margin-block-end: 0;
 }
+
+/* sandbox */
+.sandbox-inset-3d {
+	contain: paint;
+	background: black;
+}
+.sandbox-inset-3d .content {
+	background: grey;
+	transform: translateZ(-10rem);
+	padding: 1rem 1rem;
+	width: 80%;
+	margin-inline: auto;
+}
+.sandbox-inset-3d div:where(.floor, .ceiling) {
+	position: absolute;
+	inset-inline: 0;
+	height: 20rem;
+}
+.sandbox-inset-3d .floor {
+	bottom: 0;
+	background: blue;
+	transform: rotateX(90deg);
+	transform-origin: 0 100%;
+}
+.sandbox-inset-3d .ceiling {
+	top: 0;
+	background: green;
+	transform: rotateX(-90deg);
+	transform-origin: 0 0;
+}