crumble: DONE ENOUGH

html/crumble.tsx

@@ -5,8 +5,10 @@ import { css, render_and_copy } from "./common.tsx";
 // we want outliers (a few letters falling before than others)
 // exponentials should do
 
-const default_shaky_delay = (x: number) => 5 + 20 * x;
 export type DelayFn = (_: number) => number;
+//                  sue me v (please do actually this is a bit ridiculous)
+const default_shaky_delay /**/ = (x: number) => 10 + 20 * x;
+const default_fall_delay /* */ = (x: number) => 15 + 30 * x;
 
 // exporting these in case they turn out to be useful
 export const Shaky = ({
@@ -19,7 +21,9 @@ export const Shaky = ({
     <span
         style={{
             transform: css.transform(css.translate(css.px(-1), css.px(-1))),
-            animation: `0.2s spin alternate-reverse linear ${delay}s infinite`,
+            animation: `0.2s spin alternate-reverse linear ${delay.toFixed(
+                2
+            )}s infinite`,
             display: css.inline_block,
         }}
     >
@@ -27,7 +31,6 @@ export const Shaky = ({
     </span>
 );
 
-const default_fall_delay = (x: number) => 10 + 25 * x;
 // direction should be random but that doesn't need to be as custo
 // well should it
 // i think i'll try without that first
@@ -35,6 +38,14 @@ const default_fall_delay = (x: number) => 10 + 25 * x;
 // 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
+// ah but then how to do linear stuff without a million steps
+// methinks yet more nesting unfortunately (yep)
+
+// long enough that most won't watch it till the end i hope
+// i clearly did my physics wrong
+// d = vt -> t = d/v right?
+const fall_dy = 4113;
+const fall_v = 10;
 export const Fall = ({
     children,
     delay = 0,
@@ -44,24 +55,35 @@ export const Fall = ({
 }) => (
     <span
         style={{
-            transform: css.transform(css.translateY(css.rem(413))),
+            transform: css.transform(css.translateY(css.rem(fall_dy))),
-            animation: `15s ${delay}s linear once  spin`,
+            animation: `0s steps(1, jump-start) spin`,
             display: css.inline_block,
         }}
-        class="bla"
     >
-        {children}
+        <span
+            style={{
+                transform: css.transform(css.translateY(css.rem(-fall_dy))),
+                // making the transform so big makes timing a pain lol
+                animation: `${(fall_dy / fall_v).toFixed(
+                    2
+                )}s ease-in ${delay.toFixed(2)}s 1 spin`,
+                display: css.inline_block,
+            }}
+            class="bla"
+        >
+            {children}
+        </span>
     </span>
 );
 
 const msg = `
 i haven't seen this on other blogs, but some of the posts on mine seem to be kinda unstable?
 if that makes sense?
-like, sometimes i see them shake, and i swear i saw some letters fall
+like, sometimes i see them shake, and i swear i saw some letters fall, not to mention the terrible line-wrapping
 
 i know i'm a (convicted?) css criminal, so i'm thinking that this might just be the w3 gods punishing me.
 
-so. yeah. if you see anything like that on any of my posts let me know
+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
@@ -93,3 +115,5 @@ export const Crumble = ({
 );
 
 render_and_copy(<Crumble msg={msg} />);
+
+// i like the almost comical slowness. send it