train: let's do a version without the track transform

deno.lock

@@ -123,6 +123,8 @@
     "https://esm.sh/preact@10.16.0/jsx-runtime?dts": "9e67b64a5b48299c77d30bffc213735fdcf4b3b5d4ad8ff8d4136f246de5fa34",
     "https://esm.sh/stable/preact@10.16.0/denonext/jsx-runtime.js": "64770c709df77c4b64b79f84a4abf6189fd0c3ea461121870eca0cf2bcca87b0",
     "https://esm.sh/stable/preact@10.16.0/denonext/preact.mjs": "01dc8bdf124926c611c0711081b9c162cf2735cccad7c2bc9914766f633ddb1d",
+    "https://esm.sh/stable/preact@10.16.0/denonext/src.js": "a95281269ac2665427e647cde8628d5cd6eef13bb6bea381c3167a78fa922316",
+    "https://esm.sh/v128/preact@10.16.0/src/index.js": "3bafc9400950c38b80163dcbcd4538a54ef158a83f448517f34324c5685f1569",
     "https://esm.sh/v134/preact-render-to-string@5.2.0/X-ZS9wcmVhY3Q/denonext/preact-render-to-string.mjs": "b2b771d82125460bd3e5cdf20ebd662a08c4c61e34b174cd11db929dd5883966"
   }
 }

html/train.tsx

@@ -0,0 +1,52 @@
+import { render_and_copy } from "./common.tsx";
+import { ComponentChildren } from "preact";
+
+const Rail = ({ rotation, r }: { rotation: string; r: string }) => (
+    <div
+        style={{
+            transform: `rotate(${rotation}) translateX(${r})`,
+            // transformOrigin: "bottom",
+            gridArea: "1/1",
+        }}
+    >
+        🪜
+    </div>
+);
+
+const Track = ({
+    segments,
+    r,
+    children,
+}: {
+    segments: number;
+    r: string;
+    children?: ComponentChildren;
+}) => (
+    <div
+        style={{
+            display: "grid",
+            width: "100%",
+            aspectRatio: "2/1",
+            justifyItems: "center",
+            alignItems: "center",
+            transform: "rotate3d(1,0,0,60deg)",
+            margin: "0 auto",
+        }}
+    >
+        {...Array.from({ length: segments }, (_, i) => (
+            // deg is actually more efficient lel
+            <Rail rotation={`${(360 / segments) * i}deg`} r={r} />
+        ))}
+        {children}
+    </div>
+);
+
+render_and_copy(
+    <Track segments={60} r={"8rem"}>
+        <div id="contrainer">
+            <div id="another-contrainer">
+                <div id="train">🚂</div>
+            </div>
+        </div>
+    </Track>
+);