4d4c072834
TopographicBg now actually reads: - Per-line stroke width varies (triangle wave — contour-interval feel) - Per-line opacity varies by vertical depth (darker mid-section, lighter edges) - One line in four rendered in cyan (echo of cross-route correlation) - Radial-mask soft edge fade so lines dissolve into the section boundary - Default opacity bumped from 0.12 to 0.35; section callers still scale it down via the opacity prop, but the new internal variation makes the atmosphere visible where before it was invisible WhyUs second tile: 3-AM storytelling moment now lands typographically: - Decorative 03:00 glyph (amber/4% alpha) in the top-right corner - Eyebrow log-entry treatment: pulsing amber dot + mono 03:00:47.218 timestamp + OPS DESK label — reads like a product UI log row - The rest of the tile unchanged ProductShowcase figure: figcaption moved to last child (HTML spec requires figcaption to be first or last in a figure; a div after it was a validation error).
69 lines
2.2 KiB
Plaintext
69 lines
2.2 KiB
Plaintext
---
|
|
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 });
|
|
}
|
|
---
|
|
<div
|
|
class="topo-wrap absolute inset-0 pointer-events-none"
|
|
aria-hidden="true"
|
|
style={`--topo-opacity:${opacity}`}
|
|
>
|
|
<svg
|
|
class="topo-svg absolute inset-0 w-full h-full"
|
|
viewBox="0 0 100 100"
|
|
preserveAspectRatio="none"
|
|
>
|
|
<g fill="none" vector-effect="non-scaling-stroke" stroke-linecap="round">
|
|
{out.map((l) => (
|
|
<path
|
|
d={l.d}
|
|
stroke={l.tone === 'cyan' ? '#5cc8ff' : '#f0b429'}
|
|
stroke-width={l.width}
|
|
stroke-opacity={l.lineOpacity}
|
|
/>
|
|
))}
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<style>
|
|
.topo-wrap {
|
|
opacity: var(--topo-opacity, 0.35);
|
|
/* Soft edge fade — lines should feel like they dissolve at the section
|
|
boundaries rather than hit them hard. */
|
|
-webkit-mask-image: radial-gradient(ellipse at 50% 45%, black 55%, transparent 95%);
|
|
mask-image: radial-gradient(ellipse at 50% 45%, black 55%, transparent 95%);
|
|
}
|
|
.topo-svg {
|
|
filter: blur(0.15px);
|
|
}
|
|
</style>
|