cohost/html/crash.tsx

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 = (): [string, string] => {
    const [x, y, turns] = [
        Math.random() * 20 + 35,
        (Math.random() - 0.5) * 10,
        Math.random() * 10,
    ];

    return [
        `translate(${x.toFixed(2)}rem, ${y.toFixed(
            2
        )}rem) rotate(${turns.toFixed(2)}turn)`,
        `rotate(${-turns.toFixed(2)}turn) translate(${-x.toFixed(
            2
        )}rem, ${-y.toFixed(2)}rem)`,
    ];
};

const Line = ({
    children,
    width_ratio,
    length_s,
    delay_s,
}: {
    children: string;
    width_ratio: number;
    length_s: number;
    delay_s: number;
}) => (
    <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 / 160;
            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: trans,
                            display: "inline-block",
                            animation: `spin 0.5s ${(
                                delay_per * (children.length - i) +
                                delay_s +
                                all_delay
                            ).toFixed(2)}s linear both`,
                        }}
                    >
                        {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" }}>
        <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 forwards`,
                fontSize: "5rem",
            }}
        >
            {vehicle}
        </div>
    </div>
);

render_and_copy(<Crash vehicle="🛻" msg={msg} length_s={3} delay_s={1} />);