crumble: did that, change to px to avoid blur

html/crumble.tsx

@@ -5,25 +5,21 @@ 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 + 10 * x;
+const default_shaky_delay = (x: number) => 8 + 10 * x;
 export type DelayFn = (_: number) => number;
 
 // exporting these in case they turn out to be useful
 export const Shaky = ({
     children,
-    delay_fn = default_shaky_delay,
+    delay = 0,
 }: {
     children: ComponentChildren;
-    delay_fn?: DelayFn;
+    delay?: number;
 }) => (
     <div
         style={{
-            transform: css.transform(
-                css.translate(css.rem(-0.1), css.rem(-0.1))
-            ),
-            animation: `0.2s spin alternate-reverse linear ${delay_fn(
-                Math.random()
-            )}s infinite`,
+            transform: css.transform(css.translate(css.px(-1), css.px(-1))),
+            animation: `0.2s spin alternate-reverse linear ${delay}s infinite`,
             display: css.inline_block,
         }}
     >
@@ -34,10 +30,10 @@ export const Shaky = ({
 const default_fall_delay = (x: number) => (3 * x) ** 4;
 export const Fall = ({
     children,
-    delay_fn = default_fall_delay,
+    delay = 0,
 }: {
     children: ComponentChildren;
-    delay_fn?: DelayFn;
+    delay?: number;
 }) => (
     <div
         style={{
@@ -61,25 +57,26 @@ so. yeah. if you see anything like that on any of my posts let me know
 // should probably do it word wise so they don't break
 export const Crumble = ({
     msg,
-    shaky_delay_fn,
-    fall_delay_fn,
+    shaky_delay_fn = default_shaky_delay,
+    fall_delay_fn = default_fall_delay,
 }: {
     msg: string;
     shaky_delay_fn?: DelayFn;
     fall_delay_fn?: DelayFn;
 }) => (
     <div>
-        {msg.split("").map(c =>
-            /[^\s]/.test(c) ? (
-                <Fall delay_fn={fall_delay_fn}>
-                    <Shaky delay_fn={shaky_delay_fn}>{c}</Shaky>
-                </Fall>
-            ) : c == "\n" ? (
-                <br />
-            ) : (
-                c
-            )
-        )}
+        {msg.split("").map(c => {
+            if (/[^\s]/.test(c)) {
+                const seed = Math.random();
+                return (
+                    <Fall delay={fall_delay_fn(seed)}>
+                        <Shaky delay={shaky_delay_fn(seed)}>{c}</Shaky>
+                    </Fall>
+                );
+            }
+            if (c == "\n") return <br />;
+            return c;
+        })}
     </div>
 );