63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type AgentWorkflowParticleScatterProps = {
|
|
className?: string;
|
|
particleSize?: number;
|
|
particleCount?: number;
|
|
sceneScale?: number;
|
|
viewportScale?: number;
|
|
};
|
|
|
|
export function AgentWorkflowParticleScatter({
|
|
className,
|
|
particleSize,
|
|
particleCount,
|
|
sceneScale,
|
|
viewportScale = 1,
|
|
}: AgentWorkflowParticleScatterProps) {
|
|
const searchParams = new URLSearchParams();
|
|
if (typeof particleSize === "number" && Number.isFinite(particleSize) && particleSize > 0) {
|
|
searchParams.set("particleSize", String(particleSize));
|
|
}
|
|
if (typeof particleCount === "number" && Number.isFinite(particleCount) && particleCount > 0) {
|
|
searchParams.set("particleCount", String(Math.round(particleCount)));
|
|
}
|
|
if (typeof sceneScale === "number" && Number.isFinite(sceneScale) && sceneScale > 0) {
|
|
searchParams.set("sceneScale", String(sceneScale));
|
|
}
|
|
const src = searchParams.size
|
|
? `/particle-scatter-effect.html?${searchParams.toString()}`
|
|
: "/particle-scatter-effect.html";
|
|
const safeViewportScale =
|
|
typeof viewportScale === "number" && Number.isFinite(viewportScale) && viewportScale > 0
|
|
? viewportScale
|
|
: 1;
|
|
const overflowOffsetPercent = ((safeViewportScale - 1) / 2) * 100;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"pointer-events-none absolute inset-x-0 bottom-0 overflow-hidden",
|
|
className
|
|
)}
|
|
>
|
|
<iframe
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute border-0 bg-transparent"
|
|
loading="eager"
|
|
src={src}
|
|
style={{
|
|
width: `${safeViewportScale * 100}%`,
|
|
height: `${safeViewportScale * 100}%`,
|
|
left: `-${overflowOffsetPercent}%`,
|
|
top: `-${overflowOffsetPercent}%`,
|
|
}}
|
|
tabIndex={-1}
|
|
title="Particle Scatter Background"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|