From 4d4c072834954429ca1b06da46f2b6b3dd0fca3a Mon Sep 17 00:00:00 2001 From: hsiegeln <37154749+hsiegeln@users.noreply.github.com> Date: Sat, 25 Apr 2026 00:26:16 +0200 Subject: [PATCH] feat(design): atmosphere + WhyUs editorial 3-AM treatment MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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). --- src/components/TopographicBg.astro | 68 +++++++++++++++---- src/components/sections/ProductShowcase.astro | 2 +- src/components/sections/WhyUs.astro | 33 ++++++--- 3 files changed, 81 insertions(+), 22 deletions(-) diff --git a/src/components/TopographicBg.astro b/src/components/TopographicBg.astro index b67228e..60998e6 100644 --- a/src/components/TopographicBg.astro +++ b/src/components/TopographicBg.astro @@ -3,24 +3,66 @@ interface Props { opacity?: number; lines?: number; } -const { opacity = 0.12, lines = 8 } = Astro.props; +const { opacity = 0.35, lines = 9 } = Astro.props; -const paths: string[] = []; +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; - const amp = 4 + (i % 3) * 2; - paths.push(`M0,${y} Q25,${y - amp} 50,${y + amp * 0.6} T100,${y}`); + // 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 }); } --- - + + + {out.map((l) => ( + + ))} + + + + + diff --git a/src/components/sections/ProductShowcase.astro b/src/components/sections/ProductShowcase.astro index b0b6b7c..e600a54 100644 --- a/src/components/sections/ProductShowcase.astro +++ b/src/components/sections/ProductShowcase.astro @@ -48,8 +48,8 @@ const callouts: Callout[] = [ />
-
Screenshot of a failed exchange in Cameleer, showing the full execution graph, fallback path, and exception context.
+
Screenshot of a failed exchange in Cameleer, showing the full execution graph, fallback path, and exception context.