From 62669dcc9bd3c72eb64db9f9aa925ec5ef5f7c6c Mon Sep 17 00:00:00 2001
From: mehbark <terezi@pyrope.net>
Date: Sat, 2 Dec 2023 23:06:31 -0500
Subject: [PATCH] crash: let's just not do 3d

---
 html/crash.tsx | 70 ++++++++++++++++++++++++++++++++++----------------
 1 file changed, 48 insertions(+), 22 deletions(-)

diff --git a/html/crash.tsx b/html/crash.tsx
index 71c9f26..8ea438c 100644
--- a/html/crash.tsx
+++ b/html/crash.tsx
@@ -6,13 +6,23 @@ animation of your post getting hit by a truck and
 scattering letters everywhr`.split("\n");
 
 // i like the freezing effect, but it's probably not right here;
-const explode_transform = () =>
-    `translate3d(${(-Math.random() * 10).toFixed(2)}rem, ${(
-        (Math.random() - 0.5) *
-        20
-    ).toFixed(2)}rem, ${((Math.random() - 0.5) * 6).toFixed(
-        2
-    )}rem) rotate(${Math.random()}turn)`;
+const explode_transform = (): [string, string] => {
+    const [x, y, z, turns] = [
+        -Math.random() * 10,
+        (Math.random() - 0.5) * 20,
+        (Math.random() - 0.5) * 6,
+        Math.random(),
+    ];
+
+    return [
+        `translate3d(${x.toFixed(2)}rem, ${y.toFixed(2)}rem, ${z.toFixed(
+            2
+        )}rem) /*rotate(${turns.toFixed(2)}turn)*/`,
+        `translate3d(${-x.toFixed(2)}rem, ${-y.toFixed(2)}rem, ${-z.toFixed(
+            2
+        )}rem) /*rotate(${-turns.toFixed(2)}turn)*/`,
+    ];
+};
 
 const Line = ({
     children,
@@ -25,22 +35,38 @@ const Line = ({
     length_s: number;
     delay_s: number;
 }) => (
-    <div style={{ whiteSpace: "nowrap", perspective: "3cm" }}>
+    <div style={{ whiteSpace: "pre", perspective: "3cm" }}>
         {...(() => {
             // we're pretending that everything is the same length (we'll see if this works)
-            const delay_per = (length_s * width_ratio) / children.length;
+            const delay_per = length_s / 120;
+            const all_delay = (length_s * (1 - width_ratio)) / 2 - 0.3;
+            console.log(delay_per, all_delay);
 
-            return [...children].map((c, i) => (
-                <span
-                    style={{
-                        transform: explode_transform(),
-                        display: "inline-block",
-                        animation: `spin 1s reverse`,
-                    }}
-                >
-                    {c}
-                </span>
-            ));
+            return [...children].map((c, i) => {
+                const [trans, inv_trans] = explode_transform();
+                return (
+                    <span
+                        style={{
+                            transform: inv_trans,
+                            display: "inline-block",
+                        }}
+                    >
+                        <span
+                            style={{
+                                transform: trans,
+                                display: "inline-block",
+                                animation: `spin 0.5s ${(
+                                    delay_per * (children.length - i) +
+                                    delay_s +
+                                    all_delay
+                                ).toFixed(2)}s linear reverse`,
+                            }}
+                        >
+                            {c}
+                        </span>
+                    </span>
+                );
+            });
         })()}
     </div>
 );
@@ -56,7 +82,7 @@ const Crash = ({
     length_s?: number;
     delay_s?: number;
 }) => (
-    <div style={{ display: "flex", alignItems: "center", perspective: "3cm" }}>
+    <div style={{ display: "flex", alignItems: "center" }}>
         <div>
             <Line
                 length_s={length_s}
@@ -99,4 +125,4 @@ const Crash = ({
     </div>
 );
 
-render_and_copy(<Crash vehicle="🛻" msg={msg} length_s={5} delay_s={0} />);
+render_and_copy(<Crash vehicle="🛻" msg={msg} length_s={5} delay_s={2} />);