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,8 +37,8 @@ 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) => {
@@ -47,23 +46,16 @@ const Line = ({
                 return (
                     <span
                         style={{
-                            transform: inv_trans,
+                            transform: trans,
                             display: "inline-block",
+                            animation: `spin 0.5s ${(
+                                delay_per * (children.length - i) +
+                                delay_s +
+                                all_delay
+                            ).toFixed(2)}s linear both`,
                         }}
                     >
-                        <span
+                        {c}
-                            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>
                 );
             });
@@ -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} />);