crash: let's just not do 3d

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 = () =>
+const explode_transform = (): [string, string] => {
-    `translate3d(${(-Math.random() * 10).toFixed(2)}rem, ${(
+    const [x, y, z, turns] = [
-        (Math.random() - 0.5) *
+        -Math.random() * 10,
-        20
+        (Math.random() - 0.5) * 20,
-    ).toFixed(2)}rem, ${((Math.random() - 0.5) * 6).toFixed(
+        (Math.random() - 0.5) * 6,
-        2
+        Math.random(),
-    )}rem) rotate(${Math.random()}turn)`;
+    ];
+
+    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) => (
+            return [...children].map((c, i) => {
-                <span
+                const [trans, inv_trans] = explode_transform();
-                    style={{
+                return (
-                        transform: explode_transform(),
+                    <span
-                        display: "inline-block",
+                        style={{
-                        animation: `spin 1s reverse`,
+                            transform: inv_trans,
-                    }}
+                            display: "inline-block",
-                >
+                        }}
-                    {c}
+                    >
-                </span>
+                        <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} />);