From 49a329ac4391a1eeff5271856963a2d8c6ef1570 Mon Sep 17 00:00:00 2001
From: Hornwitser <github@hornwitser.no>
Date: Sat, 10 Aug 2024 00:00:26 +0200
Subject: [PATCH] Add 3d Viewport component

Implement a Viewport component and associated update script that allows
rendering 3d content inside it.  This is based on the implementation
used at Furnavia for their 2025 website.
---
 src/components/BasePage.tsx |  1 +
 src/components/Viewport.tsx | 12 ++++++++++++
 web/style.css               | 13 +++++++++++++
 web/viewport.js             | 21 +++++++++++++++++++++
 4 files changed, 47 insertions(+)
 create mode 100644 src/components/Viewport.tsx
 create mode 100644 web/viewport.js
diff --git a/src/components/BasePage.tsx b/src/components/BasePage.tsx
index 289d33f..a252e72 100644
--- a/src/components/BasePage.tsx
+++ b/src/components/BasePage.tsx
@@ -10,6 +10,7 @@ export default function BasePage(props: BaseProps) {
 			<meta charset="utf-8" />
 			<title>{props.title}</title>
 			<link rel="stylesheet" href="/style.css" />
+			<script type="module" defer="" src="viewport.js" />
 		</head>
 		<body>
 			<header class="header">
diff --git a/src/components/Viewport.tsx b/src/components/Viewport.tsx
new file mode 100644
index 0000000..72973d6
--- /dev/null
+++ b/src/components/Viewport.tsx
@@ -0,0 +1,12 @@
+/**
+	3d Viewport
+*/
+export default function Viewport(
+	props: {
+		children: unknown,
+	}
+) {
+	return <div class="viewport in3d">
+		{ props.children }
+	</div>
+}
diff --git a/web/style.css b/web/style.css
index 2680760..ea93d40 100644
--- a/web/style.css
+++ b/web/style.css
@@ -64,6 +64,19 @@ ol, ul {
 	padding-inline-start: 1.25em;
 }
 
+/* 3d viewport */
+.in3d {
+	transform-style: preserve-3d;
+}
+.viewport {
+	pointer-events: none;
+	perspective: 300vmax;
+	perspective-origin: 50% var(--y-offset);
+}
+.viewport * {
+	pointer-events: initial;
+}
+
 /* Base Page Layout */
 body {
 	max-width: 50rem;
diff --git a/web/viewport.js b/web/viewport.js
new file mode 100644
index 0000000..29030d5
--- /dev/null
+++ b/web/viewport.js
@@ -0,0 +1,21 @@
+function setViewportOffset(viewport) {
+	// Calculate the distance from the top of the element to the center of the screen.
+	// This is an accurate rendering, but we might want to change it for artistic effects.
+	const windowHeight = window.innerHeight;
+	const rect = viewport.getBoundingClientRect();
+	if (rect.top > windowHeight || rect.bottom < 0) {
+		return;
+	}
+	const yOffset = windowHeight / 2 - rect.top;
+	viewport.style.setProperty('--y-offset', yOffset+"px");
+}
+
+const viewports = document.querySelectorAll(".viewport");
+function updateViewports() {
+	for (const viewport of viewports) {
+		setViewportOffset(viewport);
+	}
+}
+window.addEventListener("scroll", updateViewports, { passive: true });
+window.addEventListener("resize", updateViewports, { passive: true });
+updateViewports();
