Technical architecture

Production data flow

TITLES account + model catalog
            │
            ├── artist-model tests
            │       └── selected visual tradition
            │
            ├── 120 final portrait candidates
            │       └── 60 selected portraits
            │
            ├── 60 successful image-to-video manifestations
            │
            └── 119 speech executions
                    └── 73 final feature performances

Selected cloud outputs
            │
            ├── local provenance JSON
            ├── stable 01–60 file naming
            └── complete coverage matrices
                    │
                    ├── procedural Python scores and relics
                    ├── FFmpeg voice DSP and mixing
                    ├── ImageMagick typography and card frames
                    ├── FFmpeg chapter/master assembly
                    └── ffprobe/decode/loudness/frame-hash QA
                            │
                            ├── cabinet.html
                            ├── evidence film
                            └── evidence-cabinet.html + timeline JSON
                                    │
                                    └── static hosting package

Runtime architecture: original Cabinet

60 images
60 lazy video elements
60 lazy audio elements
        │
        ├── hover/focus → load + play
        ├── leave → stop + rewind
        ├── click/Enter → hold/release
        └── global active-item guard → one sound source

Audio begins disabled. One explicit user gesture unlocks sound for the session.

Runtime architecture: Evidence Cabinet

Complete 11:53 master video
            │
            └── requestAnimationFrame reads currentTime
                         │
                         ├── binary lookup → active god
                         ├── transition lookup → entering god
                         ├── progress calculation → active tile rule
                         ├── history.replaceState → #god-##
                         └── one shared muted preview decoder
                                      │
                                      └── preview.currentTime =
                                          master.currentTime - incidentStart

The grid contains sixty images but only one active manifestation decoder. This avoids creating sixty simultaneous video-decoding workloads.

Timeline schema

Each god records:

{
  "masterStart": 391.558333,
  "masterEnd": 402.1,
  "activeStart": 391.858333,
  "activeEnd": 402.4,
  "incidentStart": 395.35,
  "incidentEnd": 400.391667,
  "transitionStart": 401.5,
  "seekTime": 391.908333
}

masterStart and activeStart differ because adjacent slots overlap for 0.6 seconds. Direct links seek after the active-state handoff so clicking god 35 cannot resolve briefly to god 34.

Media architecture

Canonical sources

• Portraits: 896×1120 / exact 4:5
• Manifestations: approximately 4:5, five seconds, 24 fps
• Audio relics: five-second AAC/M4A browser copies plus preserved WAV production masters outside this package

Definitive film

• 1080×1350 / 4:5
• H.264 yuv420p
• AAC stereo 44.1 kHz
• Fast-start enabled
• Zero video/audio start offsets
• Byte-range seeking required by the timeline site

Responsive architecture

Side-by-side

The evidence label, player, metadata, and controls share one CSS width:

--player-width: min(100%, max(240px, calc(80dvh - 148px)));

The width is bounded by both the sticky column and available dynamic viewport height, preventing a tall portrait player from overlapping the right-hand grid.

Stacked

At 850 px and below:

• Player width becomes 100%
• Metadata and controls become 100%
• Side padding and lateral borders are removed
• Player becomes non-sticky
• Grid follows in normal document flow

Hosting architecture

The package has no runtime backend. Required server features:

• Static files
• Correct MIME types
• HTTP byte ranges
• Sufficient file/deployment size
• HTTPS for external sharing

The master video is the primary hosting constraint. A future production deployment could replace the single MP4 with HLS/DASH variants without changing the timeline data model.

Verification layers

1. Generation: execution terminal state and output IDs
2. Asset: count, path, file size, decode
3. Edit: duration, codecs, stream offsets, frame diversity, loudness
4. Interaction: browser DOM state, seeking, preview sync, keyboard controls
5. Responsive: computed dimensions and horizontal overflow
6. Deployment: byte-range response, MIME type, missing assets
7. Distribution: source/copy SHA-256 equality, ZIP integrity, credential-pattern scan