crash: cool freeze thing

html/crash.tsx

@@ -0,0 +1,102 @@
+import { render_and_copy } from "./common.tsx";
+
+const msg = `nice argument dweebus however i have already
+used cohost's css capabilities to make an
+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 Line = ({
+    children,
+    width_ratio,
+    length_s,
+    delay_s,
+}: {
+    children: string;
+    width_ratio: number;
+    length_s: number;
+    delay_s: number;
+}) => (
+    <div style={{ whiteSpace: "nowrap", 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;
+
+            return [...children].map((c, i) => (
+                <span
+                    style={{
+                        transform: explode_transform(),
+                        display: "inline-block",
+                        animation: `spin 1s reverse`,
+                    }}
+                >
+                    {c}
+                </span>
+            ));
+        })()}
+    </div>
+);
+
+const Crash = ({
+    vehicle,
+    msg,
+    length_s = 2,
+    delay_s = 0,
+}: {
+    vehicle: string;
+    msg: string[];
+    length_s?: number;
+    delay_s?: number;
+}) => (
+    <div style={{ display: "flex", alignItems: "center", perspective: "3cm" }}>
+        <div>
+            <Line
+                length_s={length_s}
+                delay_s={delay_s}
+                width_ratio={331.033 / 338.767}
+            >
+                {msg[0]}
+            </Line>
+            <Line
+                length_s={length_s}
+                delay_s={delay_s}
+                width_ratio={291.15 / 338.767}
+            >
+                {msg[1]}
+            </Line>
+            <Line
+                length_s={length_s}
+                delay_s={delay_s}
+                width_ratio={338.767 / 338.767}
+            >
+                {msg[2]}
+            </Line>
+            <Line
+                length_s={length_s}
+                delay_s={delay_s}
+                width_ratio={185.283 / 338.767}
+            >
+                {msg[3]}
+            </Line>
+        </div>
+        <div
+            style={{
+                transform: "translateX(-100rem)",
+                animation: `spin ${length_s}s ${delay_s}s linear reverse`,
+                fontSize: "5rem",
+            }}
+        >
+            {vehicle}
+        </div>
+    </div>
+);
+
+render_and_copy(<Crash vehicle="🛻" msg={msg} length_s={5} delay_s={0} />);