72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
import type { CSSProperties } from "react";
|
|
|
|
const particleSlots = [
|
|
{ x: "12%", y: "16%" },
|
|
{ x: "31%", y: "24%" },
|
|
{ x: "72%", y: "12%" },
|
|
{ x: "88%", y: "36%" },
|
|
{ x: "18%", y: "58%" },
|
|
{ x: "46%", y: "66%" },
|
|
{ x: "78%", y: "74%" },
|
|
{ x: "92%", y: "86%" }
|
|
];
|
|
|
|
const orbitalConstructSlots = [
|
|
{ x: "76%", y: "82%", size: "min(54vw, 680px)", drift: "-6deg" },
|
|
{ x: "14%", y: "58%", size: "min(34vw, 420px)", drift: "18deg" },
|
|
{ x: "94%", y: "22%", size: "min(24vw, 300px)", drift: "-26deg" }
|
|
];
|
|
|
|
type ParticleStyle = CSSProperties & {
|
|
"--particle-index": string;
|
|
"--particle-x": string;
|
|
"--particle-y": string;
|
|
};
|
|
|
|
type OrbitalConstructStyle = CSSProperties & {
|
|
"--construct-index": string;
|
|
"--construct-x": string;
|
|
"--construct-y": string;
|
|
"--construct-size": string;
|
|
"--construct-drift": string;
|
|
};
|
|
|
|
export function MagicalParticleLayer() {
|
|
return (
|
|
<>
|
|
<div className="workspace-background-layer" aria-hidden="true" />
|
|
<div className="global-particle-layer" aria-hidden="true">
|
|
<span className="global-particle-lightfall global-particle-lightfall-a" />
|
|
<span className="global-particle-lightfall global-particle-lightfall-b" />
|
|
<span className="global-particle-lightfall global-particle-lightfall-c" />
|
|
<span className="global-particle-side-ray global-particle-side-ray-left" />
|
|
<span className="global-particle-side-ray global-particle-side-ray-right" />
|
|
{orbitalConstructSlots.map((construct, index) => (
|
|
<span
|
|
key={`${construct.x}-${construct.y}-${construct.size}`}
|
|
className="global-orbital-construct"
|
|
style={
|
|
{
|
|
"--construct-index": String(index),
|
|
"--construct-x": construct.x,
|
|
"--construct-y": construct.y,
|
|
"--construct-size": construct.size,
|
|
"--construct-drift": construct.drift
|
|
} as OrbitalConstructStyle
|
|
}
|
|
/>
|
|
))}
|
|
<span className="global-particle-sweep" />
|
|
<span className="global-particle-ribbon" />
|
|
{particleSlots.map((slot, index) => (
|
|
<span
|
|
key={`${slot.x}-${slot.y}`}
|
|
className="global-particle-glint"
|
|
style={{ "--particle-index": String(index), "--particle-x": slot.x, "--particle-y": slot.y } as ParticleStyle}
|
|
/>
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|