From e3bb900bab29a7e93ed16f655cbc5f5681a29e7e Mon Sep 17 00:00:00 2001
From: mehbark <terezi@pyrope.net>
Date: Wed, 15 Nov 2023 03:00:23 -0500
Subject: [PATCH] rain

---
 html/common.tsx |  1 +
 html/rain.tsx   | 28 +++++++++++-----------------
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/html/common.tsx b/html/common.tsx
index 705f86e..e161b47 100644
--- a/html/common.tsx
+++ b/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}')`;
diff --git a/html/rain.tsx b/html/rain.tsx
index d5019c4..c9bcdc4 100644
--- a/html/rain.tsx
+++ b/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} />);