# ARCHITECTURAL SYSTEM DIRECTIVE: MANHATTAN·MOTION·STUDIO //...

Prompt

# ARCHITECTURAL SYSTEM DIRECTIVE: MANHATTAN·MOTION·STUDIO // V-ULTIMA ## Autonomous Air-Gapped Silent Kinetic Monolith · Deterministic Latent Governor · ISO-BMFF Binary Pipeline ### 1. OPERATIONAL MANDATE & CONSORTIUM PERSONAS Execute this directive as an elite consortium of world-class computer systems architects, C++ graphics engineers, and deep learning researchers: 1. **Principal Browser Runtime Architect:** World-class authority on zero-dependency, strictly offline, air-gapped single-file HTML5 engines running deterministically inside sandboxed `file://` environments without external networks, CDNs, or assets. 2. **Lead Procedural Graphics & Low-Level C++ Canvas Specialist:** Expert in cache-friendly rendering loops, analytical Signed Distance Fields (Gyroid SDF slices), 3D Lissajous manifolds, parametric Torus Knots, sub-pixel anti-aliasing, and embedded vector-stroke interpreters (zero web fonts). 3. **Deep Learning & Continuous Dynamical Systems Researcher:** Authority on Hintonian feed-forward latent networks, deterministic Xavier uniform initialization, Shannon entropy normalization, and closed-form Lagrangian/Lyapunov damped harmonic oscillators. 4. **Systems Software & ISO-BMFF Binary Protocol Engineer:** Specialist in client-side WebCodecs hardware encoding (`VideoEncoder`) and direct, byte-level pure JavaScript binary muxing (`ftyp`, `moov`, `trak`, `mdat`) for silent, single-track AVC1/H.264 MP4 streams. 5. **High-Density Workstation Ergonomics Designer:** Master of mission-critical financial trading cockpits (Manhattan dark-field aesthetic), multi-column telemetry, and mathematically rigorous WCAG 2.1 relative luminance engines. Deliver the complete, fully functional, production-ready, un-truncated single-file source code: `manhattan-motion-studio.html`. --- ### 2. CORE ARCHITECTURAL CONSTRAINTS & ZERO-DEPENDENCY CONTRACT - **Absolute Air-Gap Monolith:** Exactly ONE standalone `.html` document containing embedded CSS (`<style>`) and JavaScript (`<script>`). Strictly ZERO external CDNs, ZERO remote scripts, ZERO external CSS, ZERO imported fonts, and ZERO image assets. - **Strictly Silent Video Pipeline (Zero Web Audio):** The workstation produces pure kinetic motion graphics and dynamic typography. Web Audio API dependencies are completely eliminated. The ISO-BMFF container must assemble a pristine, single-track video MP4 container without dummy audio streams, sample rate drifts, or clock skew. - **Strictly Deterministic State Engine (PRNG & Hash Functions):** Absolute prohibition of `Math.random()`. All procedural graphics, initial weights, particle distributions, and noise patterns must be computed deterministically via: - **Xorshift32 PRNG:** Seeded with Master Seed `0x4D414E48` (`"MANH"`). - **FNV-1a (32-bit) Hash:** Generates consistent normalized float seeds from text inputs. - **Zero-Drift Scrubbing:** Stateful Euler integration is strictly forbidden. All typographic motion and UI physics must be computed via closed-form analytical equations evaluated at timeline parameter $t$, guaranteeing bit-exact scrubbing backward and forward. - **Zero Truncation Policy:** Output every line of code from `<!DOCTYPE html>` to `</html>`. Stubs, placeholders, and comments such as `// ... rest of code` or `/* TODO */` are strictly prohibited. --- ### 3. HINTONIAN DETERMINISTIC LATENT GOVERNOR ($16 \to 48 \to 32 \to 16$) Implement an untrained continuous feed-forward Multi-Layer Perceptron (MLP) mapping real-time text entropy, user parameters, and timeline phases into a physical motion vector $\mathbf{y} \in \mathbb{R}^{16}$. #### A. Input Conditioning Tensor $\mathbf{x} \in \mathbb{R}^{16}$: 1. $x_0$: FNV-1a 32-bit normalized hash of Headline Hook copy. 2. $x_1$: FNV-1a 32-bit normalized hash of Call-To-Action (CTA) copy. 3. $x_2$: Global Shannon Entropy across all copy decks: $H = -\sum p_i \log_2(p_i)$, normalized to $[0, 1]$. 4. $x_3$: Logarithmic Metric Scale Factor: $\text{clamp}\left(\frac{\log_{10}(1 + \vert{}\text{MetricValue}\vert{})}{9}, 0, 1\right)$. 5. $x_4$: Typographic Character Elasticity ($\zeta_\text{char}$): Dynamic ratio derived from mean word length. 6. $x_5$: Visual Metronome Cadence Phase: Analytical sine pulse driving kinetic tension without sound. 7. $x_6$: Shot Transition Shock: Exponential decay marker synchronized to shot boundaries ($e^{-4.5 \Delta t_\text{shot}}$). 8. $x_7$: Latent Temperature slider value ($0.0 \to 1.0$). 9. $x_8$: Aesthetic Dwell Window parameter ($0.0 \to 1.0$). 10. $x_9$: Particle Swarm Turbulence slider ($0.0 \to 1.0$). 11. $x_{10}$: Optical Glow & Dispersion slider ($0.0 \to 1.0$). 12. $x_{11}$: Active Palette Index ($0 \to 7$, normalized). 13. $x_{12}$: Aspect Ratio Categorical Flag ($0.0 = \text{Vertical 9:16}, 1.0 = \text{Landscape 16:9}$). 14. $x_{13}$: Cyclic Phase Sine: $\sin(2\pi t / T)$. 15. $x_{14}$: Cyclic Phase Cosine: $\cos(2\pi t / T)$. 16. $x_{15}$: High-Frequency Visual Micro-Rhythm: Analytical saw-tooth step $((t \bmod 0.5) / 0.5)$. #### B. Network Architecture & Xavier Initialization: - **Topology:** $16 \to 48 \to 32 \to 16$. - **Weights:** Deterministically derived using Xorshift32 with uniform Xavier bounds: $$\text{limit} = \sqrt{\frac{6}{n_\text{in} + n_\text{out}}}$$ - **Activations:** Continuous $\tanh$ for Hidden Layer 1 (48) and Hidden Layer 2 (32); numerically clamped Sigmoid $\sigma(z) = \frac{1}{1 + e^{-\text{clamp}(z, -30, 30)}}$ for output vector $\mathbf{y} \in \mathbb{R}^{16}$. #### C. Monotonic Physical Mapping Matrix $\mathbf{y} \in \mathbb{R}^{16}$: - $y_0$: **Pace / Optical Speed** ($0.75 \to 1.45$) - $y_1$: **Swarm Dispersion / Entropy** ($0.20 \to 1.50$) - $y_2$: **Damping Ratio ($\zeta$)** ($0.35 \to 0.98$) - $y_3$: **Camera Impulse / Micro-Shake** ($0.25 \to 1.40$) - $y_4$: **Chromatic Dispersion Offset** ($0.10 \to 0.90$) - $y_5$: **Lissajous Manifold Tension** ($0.20 \to 1.20$) - $y_6$: **Kinetic Velocity Factor** ($0.30 \to 1.35$) - $y_7$: **Typographic Natural Frequency ($\omega_n$)** ($1.5 \to 4.5\text{ Hz}$) - $y_8$: **Orbital Velocity Rate** ($0.20 \to 1.30$) - $y_9$: **Volumetric Core Undulation** ($0.30 \to 1.50$) - $y_{10}$: **Fresnel Luminescence Factor** ($0.25 \to 1.45$) - $y_{11}$: **Metric Counter Cadence Ramp** ($0.30 \to 1.30$) - $y_{12}$: **Gyroid Surface Frequency** ($0.50 \to 3.00$) - $y_{13}$: **Torus Knot P/Q Harmonic Order** ($1.00 \to 5.00$) - $y_{14}$: **Diffraction Wave Warp** ($0.00 \to 1.00$) - $y_{15}$: **Specular Spot Intensity** ($0.20 \to 1.00$) #### D. Closed-Form Damped Harmonic Oscillator: Eliminate frame-by-frame delta integration. Typography entrance reveals and transitions are evaluated strictly via the closed-form analytical step response: $$x(t) = 1 - e^{-\zeta \omega_n t} \left(\cos(\omega_d t) + \frac{\zeta \omega_n}{\omega_d} \sin(\omega_d t)\right), \quad \omega_d = \omega_n \sqrt{\vert{}1 - \zeta^2\vert{}}$$ --- ### 4. PROCEDURAL GRAPHICS, ZERO-FONT TYPOGRAPHY & SPECTRAL COLOR 1. **Procedural Vector-Stroke Typography (Zero Web Fonts):** - Implement an embedded polyline coordinate table covering alphanumeric characters (A–Z, 0–9), punctuation, HUD brackets, and currency glyphs ($ € £ ¥). - Render text via dynamic line segments featuring elastic character-by-character reveals, sub-pixel smoothing, and chromatic aberration (separated R and B channel offsets). 2. **Procedural 3D/2D Visual Manifolds:** - **Offscreen Gyroid SDF Slice:** Render an analytical 2D slice of the triply periodic minimal surface $\cos(u)\sin(v) + \cos(v)\sin(w) + \cos(w)\sin(u) = 0$ into an offscreen canvas and blit with additive/screen blending. - **Parametric Torus Knot $T(p, q)$:** 420-segment 3D parametric curve projected onto 2D with Z-depth sorting, back-facing occlusion dimming, and front-facing bloom. - **Deterministic Swarm:** 1,200 particle swarm governed by analytical attractor equations, toroidal boundaries, and velocity dampening. - **Analytical Diffraction Shockwaves:** Expanding chromatic rings with exponential deceleration $R(t) = R_0 (1 - e^{-kt})$. - **Deterministic Film Grain:** 96×96 procedural grain texture generated deterministically and cycled at 24 FPS with overlay compositing. 3. **Analytical Spectral Generator & WCAG 2.1 Engine:** - Inigo Quilez cosine spectral formula: $\mathbf{C}(t) = \mathbf{a} + \mathbf{b} \cos(2\pi(\mathbf{c}t + \mathbf{d}))$. - Compact definitions for 8 color presets: Manhattan Obsidian, Cyber Neon, Liquid Gold, Viral Hyper-Pop, Titanium Grid, Quantum Singularity, Bio-Synthetic Matrix, and Wall Street Cobalt. - Live WCAG 2.1 relative luminance evaluator using linearized sRGB transfer functions ($L = 0.2126R + 0.7152G + 0.0722B$), displaying real-time contrast ratios and dynamic compliance badges (AAA / AA / FAIL). --- ### 5. FIVE-ZONE WORKSTATION ERGONOMICS & COCKPIT ARCHITECTURE Construct an ultra-dense, dark-field financial/motion control workstation (`#04060b` background, amber `#f59e0b` highlights, cyan `#06b6d4` data readouts): - **Zone A — Top Command Header:** Monogram logo with orbital status indicator, Engine Readiness badge (`ENGINE: ACTIVE`), Project Selector dropdown, Undo/Redo controls, Aspect Ratio segmented toggle ([9:16 Vertical] / [16:9 Landscape]), and radiant master `EXPORT MP4` button. - **Zone B — Three-Column Cinematic Stage:** - *Column 1 (Telemetry & Context):* Vertical coordinates, shot milestones, timecode, FNV-1a hash tokens, and system performance metrics. - *Column 2 (Hero Typographic Motion):* Primary headline kinetic slam, supporting copy reveal, and interactive metric counter. - *Column 3 (Procedural Manifold Core):* Centered volumetric sphere, Gyroid SDF contours, Torus Knot $T(p, q)$, and particle swarm. - *Stage Overlays:* Toggleable Grid, Safe Zone markers, and Analytical Sketch Mode wireframes. - **Zone C — Precision Transport Bar:** Scrubbable timeline with precision timecode (`00:06.42 / 00:15.00`), Play/Pause controls, silent visual metronome bar, and 5 shot milestone progress strips (01 Hook, 02 Shockwave, 03 Metric Ramp, 04 Ribbon Flow, 05 CTA Focus). - **Zone D — Director Console (Right Drawer with 4 Tabs):** - `SCRIPT`: Multi-column copy inputs, duration selector, and 6 preset visual cards with procedurally rendered thumbnails. - `LATENT`: Sliders for Temperature, Dwell Window, Turbulence, and Glow with real-time 2D neural activation maps. - `COLOR`: Active swatch matrix, cosine palette editor, and live WCAG 2.1 readouts. - `EXPORT`: Resolution selector (1080p / 4K), locked 60 FPS profile, frame budget calculations, and encoder status. - **Zone E — Intelligence & Diagnostics Strip (5 Bottom Modules):** 1. `[Engine Status]`: Capability checklist (Canvas 2D, WebCodecs, H.264 profile, ISO-BMFF Muxer). 2. `[Neural Director]`: Live activation meters and float readouts for H1 (48), H2 (32), and Output (16). 3. `[Visual Cadence & Resonance]`: Real-time spectrum visualizer driven by neural kinetic outputs. 4. `[Color Matrix & WCAG]`: Live swatches, calculated contrast ratio (e.g., 14.2:1), and compliance pill. 5. `[Export Pipeline]`: Target resolution, frame count, bitrate selector, and Start Export action. --- ### 6. CLIENT-SIDE WEBCODECS & PURE VIDEO ISO-BMFF BINARY MUXER Implement an offline, pure JavaScript video encoding and multiplexing pipeline: 1. **Deterministic Offscreen Render Pipeline:** - Frame-by-frame synchronous rendering at locked 60.0 FPS ($\Delta t = 1/60\text{ s}$) matching target dimensions ($1080\times 1920$ Vertical or $1920\times 1080$ Landscape). - Feed offscreen frames directly into WebCodecs `VideoEncoder` using AVC1 High Profile Level 5.2 (`avc1.640034`) with automatic fallback down to Baseline. - Enforce strict queue backpressure management (`encodeQueueSize <= 8`) to eliminate browser memory spikes. 2. **Byte-Level ISO-BMFF MP4 Binary Multiplexer:** - Directly construct a standards-compliant binary MP4 file using pure JavaScript `Uint8Array` / `DataView`: - `ftyp`: Major brand `isom`, compatible brands `iso2`, `avc1`, `mp41`. - `moov`: Single video track container containing `mvhd`, `trak` (`tkhd`, `mdia`, `mdhd`, `hdlr` with `'vide'`, `minf`, `vmhd`, `dinf`, `stbl`). - `stbl` tables: `stsd` with `avc1` box and parsed SPS/PPS `avcC` record, `stts` (deterministic 60 FPS time-to-sample), `stss` (keyframe sync table), `stsc`, `stsz` (per-frame sample sizes), and 64-bit `co64` chunk offsets. - `mdat`: Clean, contiguous H.264 NAL units payload. - Guaranteed single-track silent playback across VLC, QuickTime, iOS Safari, Chrome, and professional NLE software (DaVinci Resolve, Premiere). - Automatic download trigger: `manhattan-motion-[timestamp].mp4`. - Honest browser capability check: If WebCodecs is unsupported, display a detailed diagnostic message in the UI with manual export guidance. --- ### 7. IMPLEMENTATION SEQUENCE & CODE COMPLETION CONTRACT Generate the source code following this strict linear structure: 1. Complete HTML document structure with dark-field ergonomics and CSS styling (Zones A through E). 2. Deterministic mathematical kernel (Xorshift32 PRNG, FNV-1a hash, Shannon entropy, Xavier weights). 3. Hintonian Continuous Latent Governor ($16 \to 48 \to 32 \to 16$) and closed-form Lagrangian spring equations. 4. Embedded procedural vector font interpreter and character reveal engine. 5. Procedural mathematical visualizers (Offscreen Gyroid SDF slice, Torus Knot $T(p, q)$, 1,200 particle swarm, diffraction shockwaves, film grain). 6. Multi-column stage layout, interactive timeline transport, milestone trackers, and real-time cockpit diagnostics. 7. WebCodecs hardware encoding loop and pure JS ISO-BMFF binary MP4 muxer. Deliver the single-file production artifact `manhattan-motion-studio.html` completely from start to finish.