diff --git a/html/crash.tsx b/html/crash.tsx index 71c9f26..8ea438c 100644 --- a/html/crash.tsx +++ b/html/crash.tsx @@ -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( - 2 - )}rem) rotate(${Math.random()}turn)`; +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, @@ -25,22 +35,38 @@ const Line = ({ length_s: number; delay_s: number; }) => ( -
+
{...(() => { // 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) => ( - - {c} - - )); + return [...children].map((c, i) => { + const [trans, inv_trans] = explode_transform(); + return ( + + + {c} + + + ); + }); })()}
); @@ -56,7 +82,7 @@ const Crash = ({ length_s?: number; delay_s?: number; }) => ( -
+
); -render_and_copy(); +render_and_copy();