mbk/cohost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

crash: let's just not do 3d

Browse source
This commit is contained in:
mehbark 2023-12-02 23:06:31 -05:00
parent 68184cf0e3
commit 62669dcc9b
1 changed files with 48 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
html/crash.tsx
View file

@ -6,13 +6,23 @@ 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(
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(${Math.random()}turn)`;
)}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,
@ -25,22 +35,38 @@ const Line = ({
length_s: number;
delay_s: number;
}) => (
<div style={{ whiteSpace: "nowrap", perspective: "3cm" }}>
<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 * width_ratio) / children.length;
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) => (
return [...children].map((c, i) => {
const [trans, inv_trans] = explode_transform();
return (
<span
style={{
transform: explode_transform(),
transform: inv_trans,
display: "inline-block",
animation: `spin 1s reverse`,
}}
>
<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>
);
@ -56,7 +82,7 @@ const Crash = ({
length_s?: number;
delay_s?: number;
}) => (
<div style={{ display: "flex", alignItems: "center", perspective: "3cm" }}>
<div style={{ display: "flex", alignItems: "center" }}>
<div>
<Line
length_s={length_s}
@ -99,4 +125,4 @@ const Crash = ({
</div>
);
render_and_copy(<Crash vehicle="🛻" msg={msg} length_s={5} delay_s={0} />);
render_and_copy(<Crash vehicle="🛻" msg={msg} length_s={5} delay_s={2} />);