68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
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} />);
|