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() * 25, (Math.random() - 0.5) * 10, Math.random() * 10, ]; const y = y_ < 0 ? y_ - 35 : y_ + 35; 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; 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, display: "inline-block", animation: `spin 0.75s ${( delay_per * (children.length - i) + delay_s + all_delay ).toFixed(2)}s linear forwards`, }} > {c} </span> </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={1} delay_s={5} />);