seer.tsx•2.01 kB
import { useId } from "react";
import RootCause from "./RootCause";
import SeerNoiseFilter from "./seer-noisefilter";
import SeerClipMask from "./seer-clipmask";
export default function Seer({ step }: { step: number }) {
const id = useId().replace(/:/g, "");
return (
<div
className={`${
step === 2
? "scale-100 opacity-100 duration-300"
: "scale-90 opacity-0 pointer-events-none"
} absolute overflow-hidden top-0 right-0 z-10 h-full w-full bg-600 flex flex-col justify-center p-4 pb-0 ease-out`}
>
<div
className={`inset-0 absolute bg-background rounded-tl-xl rounded-br-3xl border-t border-l border-white/20 ${
step === 2
? "duration-300 opacity-80 translate-x-0"
: "duration-0 opacity-0 motion-safe:translate-x-1/2"
}`}
/>
<SeerNoiseFilter />
<SeerClipMask id={id} />
{/* ⚠️ Seer */}
<div
className="relative z-10 mx-auto aspect-square w-36 overflow-hidden bg-gradient-to-b from-pink-600 to-pink-400 -translate-y-64"
style={{
clipPath: `url(#${id})`,
}}
>
<div className="bg-pink-300 [mask-image:linear-gradient(to_top,red,transparent)] absolute inset-0 [filter:url(#nnnoise-darken-fine)]" />
{/* eye mask */}
<div className="-translate-x-1/2 absolute left-1/2 mt-16 w-full shadow-2xl shadow-amber-500 [mask-image:radial-gradient(ellipse_100%_200%_at_top,red_50%,transparent_50%)]">
<div className="bg-amber-100 [mask-image:radial-gradient(ellipse_at_bottom,red_50%,transparent_50%)]">
{/* 👁️ Eye of the Seer */}
<div
className={`mx-auto h-8 w-8 translate-y-1/2 rounded-full bg-blue-700 ${
step === 2
? "translate-x-6 delay-1200 duration-1500"
: "-translate-x-6"
}`}
/>
</div>
</div>
</div>
<RootCause step={step} />
</div>
);
}