crash: almost done; cool bug

html/crash.tsx

@@ -7,20 +7,19 @@ scattering letters everywhr`.split("\n");
 
 // i like the freezing effect, but it's probably not right here;
 const explode_transform = (): [string, string] => {
-    const [x, y, z, turns] = [
+    const [x, y, turns] = [
-        -Math.random() * 10,
+        Math.random() * 20 + 35,
-        (Math.random() - 0.5) * 20,
+        (Math.random() - 0.5) * 10,
-        (Math.random() - 0.5) * 6,
+        Math.random() * 10,
-        Math.random(),
     ];
 
     return [
-        `translate3d(${x.toFixed(2)}rem, ${y.toFixed(2)}rem, ${z.toFixed(
+        `translate(${x.toFixed(2)}rem, ${y.toFixed(
             2
-        )}rem) /*rotate(${turns.toFixed(2)}turn)*/`,
+        )}rem) rotate(${turns.toFixed(2)}turn)`,
-        `translate3d(${-x.toFixed(2)}rem, ${-y.toFixed(2)}rem, ${-z.toFixed(
+        `rotate(${-turns.toFixed(2)}turn) translate(${-x.toFixed(
             2
-        )}rem) /*rotate(${-turns.toFixed(2)}turn)*/`,
+        )}rem, ${-y.toFixed(2)}rem)`,
     ];
 };
 
@@ -38,19 +37,13 @@ const Line = ({
     <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 / 120;
+            const delay_per = length_s / 160;
-            const all_delay = (length_s * (1 - width_ratio)) / 2 - 0.3;
+            const all_delay = (length_s * (1 - width_ratio)) / 3 - 0.2;
             console.log(delay_per, all_delay);
 
             return [...children].map((c, i) => {
                 const [trans, inv_trans] = explode_transform();
                 return (
-                    <span
-                        style={{
-                            transform: inv_trans,
-                            display: "inline-block",
-                        }}
-                    >
                     <span
                         style={{
                             transform: trans,
@@ -59,12 +52,11 @@ const Line = ({
                                 delay_per * (children.length - i) +
                                 delay_s +
                                 all_delay
-                                ).toFixed(2)}s linear reverse`,
+                            ).toFixed(2)}s linear both`,
                         }}
                     >
                         {c}
                     </span>
-                    </span>
                 );
             });
         })()}
@@ -116,7 +108,7 @@ const Crash = ({
         <div
             style={{
                 transform: "translateX(-100rem)",
-                animation: `spin ${length_s}s ${delay_s}s linear reverse`,
+                animation: `spin ${length_s}s ${delay_s}s linear reverse forwards`,
                 fontSize: "5rem",
             }}
         >
@@ -125,4 +117,4 @@ const Crash = ({
     </div>
 );
 
-render_and_copy(<Crash vehicle="🛻" msg={msg} length_s={5} delay_s={2} />);
+render_and_copy(<Crash vehicle="🛻" msg={msg} length_s={3} delay_s={1} />);