---
interface Props {
opacity?: number;
lines?: number;
}
const { opacity = 0.35, lines = 9 } = Astro.props;
interface Line {
d: string;
width: number; // stroke width in CSS px (non-scaling)
lineOpacity: number; // per-line opacity (0..1) — varies depth
tone: 'amber' | 'cyan';
}
const out: Line[] = [];
const stepY = 100 / (lines + 1);
for (let i = 1; i <= lines; i++) {
const y = i * stepY;
// Mix two frequencies so adjacent lines don't read parallel.
const amp = 3 + (i % 3) * 2 + Math.sin(i * 1.7) * 1.2;
const phase = (i * 13) % 25; // shift crests horizontally
const d = `M0,${y} Q${25 + phase / 3},${y - amp} ${50 + phase / 5},${y + amp * 0.6} T100,${y + (i % 2 ? 1 : -1)}`;
// Vary stroke weight with a triangle wave — gives the feel of cartographic contour intervals.
const triangle = Math.abs(((i + 2) % 4) - 2) / 2;
const width = 0.6 + triangle * 0.9;
// Depth: middle lines darker, edges lighter.
const depth = 1 - Math.abs((i - (lines + 1) / 2)) / ((lines + 1) / 2);
const lineOpacity = 0.35 + depth * 0.65;
// One cyan line roughly every 4th — echo of the cross-route correlation color.
const tone: 'amber' | 'cyan' = i % 4 === 2 ? 'cyan' : 'amber';
out.push({ d, width, lineOpacity, tone });
}
---