129 lines
3.7 KiB
TypeScript
129 lines
3.7 KiB
TypeScript
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, z, turns] = [
|
|
-Math.random() * 10,
|
|
(Math.random() - 0.5) * 20,
|
|
(Math.random() - 0.5) * 6,
|
|
Math.random(),
|
|
];
|
|
|
|
return [
|
|
`translate3d(${x.toFixed(2)}rem, ${y.toFixed(2)}rem, ${z.toFixed(
|
|
2
|
|
)}rem) /*rotate(${turns.toFixed(2)}turn)*/`,
|
|
`translate3d(${-x.toFixed(2)}rem, ${-y.toFixed(2)}rem, ${-z.toFixed(
|
|
2
|
|
)}rem) /*rotate(${-turns.toFixed(2)}turn)*/`,
|
|
];
|
|
};
|
|
|
|
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 / 120;
|
|
const all_delay = (length_s * (1 - width_ratio)) / 2 - 0.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.5s ${(
|
|
delay_per * (children.length - i) +
|
|
delay_s +
|
|
all_delay
|
|
).toFixed(2)}s linear reverse`,
|
|
}}
|
|
>
|
|
{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`,
|
|
fontSize: "5rem",
|
|
}}
|
|
>
|
|
{vehicle}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
render_and_copy(<Crash vehicle="🛻" msg={msg} length_s={5} delay_s={2} />);
|