From c816bd4956ace70d762eded7b6e4d9fe190e4763 Mon Sep 17 00:00:00 2001
From: mehbark <terezi@pyrope.net>
Date: Thu, 7 Sep 2023 21:58:39 -0400
Subject: [PATCH] crumble: better plan

---
 html/crumble.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/html/crumble.tsx b/html/crumble.tsx
index a4897d3..1611932 100644
--- a/html/crumble.tsx
+++ b/html/crumble.tsx
@@ -32,7 +32,9 @@ const default_fall_delay = (x: number) => 10 + 25 * x;
 // well should it
 // i think i'll try without that first
 // a slow fall is fun
-// i could have some weird hack where there's another copy that's hidden but that seems liek the wrong way to do it
+// i could have some weird hack where there's another copy that's hidden but that seems like the wrong way to do it
+// i think the best way to do it is jump-hackery (jump 0s in to the start
+// (which is 0 displacement when reversed)), then wait, then jump to the real animation
 export const Fall = ({
     children,
     delay = 0,
@@ -42,9 +44,8 @@ export const Fall = ({
 }) => (
     <span
         style={{
-            // transform: css.transform(css.translateY(css.rem(413))),
-            // animation: `20s spin reverse linear ${delay}s once`,
-            animationDelay: `${delay}s`,
+            transform: css.transform(css.translateY(css.rem(413))),
+            animation: `15s ${delay}s linear once  spin`,
             display: css.inline_block,
         }}
         class="bla"
@@ -64,6 +65,7 @@ so. yeah. if you see anything like that on any of my posts let me know
 `.trim();
 
 // should probably do it word wise so they don't break
+// where did the cool bug go???
 export const Crumble = ({
     msg,
     shaky_delay_fn = default_shaky_delay,
@@ -77,8 +79,9 @@ export const Crumble = ({
         {msg.split("").map(c => {
             if (/[^\s]/.test(c)) {
                 const seed = Math.random();
+                const fall_delay = fall_delay_fn(seed);
                 return (
-                    <Fall delay={fall_delay_fn(seed)}>
+                    <Fall delay={fall_delay}>
                         <Shaky delay={shaky_delay_fn(seed)}>{c}</Shaky>
                     </Fall>
                 );