Kirubel-Kibru-Yaltopia
d261148b35
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import { buildWavyContourPaths } from "@/lib/wavy-contour-lines";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const VIEW_W = 160;
|
|
const VIEW_H = 100;
|
|
|
|
const CONTOUR_PRIMARY = buildWavyContourPaths(28, VIEW_W, VIEW_H, 0x8a3c21);
|
|
const CONTOUR_SECONDARY = buildWavyContourPaths(22, VIEW_W, VIEW_H, 0x5c2e18);
|
|
|
|
type Props = {
|
|
className?: string;
|
|
};
|
|
|
|
const frameClass =
|
|
"absolute left-1/2 top-1/2 h-[118%] w-[118%] min-h-full min-w-full -translate-x-1/2 -translate-y-1/2";
|
|
|
|
/**
|
|
* Topographic waves on white sections — visible hairlines with slow drift.
|
|
* Not used on the home hero (keeps existing topography art).
|
|
*/
|
|
export function WavyContourLinesBackground({ className }: Props) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"wavy-contour-lines pointer-events-none absolute inset-0 z-0 overflow-hidden bg-white",
|
|
className
|
|
)}
|
|
aria-hidden
|
|
>
|
|
<div className={frameClass}>
|
|
<div className="wavy-contour-layer wavy-contour-layer--primary h-full w-full">
|
|
<svg
|
|
className="h-full w-full"
|
|
viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
|
|
preserveAspectRatio="xMidYMid slice"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
{CONTOUR_PRIMARY.map((d, i) => (
|
|
<path
|
|
key={`a-${i}`}
|
|
d={d}
|
|
fill="none"
|
|
stroke="rgba(26, 92, 56, 0.2)"
|
|
strokeWidth={0.34}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
vectorEffect="non-scaling-stroke"
|
|
/>
|
|
))}
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className={frameClass}>
|
|
<div className="wavy-contour-layer wavy-contour-layer--secondary h-full w-full">
|
|
<svg
|
|
className="h-full w-full"
|
|
viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
|
|
preserveAspectRatio="xMidYMid slice"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
{CONTOUR_SECONDARY.map((d, i) => (
|
|
<path
|
|
key={`b-${i}`}
|
|
d={d}
|
|
fill="none"
|
|
stroke="rgba(26, 92, 56, 0.11)"
|
|
strokeWidth={0.26}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
vectorEffect="non-scaling-stroke"
|
|
/>
|
|
))}
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|