40 lines
1.8 KiB
TypeScript
40 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
|
|
export function InteractiveAuroraBackground({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<div className="relative h-screen w-full bg-gray-950">
|
|
{/*
|
|
اینجا اصل جادو اتفاق میافتد.
|
|
یک شبهالمان (pseudo-element) روی کل صفحه کشیده میشود.
|
|
پسزمینه آن یک گرادیان شعاعی (radial-gradient) است که در موقعیت متغیرهای --x و --y قرار گرفته.
|
|
این متغیرها توسط حرکت موس آپدیت میشوند.
|
|
*/}
|
|
<div
|
|
className="
|
|
absolute inset-0 z-0
|
|
bg-[radial-gradient(40%_40%_at_var(--x,30%)_var(--y,30%),#214374_0%,transparent_100%)]
|
|
[background-size:150%_150%]
|
|
[background-repeat:no-repeat]
|
|
"
|
|
onMouseMove={(e) => {
|
|
const { clientX, clientY, currentTarget } = e;
|
|
const { left, top, width, height } = currentTarget.getBoundingClientRect();
|
|
const xPercent = ((clientX - left) / width) * 100;
|
|
const yPercent = ((clientY - top) / height) * 100;
|
|
|
|
currentTarget.style.setProperty("--x", `${xPercent.toFixed(2)}%`);
|
|
currentTarget.style.setProperty("--y", `${yPercent.toFixed(2)}%`);
|
|
}}
|
|
/>
|
|
|
|
{/* خطوط گرید برای حفظ حس مهندسی */}
|
|
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] z-10 pointer-events-none" />
|
|
|
|
{/* محتوای اصلی صفحه در لایه بالاتر قرار میگیرد */}
|
|
<div className="relative z-20">{children}</div>
|
|
</div>
|
|
);
|
|
}
|