diff --git a/html/crash.tsx b/html/crash.tsx index 8ea438c..0ee0fa7 100644 --- a/html/crash.tsx +++ b/html/crash.tsx @@ -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 = ({
{...(() => { // 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 ( - - {c} - + {c} ); }); @@ -116,7 +108,7 @@ const Crash = ({
@@ -125,4 +117,4 @@ const Crash = ({
); -render_and_copy(); +render_and_copy();