next
This commit is contained in:
1 parent
b244287f6a
commit
5a2d49c17f
77 files changed
+2289
-31
No files matched your search
@@ -23,11 +23,10 @@ npm run check # Astro + TypeScript check
|
||||
| `src/data/team.ts` | Team members, roles, portraits, links. |
|
||||
| `src/content/insights/*.md` | Insights posts (content collection). Front matter: title, date, lang, category, readingTime, author, cover. |
|
||||
| `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 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. |
|
||||
| `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/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. |
|
||||
@@ -53,6 +52,17 @@ Create `src/content/insights/<slug>.md` with the front matter used in `xg-aloe-u
|
||||
Put the cover image in `src/assets/images/` and reference it with a relative path.
|
||||
The three newest posts appear on the home page automatically.
|
||||
|
||||
## The card drawings
|
||||
|
||||
The objects on the stage cards ("What we do.") and the product cards do not animate on arrival;
|
||||
they are simply drawn. Hovering a card sets `--object-grid`, which the drawing answers by letting
|
||||
its grid recede to 26% while the lines that carry the idea stay: the cube's own edges, the tile
|
||||
lifted out of the plane, the wave's profiles, the inner cube inside its shell, the column to fix
|
||||
first. The card also sets `--object-scale`. Both are custom properties the card owns and the
|
||||
drawing responds to, so the interaction lives with the card and the response with the drawing.
|
||||
It is behind `@media (hover: hover)` so touch never sticks in it, and it is the same language as
|
||||
the hover focus on the product page schematics.
|
||||
|
||||
## The hero video
|
||||
|
||||
The home hero plays `public/video/hero-plant.mp4` / `.webm` behind the headline, over the
|
||||
|
||||
Reference in new issue
Block a user