# Principal Architect Prototype Evidence Package

Live URL: https://heycamjensen-opening-prototype.pages.dev/

Approved commit: `c75ddeb96e8a9b8e98d4d50a7218015a6efd8fd5`

Captured viewports:

- Desktop: 1440 × 900
- Tablet: 834 × 1112
- Phone: 390 × 844

This package records rendered behavior only. No source files, repository files, or deployed prototype files were changed while gathering it.

## Hero timing

### Immediate state

- The eyebrow, “Hey, I’m Cam.”, and “I build systems, businesses, and weird ideas.” are visible immediately.
- Faint constellation points and geometry are present on the right/below the copy.
- Primary and secondary node labels are not visible.
- The invitation and working-thought panel are not visible.

Observed computed states immediately after DOM content loaded:

- primary label opacity: `0`
- secondary node opacity: `0`
- invitation opacity: `0`
- selected nodes: none

### 3.2 seconds

- The constellation has the `is-identified` state.
- Primary labels are transitioning in; observed Systems label opacity was `0.88126`.
- Secondary nodes and the invitation remained at opacity `0`.

### 5.6 seconds

- The constellation has `is-identified is-relational`.
- Primary labels reached opacity `1`.
- Secondary nodes were visible at observed opacity `0.464276`.
- The invitation remained at opacity `0`.

### 8.4 seconds

- The hero has the `is-invited` state.
- Invitation opacity was observed at `0.974903` during its final transition.
- Secondary node opacity was `0.48`.
- No node had `aria-pressed="true"`; there is no default committed selection.

### 12.3 seconds without interaction

- Systems becomes the active demo node.
- The Systems thought panel appears.
- Systems remains uncommitted: no node has `aria-pressed="true"`.

Screenshots:

| State | Desktop | Tablet | Phone |
| --- | --- | --- | --- |
| Immediate hero | [capture](desktop/01-hero-initial.png) | [capture](tablet/01-hero-initial.png) | [capture](phone/01-hero-initial.png) |
| Constellation at 8.2s | [capture](desktop/02-constellation-initial.png) | [capture](tablet/02-constellation-initial.png) | [capture](phone/02-constellation-initial.png) |
| Automatic Systems demo | [capture](desktop/15-auto-demo-systems.png) | — | — |

## Constellation interaction

### Desktop

- Hovering Systems activates Systems visually without committing it.
- Three directly related paths brighten.
- The working-thought panel appears with the Systems text.
- `aria-pressed` remains false during hover.
- Clicking Systems adds the explored state and changes `aria-pressed` to true.
- Desktop pointer activation produced the expected thought for all seven nodes.

| Node | Observed thought | Screenshot |
| --- | --- | --- |
| Systems | Look beneath the visible problem for the structure producing it. | [capture](desktop/03-systems.png) |
| People | A system can technically work and still suck for the people inside it. | [capture](desktop/04-people.png) |
| Curiosity | What if? | [capture](desktop/05-curiosity.png) |
| AI | AI is capability woven through the system—not the identity of the system. | [capture](desktop/06-ai.png) |
| Technology | The best technology tends to make complexity disappear. | [capture](desktop/07-technology.png) |
| Business | Business is where a good idea has to survive contact with reality. | [capture](desktop/08-business.png) |
| Build | Building is how I find out whether the idea was actually any good. | [capture](desktop/09-build.png) |

Additional desktop evidence:

- [Systems hover](desktop/14-hover-systems.png)
- [Systems keyboard-focus state](desktop/13-keyboard-focus-systems.png)

### Tablet

- All primary and secondary labels are visible after the staged reveal.
- Automated pointer activation produced the expected thought for all seven nodes.
- Observed button rectangles were 32 px high, with widths from 46 px (AI) to 133 px (Technology).

| Node | Screenshot |
| --- | --- |
| Systems | [capture](tablet/03-systems.png) |
| People | [capture](tablet/04-people.png) |
| Curiosity | [capture](tablet/05-curiosity.png) |
| AI | [capture](tablet/06-ai.png) |
| Technology | [capture](tablet/07-technology.png) |
| Business | [capture](tablet/08-business.png) |
| Build | [capture](tablet/09-build.png) |

### Phone

- Systems, People, and Curiosity labels are visible after the staged reveal.
- AI, Technology, Business, and Build remain visible as lavender points; their labels have computed opacity `0` until an active/focus state.
- Observed button rectangles were 28–29 px high, with widths from 44 px (AI) to 115 px (Technology).
- Automated activation at the phone viewport produced these observed results:
  - Systems request: Systems thought shown.
  - People request: Systems remained active and the Systems thought remained shown.
  - Curiosity request: Curiosity thought shown.
  - AI request: AI thought shown.
  - Technology request: AI remained active and the AI thought remained shown.
  - Business request: Business thought shown.
  - Build request: Business remained active and the Business thought remained shown.

