rain

html/common.tsx

@@ -231,6 +231,7 @@ export const svg_url = (svg: string) => `data:image/svg+xml,${encodeURI(svg)}`;
 
 // something higher-level might be worthwhile...
 // could namespace; e.g. css.font.sans_serif
+// could put various beziers
 export const css = {
     url(href: string) {
         return `url('${href}')`;

html/rain.tsx

@@ -1,24 +1,18 @@
 import { render_and_copy } from "./common.tsx";
 
-const Drop = ({
-    color = "red",
-    i,
-    duration_s,
-}: {
-    color?: string;
-    i: number;
-    duration_s: number;
-}) => (
+const Drop = ({ color = "red", i }: { color?: string; i: number }) => (
     <div
         style={{
             backgroundColor: color,
-            animation: `${(Math.random() + 1).toFixed(2)}s linear ${(
-                -Math.random() * 10
-            ).toFixed(2)}s spin alternate-reverse infinite`,
+            animation: `${(Math.random() * 2 + 5).toFixed(
+                2
+            )}s cubic-bezier(.55,.09,.68,.53) ${(-Math.random() * 10).toFixed(
+                2
+            )}s spin infinite reverse`,
             gridRow: "1",
             gridColumn: `${i}`,
-            width: "0.1rem",
-            height: "0.1rem",
+            width: "1px",
+            height: "1px",
             marginTop: "-1rem",
             transform: "translateY(20rem)",
         }}
@@ -39,7 +33,7 @@ const Water = ({
             gridRow: "1 / 2",
             gridColumn: "1 / 100000",
             transform: "translateY(100%)",
-            animation: `${duration_s}s linear 0s alternate infinite spin`,
+            animation: `${duration_s}s linear 0s 1 spin forwards`,
         }}
     ></div>
 );
@@ -64,10 +58,10 @@ const Rain = ({
         }}
     >
         {...Array.from({ length: drops }, (_, i) => (
-            <Drop i={i} duration_s={duration_s} color={color} />
+            <Drop i={i} color={color} />
         ))}
         <Water color={color} duration_s={duration_s} />
     </div>
 );
 
-render_and_copy(<Rain duration_s={5} />);
+render_and_copy(<Rain duration_s={600} drops={150} />);