next
This commit is contained in:
1 parent
d97f541738
commit
0c2b4e7df2
16 files changed
+696
-179
No files matched your search
@@ -25,8 +25,9 @@ npm run check # Astro + TypeScript check
|
||||
| `src/components/home/*` | One file per home section, in page order: Hero, Manifesto, Method (with `MethodDiagram`), Stages (with `GridObject`), Sectors, Proof, Quote, Insights, Contact. |
|
||||
| `src/components/home/GridObject.astro` | The four wireframe objects on the stage cards (sphere, cube, plane, wave). Geometry is computed at build time; single stroke in `--ink`. |
|
||||
| `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 (tabs, one schematic per group), Cards, Facts, Outro. |
|
||||
| `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`. |
|
||||
| `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/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. |
|
||||
| `src/scripts/reveal.ts` | Marks `[data-animate]` drawings as drawn once they scroll into view. The drawings' own CSS turns that into the plotter-style reveal, wide screens only, off under `prefers-reduced-motion`. |
|
||||
| `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. |
|
||||
| `src/assets/images/` | Source images. Astro emits AVIF with a WebP fallback and explicit dimensions. |
|
||||
@@ -90,12 +91,30 @@ by git). Everything on the page was read from that repository on 18 September 20
|
||||
are the `cipherverifier` Django app; the installer is `cvm`.
|
||||
|
||||
When the product changes, update `ui.verifier` (copy and diagram labels) and, if a stage or tool is
|
||||
added, the layouts in `diagrams.ts`. Run `node scripts/tabs-shots.mjs <url> <prefix> '[data-how]'`
|
||||
to render every schematic for review.
|
||||
added, the layouts in `diagrams.ts`. All five schematics are on the page; `scroll-shots.mjs` renders
|
||||
them for review.
|
||||
|
||||
## Interaction
|
||||
## Interaction and motion
|
||||
|
||||
Two islands of script: the mobile navigation toggle in `Header.astro` and the tab lists in
|
||||
`Sectors.astro` and `HowItWorks.astro`, which share `src/scripts/tabs.ts` (ARIA tablist, arrow
|
||||
keys, Home and End). Without JavaScript every sector panel
|
||||
Three islands of script: the mobile navigation toggle in `Header.astro`, the sectors tabs in
|
||||
`Sectors.astro` (`src/scripts/tabs.ts`: ARIA tablist, arrow keys, Home and End), and the reveal
|
||||
observer used by the product page's drawings.
|
||||
|
||||
Motion on the product page, all of it on wide screens: the hero's seventeen lines draw in on load
|
||||
and meet in one point (off under `prefers-reduced-motion`); hovering a node in a schematic dims
|
||||
everything that does not belong to it. The drawings themselves do not animate.
|
||||
|
||||
The "How CipherVerifier works" cards are `position: sticky` with a growing top offset, so they
|
||||
stack into a deck under the pinned heading. Every card has the same height, bound to the viewport
|
||||
and capped at 37rem, and the drawing fills what the text leaves, so a card always fits and fully
|
||||
covers the one beneath it. The page snaps to each card (`scroll-snap-type: y proximity` on the
|
||||
root while this component is on the page, `scroll-snap-stop: always`) via invisible anchors placed
|
||||
at each card's natural position: snapping to the sticky cards themselves would create phantom snap
|
||||
points at the current offset in Chrome. The pinned bar carries one dot per card; the filled one is
|
||||
the card currently on top, and each dot links to its card. A small script sets `--covered` on each
|
||||
card as the next one slides over it (the card darkens under an opaque veil) and moves the filled
|
||||
dot. The heading is pinned inside a track that ends one card before the deck does, so heading and
|
||||
deck leave the screen together. Phones get the same drawings in a plain flow without any of this. This goes
|
||||
beyond the home page's single load moment on purpose, at the client's request; the home page is
|
||||
unchanged. Without JavaScript every sector panel
|
||||
and its image is shown in full; the `html.js` class set in `Base.astro` switches to one at a time.
|
||||
Reference in new issue
Block a user