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

crash: almost done; cool bug

Browse source
This commit is contained in:
mehbark 2023-12-02 23:29:11 -05:00
parent 62669dcc9b
commit 5a2b1dc37b
1 changed files with 19 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
html/crash.tsx
View file

@ -7,20 +7,19 @@ 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(),
const [x, y, turns] = [
Math.random() * 20 + 35,
(Math.random() - 0.5) * 10,
Math.random() * 10,
];
return [
`translate3d(${x.toFixed(2)}rem, ${y.toFixed(2)}rem, ${z.toFixed(
`translate(${x.toFixed(2)}rem, ${y.toFixed(
2
)}rem) /*rotate(${turns.toFixed(2)}turn)*/`,
`translate3d(${-x.toFixed(2)}rem, ${-y.toFixed(2)}rem, ${-z.toFixed(
)}rem) rotate(${turns.toFixed(2)}turn)`,
`rotate(${-turns.toFixed(2)}turn) translate(${-x.toFixed(
2
)}rem) /*rotate(${-turns.toFixed(2)}turn)*/`,
)}rem, ${-y.toFixed(2)}rem)`,
];
};
@ -38,8 +37,8 @@ const Line = ({
<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;
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) => {
@ -47,23 +46,16 @@ const Line = ({
return (
<span
style={{
transform: inv_trans,
transform: trans,
display: "inline-block",
animation: `spin 0.5s ${(
delay_per * (children.length - i) +
delay_s +
all_delay
).toFixed(2)}s linear both`,
}}
>
<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>
{c}
</span>
);
});
@ -116,7 +108,7 @@ const Crash = ({
<div
style={{
transform: "translateX(-100rem)",
animation: `spin ${length_s}s ${delay_s}s linear reverse`,
animation: `spin ${length_s}s ${delay_s}s linear reverse forwards`,
fontSize: "5rem",
}}
>
@ -125,4 +117,4 @@ const Crash = ({
</div>
);
render_and_copy(<Crash vehicle="🛻" msg={msg} length_s={5} delay_s={2} />);
render_and_copy(<Crash vehicle="🛻" msg={msg} length_s={3} delay_s={1} />);