cohost/html/rain.tsx

import { render_and_copy } from "./common.tsx";

const Drop = ({ color = "red", i }: { color?: string; i: number }) => (
    <div
        style={{
            backgroundColor: color,
            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: "1px",
            height: "1px",
            marginTop: "-1rem",
            transform: "translateY(20rem)",
        }}
        class="drop"
    ></div>
);

const Water = ({
    color = "red",
    duration_s,
}: {
    color?: string;
    duration_s: number;
}) => (
    <div
        style={{
            backgroundColor: color,
            gridRow: "1 / 2",
            gridColumn: "1 / 100000",
            transform: "translateY(100%)",
            animation: `${duration_s}s linear 0s 1 spin forwards`,
        }}
    ></div>
);

const Rain = ({
    duration_s,
    color = "red",
    drops = 100,
}: {
    duration_s: number;
    color?: string;
    drops?: number;
}) => (
    <div
        style={{
            width: "25%",
            aspectRatio: "1",
            margin: "auto",
            outline: "1px solid red",
            display: "grid",
            overflow: "clip",
        }}
    >
        {...Array.from({ length: drops }, (_, i) => (
            <Drop i={i} color={color} />
        ))}
        <Water color={color} duration_s={duration_s} />
    </div>
);

render_and_copy(<Rain duration_s={600} drops={150} />);