diff --git a/README.md b/README.md index 5031f25..e11e548 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ npm run check # Astro + TypeScript check | `src/components/home/GridObject.astro` | The wireframe objects on the stage and product cards (sphere, cube, plane, wave, steps, nested, stack). Geometry is computed at build time; single stroke in `--ink`. Each drawing is laid out by hand, so the `viewBox` is derived from the points as they are emitted, not assumed: a square centred on the drawing, padded for the stroke. A new kind can therefore never be clipped, and the card gives the drawing the flexible row so it sits centred between title and body. Each drawing is emitted in two groups, the lines that carry its idea and the grid around them, which is what the hover and the reveal act on. | | `src/components/home/MethodDiagram.astro` | The four-stage loop, wide and tall compositions. Labels come from `ui.method.stages`. | | `src/components/verifier/*` | The CipherVerifier product page, in page order: Hero (line burst), Intro (image band), HowItWorks (five group cards, one schematic each; on wide screens the heading is sticky and the cards stack under it as you scroll), Cards, Facts, Outro. | -| `src/components/verifier/SoonHero.astro`, `ComingSoon.astro` | The coming-soon version of `/cipherverifier`, shown while `verifierComingSoon` in `src/data/flags.ts` is true: headline with the alpha sign-up beside it, a status strip along the foot of the hero, release path, spec sheet and the first schematic. Copy in `ui.verifier.soon`. | +| `src/components/verifier/SoonHero.astro`, `ComingSoon.astro` | The coming-soon version of `/cipherverifier`, shown while `verifierComingSoon` in `src/data/flags.ts` is true: hero on a build-time SVG relief of ridge lines in the logo blues, under the floating header, "Coming soon." with the alpha sign-up beside it, a status strip, and the product name set across the full width and cut by the hero's lower edge, release path, spec sheet and the first schematic. Copy in `ui.verifier.soon`. | | `src/components/verifier/diagrams.ts` | The five schematics as data: a hand-placed wide layout and an auto-generated tall spine per group. `Schematic.astro` renders either. Labels come from `ui.verifier.how.groups`; the tuple shape is in `types.ts`. Every element carries the `group` of the node it belongs to, which drives the hover focus and the draw-in order. | | `scripts/*.mjs` | Review tooling: `shot.mjs` (full page), `scroll-shots.mjs` (viewport by viewport), `tabs-test.mjs` (keyboard test for the sectors tabs), `contact-sheet.mjs`. Need `npx astro preview --port 4322`. | | `src/pages/_*.astro` | Shared page bodies. `index.astro` and `de/index.astro` render `_Home.astro` with a `lang` prop, and so on. | diff --git a/src/components/verifier/SoonHero.astro b/src/components/verifier/SoonHero.astro index 1ef5acb..8a6a192 100644 --- a/src/components/verifier/SoonHero.astro +++ b/src/components/verifier/SoonHero.astro @@ -5,14 +5,57 @@ const { lang } = Astro.props; const ui = t(lang); const s = ui.verifier.soon; const n = s.notify; + +/* The background: a relief of thin ridge lines, computed once at build time. Each line is a row + of smooth value noise, lifted most on the right where the page is quiet and nearly flat under + the text on the left. Rows are drawn back to front and filled with night, so a nearer ridge + hides the one behind it. Colour runs through the logo blues, deep at the back to cyan in front. */ +const W = 1600, H = 1000, rows = 46, steps = 160; +const hash = (x: number, y: number) => { + const h = Math.sin(x * 127.1 + y * 311.7) * 43758.5453; + return h - Math.floor(h); +}; +const smooth = (t: number) => t * t * (3 - 2 * t); +const value = (x: number, y: number) => { + const xi = Math.floor(x), yi = Math.floor(y), xf = smooth(x - xi), yf = smooth(y - yi); + const a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1), d = hash(xi + 1, yi + 1); + return a + (b - a) * xf + (c - a) * yf + (a - b - c + d) * xf * yf; +}; +const fbm = (x: number, y: number) => value(x, y) * 0.6 + value(x * 2.1 + 5, y * 2.1) * 0.28 + value(x * 4.3 + 9, y * 4.3) * 0.12; +const ridges = Array.from({ length: rows }, (_, r) => { + const depth = r / (rows - 1); + const base = H * 0.22 + depth * H * 0.78; + const pts = Array.from({ length: steps + 1 }, (_, i) => { + const x = (i / steps) * W; + const u = x / W; + const envelope = Math.exp(-((u - 0.7) ** 2) / 0.045) * (0.35 + 0.65 * Math.sin(depth * Math.PI)); + const lift = Math.max(0, fbm(u * 5.5, r * 0.22) - 0.3) * 480 * envelope; + return `${x.toFixed(1)},${(base - lift).toFixed(1)}`; + }); + return { + d: `M${pts.join(' L')} L${W},${H} L0,${H} Z`, + mix: Math.round(depth * 100), + alpha: (0.35 + depth * 0.5).toFixed(2), + }; +}); ---
+ +
+ +

{s.title[0].replace(/\.$/, '')}

+

{s.eyebrow}

-

- {s.title.map((line, i) => 0 }]}>{line})} -

+

{s.lead}

@@ -52,31 +95,71 @@ const n = s.notify;