| Requested node | Screenshot |
| --- | --- |
| Systems | [capture](phone/03-systems.png) |
| People | [capture](phone/04-people.png) |
| Curiosity | [capture](phone/05-curiosity.png) |
| AI | [capture](phone/06-ai.png) |
| Technology | [capture](phone/07-technology.png) |
| Business | [capture](phone/08-business.png) |
| Build | [capture](phone/09-build.png) |

### Keyboard observations

- Native buttons are present for all seven nodes.
- The browser automation focus operation reached Systems and exposed its custom aqua focus/active border.
- Focusing Systems exposed the Systems thought.
- In this automation surface, simulated Enter and Space presses did not change `aria-pressed` to true; pointer click did.
- The tool's global Tab key operation did not advance focus reliably, so full physical Tab-order and key activation were not conclusively verified.

### Touch observations

- Responsive touch-sized layouts were rendered at tablet and phone dimensions.
- The browser automation surface did not expose genuine touch-event emulation; actual finger-tap behavior was not conclusively verified.
- The phone activation observations above came from the browser's automated click operation at the 390 px viewport.

## How I Think

- Activating “Explore how I think” scrolls to a separate `thinking` section.
- A thin vertical line descends from the top center with aqua/lavender color at its leading portion.
- The constellation itself is no longer visible once the chapter entry is reached.
- Desktop presents the principles in an alternating left/right grid.
- Tablet and phone present the principles in a single-column sequence.
- The screenshots show a continuous vertical scroll path, but no literal geometry morph from the constellation paths into the principle layout was observed.

| Viewport | Entry screenshot |
| --- | --- |
| Desktop | [capture](desktop/10-how-i-think-entry.png) |
| Tablet | [capture](tablet/10-how-i-think-entry.png) |
| Phone | [capture](phone/10-how-i-think-entry.png) |

## Interface → Human transition

- The final principles scroll upward and out of view.
- The background changes from near-black graphite to a slightly warmer charcoal layer.
- Aqua/lavender continuity gives way to low-opacity warm topographic contour lines.
- The warm accent first appears in the “Interface → Human layer” eyebrow.
- The topographic geometry is visible before and behind the landing copy.
- “None of that came from nowhere.” appears inside the Human Layer section:
  - desktop: large two-line headline at the landing position;
  - tablet: single-line headline at 834 px;
  - phone: three-line headline at 390 px.
- The supporting sentence and “Prototype boundary / Founder review” are visible in the landing state.

| Viewport | Midpoint | Landing |
| --- | --- | --- |
| Desktop | [capture](desktop/11-human-transition-midpoint.png) | [capture](desktop/12-human-utah-landing.png) |
| Tablet | [capture](tablet/11-human-transition-midpoint.png) | [capture](tablet/12-human-utah-landing.png) |
| Phone | [capture](phone/11-human-transition-midpoint.png) | [capture](phone/12-human-utah-landing.png) |

## Accessibility and performance observations

### Console

- Desktop: no warning or error entries observed.
- Tablet: no warning or error entries observed.
- Phone: no warning or error entries observed.

### Horizontal overflow

| Viewport | Document width | Client width | Overflow observed |
| --- | ---: | ---: | --- |
| Desktop | 1440 | 1440 | No |
| Tablet | 834 | 834 | No |
| Phone | 390 | 390 | No |

### Reduced motion

- The test browser reported `prefers-reduced-motion: reduce` as false.
- The browser tooling did not expose media-preference emulation, so the rendered reduced-motion variant could not be captured or behaviorally verified.

### Focus

- All nodes are semantic buttons.
- Direct browser focus reached a node and exposed a visible aqua bordered state.
- Full physical keyboard traversal and activation were not conclusively verified for the reasons noted above.

### Layout shift and animation jank

- No console warning or error accompanied the staged reveal or scroll transitions.
- The supported browser inspection surface did not expose layout-shift or frame-timing entries, so cumulative layout shift and dropped-frame measurements were not available.
- Screenshot captures completed at every requested state without a browser rendering failure.

## Tooling limits

The following could not be conclusively verified by the available browser tooling:

- genuine iPad/phone touch events;
- physical Tab traversal and Enter/Space activation;
- reduced-motion rendering through an emulated operating-system preference;
- instrumented layout-shift, frame-time, or dropped-frame data.

All other statements above are based on the live deployment and the captured rendered states.