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

crash: bleh; DONE ENOUGH

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

21
html/crash.tsx
View file

@ -7,12 +7,14 @@ 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() * 20 + 35,
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
@ -38,25 +40,32 @@ const Line = ({
{...(() => {
// 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 - 0.2;
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.5s ${(
animation: `spin 0.75s ${(
delay_per * (children.length - i) +
delay_s +
all_delay
).toFixed(2)}s linear both`,
).toFixed(2)}s linear forwards`,
}}
>
{c}
</span>
</span>
);
});
})()}
@ -117,4 +126,4 @@ const Crash = ({
</div>
);
render_and_copy(<Crash vehicle="🛻" msg={msg} length_s={3} delay_s={1} />);
render_and_copy(<Crash vehicle="🛻" msg={msg} length_s={1} delay_s={5} />);