1a710aa3c6
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* Continuous valley lines from top to bottom of the page.
|
|
* Sits behind content; sections use lighter accents on top.
|
|
*/
|
|
export function RiftPageFlow() {
|
|
return (
|
|
<div
|
|
className="pointer-events-none absolute inset-0 z-0 overflow-hidden"
|
|
aria-hidden
|
|
>
|
|
{/* Primary spine — left */}
|
|
<svg
|
|
className="absolute left-[4%] top-0 hidden h-full w-16 opacity-[0.14] md:block lg:left-[6%] lg:w-20"
|
|
viewBox="0 0 80 2000"
|
|
preserveAspectRatio="none"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M40 0 C22 280, 58 520, 38 780 S18 1180, 42 1520 S62 1780, 40 2000"
|
|
stroke="#1a5c38"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
d="M44 0 C60 320, 28 640, 48 960 S32 1340, 46 1680, 42 2000"
|
|
stroke="#1a5c38"
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
opacity="0.5"
|
|
/>
|
|
</svg>
|
|
|
|
{/* Secondary thread — right (different rhythm) */}
|
|
<svg
|
|
className="absolute right-[5%] top-0 hidden h-full w-14 opacity-[0.1] lg:block lg:right-[8%] lg:w-16"
|
|
viewBox="0 0 60 2000"
|
|
preserveAspectRatio="none"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M30 0 C48 400, 12 800, 34 1200 S50 1600, 28 2000"
|
|
stroke="#1a5c38"
|
|
strokeWidth="1.25"
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
d="M26 120 Q40 600, 22 1000 T30 2000"
|
|
stroke="#ffb300"
|
|
strokeWidth="0.75"
|
|
strokeLinecap="round"
|
|
opacity="0.35"
|
|
/>
|
|
</svg>
|
|
|
|
{/* Center whisper — only on xl, very faint */}
|
|
<svg
|
|
className={cn(
|
|
"absolute left-1/2 top-0 hidden h-full w-px -translate-x-1/2",
|
|
"opacity-[0.06] xl:block"
|
|
)}
|
|
viewBox="0 0 2 2000"
|
|
preserveAspectRatio="none"
|
|
>
|
|
<line x1="1" y1="0" x2="1" y2="2000" stroke="#1a5c38" strokeWidth="1" />
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|