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} />);