37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import {motion} from 'motion/react';
|
|
|
|
interface GameCanvasOverlayLayerProps {
|
|
escapeLead: number;
|
|
}
|
|
|
|
export function GameCanvasOverlayLayer({escapeLead}: GameCanvasOverlayLayerProps) {
|
|
return (
|
|
<>
|
|
<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/20" />
|
|
{escapeLead > 0 && (
|
|
<>
|
|
<div
|
|
className="pointer-events-none absolute inset-0"
|
|
style={{
|
|
background: `linear-gradient(90deg, rgba(80, 180, 255, ${0.05 + escapeLead * 0.12}) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.18) 100%)`,
|
|
}}
|
|
/>
|
|
<motion.div
|
|
className="pointer-events-none absolute inset-x-0 top-4 text-center"
|
|
animate={{opacity: [0.45, 0.95, 0.45], scale: [1, 1.03, 1]}}
|
|
transition={{
|
|
duration: Math.max(0.5, 1.1 - escapeLead * 0.4),
|
|
repeat: Infinity,
|
|
ease: 'easeInOut',
|
|
}}
|
|
>
|
|
<span className="rounded-full border border-sky-300/30 bg-sky-950/65 px-3 py-1 text-[10px] font-bold tracking-[0.25em] text-sky-100">
|
|
{escapeLead > 0.72 ? 'Escaped pursuit' : 'Creating distance'}
|
|
</span>
|
|
</motion.div>
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
}
|