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 = () =>
    `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} />);