74 lines
1.6 KiB
TypeScript
74 lines
1.6 KiB
TypeScript
|
import { render_and_copy } from "./common.tsx";
|
||
|
|
|
||
|
|
const Drop = ({
|
||
|
|
color = "red",
|
||
|
|
i,
|
||
|
|
duration_s,
|
||
|
|
}: {
|
||
|
|
color?: string;
|
||
|
|
i: number;
|
||
|
|
duration_s: number;
|
||
|
|
}) => (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
backgroundColor: color,
|
||
|
|
animation: `${(Math.random() + 1).toFixed(2)}s linear ${(
|
||
|
|
-Math.random() * 10
|
||
|
|
).toFixed(2)}s spin alternate-reverse infinite`,
|
||
|
|
gridRow: "1",
|
||
|
|
gridColumn: `${i}`,
|
||
|
|
width: "0.1rem",
|
||
|
|
height: "0.1rem",
|
||
|
|
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 alternate infinite spin`,
|
||
|
|
}}
|
||
|
|
></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} duration_s={duration_s} color={color} />
|
||
|
|
))}
|
||
|
|
<Water color={color} duration_s={duration_s} />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
render_and_copy(<Rain duration_s={5} />);
|