train: screw this

html/train.tsx

@@ -5,7 +5,6 @@ const Rail = ({ rotation, r }: { rotation: string; r: string }) => (
     <div
         style={{
             transform: `rotate(${rotation}) translateX(${r})`,
-            // transformOrigin: "bottom",
             gridArea: "1/1",
         }}
     >
@@ -29,24 +28,53 @@ const Track = ({
             aspectRatio: "2/1",
             justifyItems: "center",
             alignItems: "center",
-            transform: "rotate3d(1,0,0,60deg)",
+            transform: "rotateX(60deg)",
             margin: "0 auto",
+            perspective: "1000px",
+            perspectiveOrigin: "top",
         }}
     >
         {...Array.from({ length: segments }, (_, i) => (
-            // deg is actually more efficient lel
+            // deg is actually more space-efficient lel
             <Rail rotation={`${(360 / segments) * i}deg`} r={r} />
         ))}
         {children}
     </div>
 );
 
+const Train = ({
+    children,
+    delay_s,
+}: {
+    children: ComponentChildren;
+    delay_s: number;
+}) => (
+    <div
+        id="contrainer"
+        style={`animation: spin 20s ${
+            delay_s - 20
+        }s linear reverse infinite; transform-origin: center; width: 20.5rem; grid-area: 1/1; transform-style: preserve-3d;`}
+    >
+        <div
+            id="train"
+            style="font-size: 2rem; width: fit-content; transform-style: preserve-3d; transform: rotate(-90deg)"
+        >
+            {children}
+        </div>
+    </div>
+);
+
+// we can have things with animation delays for both the engine and the cars
+// configurable animation length for sure
+
+// it's so funny seeing css crimes from like a year ago and they are just like on a different level
+
 render_and_copy(
     <Track segments={60} r={"8rem"}>
-        <div id="contrainer">
+        <Train delay_s={0}>🚂</Train>
-            <div id="another-contrainer">
+        <Train delay_s={0.8}>🚃</Train>
-                <div id="train">🚂</div>
+        <Train delay_s={1.6}>🚃</Train>
-            </div>
+        <Train delay_s={2.4}>🚃</Train>
-        </div>
+        <Train delay_s={3.2}>🚃</Train>
     </Track>
 );