grass: giving up on the df aesthetic

html/blowing-in-the-wind.tsx

@@ -2,6 +2,7 @@ import { Main, n_of, pick_random, render_and_copy } from "./common.tsx";
 
 // thanks, https://dwarffortresswiki.org/index.php/Grass
 const grass_chars = ".,'`".split("");
+// i think i sorta like just ^ or | hm...
 // thanks again, https://dwarffortresswiki.org/index.php/Grass
 // probably don't want to be authentic if there's only two colors..
 const grass_colors = ["#9DDA33", "#10F565"];
@@ -15,11 +16,16 @@ const grass_colors = ["#9DDA33", "#10F565"];
 const Blade = () => (
     <b
         style={{
-            animationDelay: `${Math.random()}s`,
-            color: pick_random(grass_colors),
             transformOrigin: "bottom",
-            transform: "translateX(1rem)",
-            animation: "3s spin infinite alternate",
+            transform: "translateX(0.5rem)",
+            animation: "spin infinite ease-in-out alternate",
+
+            animationDelay: `${(Math.random() - 0.5) * 2}s`,
+            // having some randomness with the duration is a great idea!!
+            animationDuration: `${2.5 + Math.random()}s`,
+            color: pick_random(grass_colors),
+            // helps the squareness
+            overflow: "hidden",
         }}
     >
         {pick_random(grass_chars)}
@@ -36,9 +42,13 @@ const Field = ({ width }: { width: number }) => (
             gridTemplateColumns: `repeat(${width}, 1fr)`,
             fontFamily: "monospace",
             backgroundColor: "black",
+            fontWeight: "bolder",
+            fontSize: "1.1rem",
         }}
     >
         {/* won't be this clean when i do the blowing but eh */}
+        {/* it's really surprising that this works based on my understanding tbh */}
+        {/* best guess, it's expanding to <div><Blade/><Blade/><Blade/>...</div> and THEN expanding the Blades */}
         {n_of(width * width, <Blade />)}
     </div>
 );