@vib3code/sdk 2.0.1 → 2.0.3-canary.3349130

package/DOCS/SITE_REFACTOR_PLAN.md

@@ -0,0 +1,100 @@
+# VIB3+ Landing Page Refactor Plan
+
+**Date:** 2026-02-13
+**Status:** Phase 1 Complete (CSS extraction + redirect)
+
+---
+
+## Problem Statement
+
+The root `index.html` served by GitHub Pages was a bare SDK controls demo (sliders + canvas), not a landing page. The actual landing page at `site/index.html` existed but was:
+- **1,978 lines monolithic** — 1,318 lines of inline `<style>` + 660 lines of HTML
+- Not the default page visitors see
+- Hero section only mentioned "Three Systems / 24 Geometries / 6D Rotation" — ignored the C++ WASM core, WebGPU backend, TypeScript definitions, MCP server
+
+---
+
+## What Was Done (Phase 1)
+
+### 1. CSS Extraction: `site/index.html` (1978 → 659 lines)
+
+**Before:**
+```
+site/index.html           1978 lines (1318 CSS + 660 HTML)
+site/styles/overlay-accents.css   243 lines
+site/styles/reveal-layers.css     401 lines
+```
+
+**After:**
+```
+site/index.html           659 lines (pure HTML + semantic structure)
+site/styles/main.css      1318 lines (extracted from inline <style>)
+site/styles/overlay-accents.css   243 lines (unchanged)
+site/styles/reveal-layers.css     401 lines (unchanged)
+```
+
+All 1,318 lines of inline CSS moved to `site/styles/main.css`. The HTML now links:
+```html
+<link rel="stylesheet" href="./styles/main.css">
+<link rel="stylesheet" href="./styles/overlay-accents.css">
+<link rel="stylesheet" href="./styles/reveal-layers.css">
+```
+
+### 2. Root Redirect
+
+**Before:** Root `index.html` was the raw SDK controls demo.
+**After:** Root `index.html` is a meta-refresh redirect to `site/index.html`.
+
+The raw demo moved to `demo/index.html` (import paths adjusted from `./src/` to `../src/`).
+
+### 3. Content Updates
+
+| Location | Before | After |
+|----------|--------|-------|
+| Hero badge | `v2.0.1 — Three Systems · 24 Geometries · 6D Rotation` | `v2.0.3 — C++ WASM Core · WebGPU + WebGL · TypeScript` |
+| Hero subtitle | "The fourth dimension, rendered..." | "4D visualization SDK with a C++ Clifford algebra core compiled to WASM..." |
+| Hero system label | `Quantum Lattice Engine` | `C++ WASM · WebGPU · WebGL · MCP Agentic Control` |
+| Opening subtitle | `4D Visualization Engine` | `C++ WASM · WebGPU · WebGL · TypeScript · MCP` |
+| Triptych heading | `Three Systems. One Heartbeat.` | `Three Systems. One C++ Core.` |
+| Triptych stats | 24 Geometries / 6D Rotation / 3 Systems | C++ WASM Core / 24 Geometries / 6D Rotation / 19 MCP Tools |
+| CTA description | "WebGPU primary, WebGL fallback, C++ WASM math core" | Full architecture mention (Cl(4,0), dual backend, TS, MCP, framework integrations) |
+| CTA install | `npm install` | `pnpm add` |
+| Agent section | "Drop VIB3+ into any AI agent workflow" | "19-tool MCP server with JSON-RPC 2.0..." |
+
+---
+
+## File Structure After Refactor
+
+```
+/                           Root
+├── index.html              Redirect → site/index.html
+├── demo/
+│   └── index.html          SDK controls demo (moved from root)
+├── site/
+│   ├── index.html          Landing page (659 lines, HTML only)
+│   ├── styles/
+│   │   ├── main.css        Core landing page styles (1318 lines)
+│   │   ├── overlay-accents.css  Overlay accent effects (243 lines)
+│   │   └── reveal-layers.css   Reveal layer choreography (401 lines)
+│   └── js/
+│       ├── main.js         Boot script + GPU pool orchestrator (466 lines)
+│       ├── config.js       Section parameter presets (107 lines)
+│       ├── adapters.js     SDK system adapters (Quantum/Holographic/Faceted + AmbientLattice) (582 lines)
+│       ├── choreography.js GSAP scroll choreography (~1000+ lines)
+│       ├── ContextPool.js  WebGL context budget manager
+│       ├── CardTiltSystem.js  Mouse/touch → CSS 3D tilt + visualizer param mapping
+│       ├── overlay-choreography.js  Overlay layer scroll choreography
+│       └── reveal-choreography.js   Reveal layer scroll choreography
+├── docs/                   Gallery + exports + test hub
+└── src/                    SDK source (unchanged)
+```
+
+---
+
+## Phase 2 (Future)
+
+Potential further cleanup:
+- Extract remaining inline styles from `site/styles/main.css` into semantic sub-files (e.g., `hero.css`, `morph.css`, `playground.css`, `cascade.css`, etc.)
+- Consider a build step (even simple CSS concat) to reduce HTTP requests
+- Add proper `<nav>` component with links to Demo, Gallery, GitHub, npm
+- Add architecture diagram section showing the full stack (C++ → WASM → JS/TS → WebGPU/WebGL → Canvas)

package/DOCS/STATUS.md

@@ -0,0 +1,24 @@
+# VIB3+ SDK Status
+
+This file is the single source of truth for high-level release status.
+
+## Release metadata
+
+| Field | Status |
+|---|---|
+| Current package version | `2.0.3` (from `package.json`) |
+| Release date | Unreleased in repository changelog (pending release entry for `2.0.3`) |
+| Supported platforms | Web browsers, Node.js CLI/MCP workflows, WASM runtime, Flutter integration, and framework wrappers (React/Vue/Svelte) |
+
+## Test status
+
+Test status is CI-linked (not hardcoded):
+
+- Follow the baseline test/CI workflow in [`DOCS/CI_TESTING.md`](./CI_TESTING.md).
+- Check your repository CI provider (GitHub Actions or equivalent pipeline) for live pass/fail state.
+
+## Update policy
+
+- Update this file whenever `package.json` version changes.
+- Keep test status summary link-based (CI), not hardcoded with static pass-count numbers.
+- If the version is unreleased, explicitly mark it as unreleased until changelog/release publication is completed.

package/DOCS/SYSTEM_INVENTORY.md

@@ -1,9 +1,11 @@
 # VIB3+ SDK System Inventory
 
-**Document Version:** 2.0.0
-**Last Updated:** 2026-01-30
+**Document Version:** See `DOCS/STATUS.md`
+**Last Updated:** See `DOCS/STATUS.md`
 **Purpose:** Complete technical inventory for developers and AI agents
 
+> For canonical release metadata (version/date/platforms/test status), use [`DOCS/STATUS.md`](./STATUS.md) as the single source of release status.
+
 ---
 
 ## Executive Summary
@@ -22,7 +24,7 @@ The SDK provides 3 active visualization systems with shared 6D rotation mathemat
 
 | Metric | Value |
 |--------|-------|
-| **SDK Version** | 2.0.0 |
+| **SDK Version** | See `DOCS/STATUS.md` |
 | **Visualization Systems** | 3 active (Quantum, Faceted, Holographic) + 1 archived (Polychora - TBD) |
 | **Rotation Planes** | 6 (XY, XZ, YZ for 3D; XW, YW, ZW for 4D) |
 | **Base Geometries** | 8 per system |
@@ -35,7 +37,7 @@ The SDK provides 3 active visualization systems with shared 6D rotation mathemat
 | **Creative Effects** | 14 post-processing effects, 22 color presets, 14 easing functions |
 | **Platform Integrations** | 7 (React, Vue, Svelte, Figma, Three.js, TouchDesigner, OBS) |
 | **Advanced Modules** | 5 (WebXR, WebGPU Compute, MIDI, AI Presets, OffscreenWorker) |
-| **Test Coverage** | 694+ tests passing |
+| **Test Coverage** | CI-tracked status (see `DOCS/STATUS.md`) |
 
 ---
 
@@ -123,17 +125,17 @@ The SDK provides 3 active visualization systems with shared 6D rotation mathemat
 |----------|-------|
 | Canvas IDs | `background-canvas`, `shadow-canvas`, `content-canvas`, `highlight-canvas`, `accent-canvas` |
 | Geometries | 24 (8 base × 3 cores) |
-| Audio Reactive | Yes (bass/mid/high uniforms — wired in v2.0.0) |
-| Color Control | Full HSL (hue + saturation via `hsl2rgb()` — wired in v2.0.0) |
+| Audio Reactive | Yes (bass/mid/high uniforms — wired in current release series |
+| Color Control | Full HSL (hue + saturation via `hsl2rgb()` — wired in current release series |
 | Physics | No |
 
 **Core Features:**
 - Single WebGL context on `content-canvas`
 - Geometry functions in fragment shader
 - Core warp applied via `applyCoreWarp()` shader function
-- Full `hsl2rgb()` color pipeline with saturation control (v2.0.0)
-- Audio-reactive density/morph/hue shift (v2.0.0)
-- Click intensity boost (v2.0.0)
+- Full `hsl2rgb()` color pipeline with saturation control (current release series)
+- Audio-reactive density/morph/hue shift (current release series)
+- Click intensity boost (current release series)
 
 ### 3. Holographic System
 **File:** `src/holograms/RealHolographicSystem.js` (652 LOC)
@@ -341,10 +343,10 @@ class ResourceManagerContract {
 │   ├── agent/                    # MCP/CLI/Telemetry
 │   ├── export/                   # Export generators
 │   ├── wasm/                     # WASM loader
-│   ├── reactivity/               # Reactivity + SpatialInputSystem (v2.0.0)
-│   ├── creative/                 # Creative tooling (v2.0.0)
-│   ├── integrations/             # Platform integrations (v2.0.0)
-│   └── advanced/                 # Advanced features (v2.0.0)
+│   ├── reactivity/               # Reactivity + SpatialInputSystem (current release series)
+│   ├── creative/                 # Creative tooling (current release series)
+│   ├── integrations/             # Platform integrations (current release series)
+│   └── advanced/                 # Advanced features (current release series)
 ├── tools/                        # Tooling (+ shader-sync-verify.js)
 ├── cpp/                          # C++ math core (1,783 LOC)
 ├── js/                           # Client-side integration
@@ -394,14 +396,14 @@ Expected: `change_geometry`
 
 ## Current Development Status
 
-### Phase Status (as of v2.0.0, 2026-01-30)
+### Phase Status (historical baseline; current release status lives in `DOCS/STATUS.md`)
 | Phase | Status | Notes |
 |-------|--------|-------|
 | Phase 1: Foundation | ✅ Complete | Math, geometry, parameters |
 | Phase 2: Rendering | ✅ Mostly Complete | Contracts exist, adapters implemented |
 | Phase 3: Agentic | ✅ Complete | MCP, CLI, Telemetry working |
 | Phase 4: WebGPU | 🔄 In Progress | Scaffold exists, needs shader pipeline |
-| Phase 5: Hardening | ✅ Complete | 694 tests passing, XSS prevention, input validation |
+| Phase 5: Hardening | ✅ Complete | Security/input hardening completed; see `DOCS/STATUS.md` + CI for current test state |
 | **Phase A: Parity & Polish** | **✅ Complete** | Quantum color, Faceted saturation/audio, clickIntensity fix, shader sync tool |
 | **Phase B: Creative Tooling** | **✅ Complete** | Color presets, transitions, post-processing, timeline |
 | **Phase C: Platform Integrations** | **✅ Complete** | React, Vue, Svelte, Figma, Three.js, TouchDesigner, OBS |
@@ -417,7 +419,7 @@ Expected: `change_geometry`
 ### Remaining Gaps
 1. WebGPU backend needs full shader pipeline
 2. Some systems don't fully implement RendererContract
-3. New v2.0.0 modules need test coverage
+3. New current release-series modules need test coverage
 
 ---
 
@@ -429,18 +431,18 @@ Expected: `change_geometry`
 | WASM | ✅ Working | cpp/ → Emscripten → vib3.wasm |
 | Flutter | 🔄 Scaffold | src/platforms/flutter/ |
 | Node.js CLI | ✅ Working | src/agent/cli/ |
-| React | ✅ Component (v2.0.0) | src/integrations/frameworks/Vib3React.js |
-| Vue 3 | ✅ Component (v2.0.0) | src/integrations/frameworks/Vib3Vue.js |
-| Svelte | ✅ Component (v2.0.0) | src/integrations/frameworks/Vib3Svelte.js |
-| Three.js | ✅ ShaderMaterial (v2.0.0) | src/integrations/ThreeJsPackage.js |
-| Figma | ✅ Plugin (v2.0.0) | src/integrations/FigmaPlugin.js |
-| TouchDesigner | ✅ GLSL Export (v2.0.0) | src/integrations/TouchDesignerExport.js |
-| OBS Studio | ✅ Browser Source (v2.0.0) | src/integrations/OBSMode.js |
-| WebXR (VR/AR) | ✅ Renderer (v2.0.0) | src/advanced/WebXRRenderer.js |
+| React | ✅ Component (current release series) | src/integrations/frameworks/Vib3React.js |
+| Vue 3 | ✅ Component (current release series) | src/integrations/frameworks/Vib3Vue.js |
+| Svelte | ✅ Component (current release series) | src/integrations/frameworks/Vib3Svelte.js |
+| Three.js | ✅ ShaderMaterial (current release series) | src/integrations/ThreeJsPackage.js |
+| Figma | ✅ Plugin (current release series) | src/integrations/FigmaPlugin.js |
+| TouchDesigner | ✅ GLSL Export (current release series) | src/integrations/TouchDesignerExport.js |
+| OBS Studio | ✅ Browser Source (current release series) | src/integrations/OBSMode.js |
+| WebXR (VR/AR) | ✅ Renderer (current release series) | src/advanced/WebXRRenderer.js |
 
 ---
 
-## v2.0.0 New Systems
+## New Systems (current release series)
 
 ### SpatialInputSystem (`src/reactivity/SpatialInputSystem.js` — 1,783 lines)
 Universal spatial input that decouples "card tilting" from physical device orientation. Any input source maps through a normalized spatial state (pitch/yaw/roll/x/y/z/intensity/velocity) to any visualization parameter.
@@ -487,10 +489,10 @@ Verifies inline shaders match external shader files. Parses GLSL uniforms and WG
 ## Next Steps for Development
 
 ### Immediate Priorities
-1. Add test coverage for v2.0.0 modules (creative, integrations, advanced, SpatialInput)
+1. Add test coverage for current release-series modules (creative, integrations, advanced, SpatialInput)
 2. Complete WebGPU shader pipeline
 3. Production-harden platform integration wrappers
-4. Publish @vib3code/sdk v2.0.0 to NPM
+4. Publish current package version (see `DOCS/STATUS.md`) to NPM
 
 ### Consolidation Tasks
 - [ ] Audit RendererContract compliance for all 3 active systems
@@ -505,16 +507,17 @@ Verifies inline shaders match external shader files. Parses GLSL uniforms and WG
 
 | Document | Purpose |
 |----------|---------|
-| `CLAUDE.md` | Development instructions (v2.0.0 updated) |
+| `CLAUDE.md` | Development instructions |
 | `DEV_TRACK.md` | Session-by-session progress |
 | `DOCS/CLI_ONBOARDING.md` | Agent CLI setup |
 | `DOCS/CONTROL_REFERENCE.md` | UI control parameters |
 | `DOCS/RENDERER_LIFECYCLE.md` | Renderer architecture |
 | `DOCS/GPU_DISPOSAL_GUIDE.md` | Memory management |
-| `DOCS/SYSTEM_AUDIT_2026-01-30.md` | Full system audit (v2.0.0 updated) |
+| `DOCS/SYSTEM_AUDIT_2026-01-30.md` | Full system audit |
+| `DOCS/archive/SYSTEM_AUDIT_2026-01-30.md` | Full system audit (v2.0.0 updated, archived) |
 | `24-GEOMETRY-6D-ROTATION-SUMMARY.md` | Geometry encoding |
 
 ---
 
 *This document is the canonical system inventory. Update after significant changes.*
-*Last major update: v2.0.0 — 2026-01-30*
+*Last major inventory update: 2026-01-30. For current release metadata, see `DOCS/STATUS.md`.*

package/DOCS/VISUAL_ANALYSIS_CLICKERSS.md

@@ -0,0 +1,85 @@
+# Visual Analysis: clickerss.com
+
+**Captured: 2026-02-10 via Playwright with wheel-based scrolling**
+**Method**: Real Chromium screenshots at 5 scroll positions (wheel events)
+**Page height**: 9,950px (~11x viewport)
+
+---
+
+## Scroll Journey (Frame by Frame)
+
+### s00 — Top (scrollY=0)
+**Dramatic B&W hero photograph**
+- Background: pure white
+- Massive B&W photograph: woman's face looking upward, cropped tight
+- Image fills ~90% of viewport width, extends below fold
+- "CLICKERSS" wordmark top-left in thin spaced uppercase
+- Grid/dot icon center-top (hamburger/menu)
+- Shopping bag icon top-right with "0"
+- No other text or elements visible — the photograph IS the hero
+- **Pattern**: Photography-as-hero. No text tagline, no CTA button, no gradient. Just a massive, emotional B&W portrait. The image does all the talking.
+
+### s01 — scrollY=2400
+**Massive serif typography with text-image overlap**
+- Left side: HUGE serif italic text — "CADA CAMPAÑA TIENE UN PROPOSITO." (~150px+ font)
+- Text fills entire left half of viewport
+- Right side at midpoint: device mockups (laptop + phone) showing portfolio work
+- Below-right: MORE massive serif text — "ELEVAR MARCAS QUE DESEAN MARCAR LA DIFERENCIA"
+- Bottom-left: portfolio image (fashion/beauty brand "MAISON LINA")
+- The text and images OVERLAP — text runs behind/through images, images overlap text
+- **Pattern**: Text-image interweaving. The massive serif text and the portfolio images occupy the SAME space, overlapping. Neither takes precedence — they share the viewport, creating a collage-like effect. This is the "text as visual element" pattern taken to an extreme.
+
+### s02 — scrollY=4800
+**Product photography + service description**
+- Top-left: iPhone product photos (phone shown from behind, showing camera modules)
+- Images are placed asymmetrically, partially overlapping
+- Right side: "VIDEOS CORPORATIVOS" heading in serif
+- Below: "CONTAMOS TU HISTORIA DE MANERA UNICA" subheading
+- Body text paragraph below
+- Lower-left: portrait photo of man with flowing hair, cropped as rectangle
+- Clean white background throughout
+- **Pattern**: Asymmetric service showcase. Product photos LEFT, description text RIGHT. Portrait photo breaks the pattern by appearing lower-left. The layout is deliberately irregular.
+
+### s03 — scrollY=7200
+**Mixed content section**
+- Various portfolio/service content
+- Continuing the white background
+- Images and text positioned asymmetrically
+- No dark/light mode switch — entire site stays on white
+
+### s04 — scrollY=9050 (bottom)
+**CTA footer with massive typography**
+- ENORMOUS serif text: "TU PRESENCIA DIGITAL ESTA A PUNTO DE DESPEGAR" (fills ~60% of viewport height)
+- Arrow → + call-to-action body text below
+- Footer nav: HOME, SERVICIOS, PORTFOLIO, SOBRE MI, CONTACTO, COMPRAR (all spaced across full width)
+- Thin horizontal rule
+- Bottom bar: legal links + copyright
+- **Pattern**: Typography-as-CTA. Instead of a small "Contact us" button, the entire viewport is filled with massive serif text that IS the CTA. The typography scale makes the message impossible to ignore.
+
+---
+
+## Key Design Patterns for VIB3+ Translation
+
+### 1. Photography-as-Hero (No Competing Elements)
+The hero has ONE thing: a massive photograph. No text overlay, no buttons, no gradients. The image fills the space and the viewer must engage with it.
+**For VIB3+**: The opening cinematic with VIB3CODE text mask should have the visualizer as the ONLY visual element — no competing UI, no description text. Let the GPU canvas be the hero image equivalent.
+
+### 2. Text-Image Interweaving
+Typography and images share the same spatial region, overlapping deliberately. Text runs behind images; images overlap text boundaries. Neither element "wins" — they coexist.
+**For VIB3+**: Cascade card overlays could have text that extends BEYOND the card boundaries, overlapping into adjacent cards. The `.cascade-overlay` text could be positioned to extend past the clip-path edge.
+
+### 3. Massive Serif Typography as Primary Visual Element
+Text isn't just information — it's the dominant visual pattern. Lines of text at 100-200px size create visual rhythm and weight comparable to images.
+**For VIB3+**: Section titles could be dramatically larger — not just `3rem` headings but `clamp(4rem, 12vw, 10rem)` viewport-filling text.
+
+### 4. Consistent White Background (No Mode Switching)
+Unlike Simone's dark/light mode transitions, clickerss stays on white throughout. All visual variety comes from photography and typography scale.
+**For VIB3+**: This validates that NOT every section needs a color mode switch. Some sections can maintain a consistent background and let the visualizer parameters alone create the visual change.
+
+### 5. CTA as Giant Typography
+The footer CTA fills the viewport with a single sentence. The scale of the text makes it feel like a billboard or poster.
+**For VIB3+**: The CTA section could use massive outlined text (similar to Simone's footer "SIMONE" strokes) rather than a traditional button layout.
+
+---
+
+*Analysis based on actual Playwright screenshots captured with wheel-event scrolling.*

package/DOCS/VISUAL_ANALYSIS_FACETAD.md

@@ -0,0 +1,133 @@
+# Visual Analysis: facetad.com
+
+**Captured: 2026-02-10 via Playwright with wheel-based scrolling**
+**Method**: Real Chromium screenshots at 10 scroll positions (wheel events)
+**Page height**: 15,082px (~16.8x viewport)
+
+---
+
+## Scroll Journey (Frame by Frame)
+
+### s00 — Top (scrollY=0)
+**Ultra-minimal hero: single line of text on vast cream emptiness**
+- Background: warm cream/off-white (#F5F0EB range)
+- Centered text: "We approach every facet of design with a sense of wonder."
+- Text is small, light gray, serif — occupies maybe 5% of viewport
+- Tiny chevron/scroll indicator below text
+- No nav, no logo visible at top — just vast empty space above and below
+- **Pattern**: Extreme negative space. The emptiness IS the design. Forces the eye to the single sentence.
+
+### s01 — scrollY=1680
+**Parallelogram image explosion around centered logo**
+- FACET logo + "ARCHITECTURAL DESIGN" centered
+- Tagline below logo
+- 6+ architectural photos SCATTERED around the logo in **parallelogram/skewed clip-paths**
+- Images are different sizes, at different angles/positions
+- Images overlap each other and the logo text
+- Some images partially exit viewport edges
+- **Pattern**: Scattered parallelogram gallery. Images use CSS `transform: skew()` or `clip-path: polygon()` to create non-rectangular shapes. Creates a chaotic but visually rich collage effect.
+
+### s02 — scrollY=3360
+**Full parallelogram gallery — maximum density**
+- ~20+ architectural photos visible, ALL in parallelogram shapes
+- Images scattered across entire viewport at various sizes (small thumbnails to medium)
+- FACET logo still centered but partially obscured by overlapping images
+- Some images overlap each other creating depth layers
+- Images appear to float at different z-levels
+- **Pattern**: This is the peak of the scatter effect. The sheer density + non-rectangular shapes + overlap creates an effect like looking through a shattered window at many projects simultaneously. Very strong depth illusion.
+
+### s03 — scrollY=5040
+**Large diagonal project images**
+- Two massive project photos with strong diagonal clip-path edges
+- Top: building at dusk with warm-lit windows, cut diagonally
+- Bottom-right: bright blue architectural image, also cut diagonally
+- A red/orange geometric element visible at top-right (matching brand color)
+- Images take up most of viewport, overlapping
+- **Pattern**: From scattered small thumbnails, the images have GROWN into massive hero-sized images. The diagonal edges create dramatic slash transitions between photos. This is the parallelogram theme at architectural scale.
+
+### s04 — scrollY=6720
+**Single massive image with diagonal wipe to cream**
+- Top-left: large project photo (modern building exterior with glass, lawn, outdoor seating)
+- Diagonal edge cuts from top-left to bottom-right
+- Below the diagonal: pure cream emptiness
+- The diagonal creates a dramatic "wipe" transition from content to void
+- **Pattern**: Diagonal section transition. Not horizontal, not curved — a sharp diagonal slash separates photo content from empty space. This is how facetad handles section boundaries.
+
+### s05 — scrollY=8400
+**Markets section: overlapping photos + text**
+- Top: "MARKETS WE SERVE" heading in red/terracotta
+- Two large photos side by side showing hospitality interior (bar/restaurant)
+- Photos overlap slightly, creating a diptych
+- Right side: "HOSPITALITY" heading in red italic + body text paragraph
+- Classic asymmetric layout: images LEFT, text RIGHT
+- **Pattern**: Asymmetric portfolio section — large overlapping photos paired with small text. The overlap between the two photos adds depth.
+
+### s06 — scrollY=10080
+**Services section: clean asymmetric layout**
+- "OUR DESIGN SERVICES" heading top-left in small red text
+- "ARCHITECTURE" heading in large red italic text, left side
+- Body text paragraph below heading
+- Large architectural rendering (aerial view of commercial building) floats right at ~55% width
+- Image has subtle shadow/depth
+- Clean, spacious layout with generous white space
+- **Pattern**: Standard asymmetric card (text left, image right) but with extreme white space. The image is large and positioned to feel like it's floating above the page.
+
+### s07 — scrollY=11760
+**Services continued + diagonal color transition beginning**
+- "OUR DESIGN SERVICES" still visible at top
+- "FF&E" heading in red italic with body text, left side
+- No image — text only section
+- Bottom of viewport: the red/terracotta color BEGINS appearing as a diagonal band
+- The diagonal enters from bottom-right, cutting upward to the left
+- **Pattern**: The diagonal section divider is introducing the red brand color. It's the same diagonal slash pattern but now used for a full COLOR MODE TRANSITION (cream → red).
+
+### s08 — scrollY=13440
+**Full diagonal color split: red to cream**
+- Top ~40%: solid red/terracotta (#C0392B range)
+- Diagonal slash cuts from upper-left to lower-right
+- Bottom ~60%: back to cream
+- "START A CONVERSATION" in large red italic text on cream
+- "Talk with one of our award-winning architects about your next project." body text
+- "Schedule A Call" link in red
+- **Pattern**: The CTA section uses the diagonal color split as a dramatic reveal. The red block slides away diagonally to reveal the CTA on cream. Creates a cinematic wipe effect.
+
+### s09 — scrollY=14182 (bottom)
+**Footer: diagonal split cream/red**
+- Top-left: cream background with FACET logo + address + contact info
+- Diagonal divider cuts from upper-right to lower-left
+- Bottom-right: solid red/terracotta background with nav links + social links + subscribe form
+- "SUBSCRIBE" heading with email input and "SUBMIT" button
+- "Website by Novel" credit at bottom-left
+- **Pattern**: Footer echoes the diagonal theme. The entire footer is split diagonally — warm cream on one side, brand red on the other. The diagonal is the site's signature visual motif from hero through footer.
+
+---
+
+## Key Design Patterns for VIB3+ Translation
+
+### 1. Parallelogram/Skewed Image Gallery
+Project images use non-rectangular clip-paths (parallelograms, rhomboids). Images are scattered at different sizes, positions, and overlap each other. This creates a shattered-glass collage effect with real depth.
+**For VIB3+**: Cascade cards could use parallelogram clip-paths instead of rectangles. The clip-path morphing system already supports polygon interpolation — add skewed/angled shapes to the shape sequence.
+
+### 2. Diagonal Section Dividers
+Every section boundary uses a diagonal slash — not horizontal lines, not curves. The same angle (~30-40 degrees) is used consistently.
+**For VIB3+**: Section dividers could use angled clip-paths or CSS `polygon()` instead of horizontal borders. The diagonal creates much more visual energy than straight horizontal lines.
+
+### 3. Density Progression (Sparse → Dense → Sparse)
+The page starts with extreme emptiness (one line of text), builds to maximum density (20+ scattered images), then relaxes back to spacious layouts before ending with another sparse CTA.
+**For VIB3+**: The morph stages should follow this arc — start minimal, build to visual complexity peak, then settle.
+
+### 4. Diagonal Color Mode Transitions
+The cream → red transition doesn't happen at a horizontal boundary. A diagonal band of red slashes across the viewport, creating a cinematic wipe effect.
+**For VIB3+**: Dark/light mode switches could use diagonal clip-path animations instead of straight horizontal borders.
+
+### 5. Extreme Negative Space
+The hero is 95% empty. Text occupies a tiny fraction of the viewport. This forces attention and creates anticipation.
+**For VIB3+**: The opening cinematic should start sparse — let the visualizer breathe in vast empty space before the content builds up.
+
+### 6. Consistent Brand Angle
+The diagonal angle is THE signature of the site. It appears in: image clip-paths, section dividers, color transitions, footer layout. The same ~30deg angle repeats everywhere.
+**For VIB3+**: Pick a consistent geometric motif and repeat it across different contexts — clip-paths, dividers, card shapes, overlay patterns.
+
+---
+
+*Analysis based on actual Playwright screenshots captured with wheel-event scrolling.*

package/DOCS/VISUAL_ANALYSIS_SIMONE.md

@@ -0,0 +1,95 @@
+# Visual Analysis: weare-simone.webflow.io
+
+**Captured: 2026-02-10 via Playwright with wheel-based scrolling**
+**Method**: Real Chromium screenshots at 8 scroll positions (wheel events trigger Lenis/GSAP)
+**Page height**: 12,062px (~13.4x viewport)
+
+---
+
+## Scroll Journey (Frame by Frame)
+
+### s00 — Top (scrollY=0)
+**Giant "SIMONE" wordmark fills ~80% of viewport width**
+- Background: warm cream/off-white with subtle noise texture
+- Typography: black, extremely bold condensed sans-serif, all caps
+- Text takes up full viewport — no other content visible except:
+  - Small "SIMONE" logo top-left (dark teal, tiny)
+  - Green pill-shaped nav button top-right with dot indicators
+  - Minimal nav links: "Work", "About", "Contact"
+- **Pattern**: Hero section is JUST typography. No images, no gradients. The text IS the design. Massive scale creates impact.
+
+### s01 — scrollY=2400
+**Complete mode switch: cream → dark teal**
+- Background: deep dark teal (#0A3239 range) with subtle noise texture
+- Large white serif/display text: "What if we could alter reality *for the better?*"
+- "for the better?" in lime/chartreuse green (#CCFF66)
+- Below: smaller body text (cream colored) explaining studio mission
+- Content sits within a large rounded-corner container (~24px radius)
+- **Pattern**: DRAMATIC full-palette inversion at section boundary. The entire color scheme flips. This is the "dark/light mode threshold" pattern.
+
+### s02 — scrollY=4800
+**Asymmetric case study card (IKEA)**
+- Still dark teal background
+- Large serif heading: "Transform how we browse"
+- Small body text on left side
+- IKEA logo (white on dark)
+- Green pill button: "View case study" with arrow
+- **Product image floats right**: desk lamp in dark tones, offset ~60% to the right
+- Below: "Turn up the magic" heading beginning to enter viewport
+- **Pattern**: Asymmetric card layout. Text content LEFT, floating product image RIGHT. The image is positioned outside the text column — creates overlap depth.
+
+### s03 — scrollY=7200
+**Sephora + Nike stacked case studies**
+- Top: Sephora section ending — "Draw people into your world..." text top-right
+- Sephora logo centered, "View case study" green pill
+- Red 3D cosmetic product floats LEFT (~25% from left edge)
+- Bottom half: Nike "Get people moving" section beginning
+- Nike logo at bottom
+- **Pattern**: Alternating asymmetry — IKEA had image RIGHT, Sephora has image LEFT, Nike will have image RIGHT. This creates a zigzag visual rhythm as you scroll.
+
+### s04 — scrollY=9600
+**Client logos strip on cream background**
+- Mode switch BACK to light: cream/off-white background
+- Three logos visible: Dior, Monzo, Disney
+- Very clean, minimal spacing
+- Logos are small and muted (dark teal on cream)
+- **Pattern**: Palate cleanser section. After intense dark case studies, a minimal light section resets visual fatigue. Brief breathing room.
+
+### s05 — scrollY=11162 (bottom)
+**CTA footer with marquee**
+- Mode switch back to dark teal
+- "Ready to alter reality?" centered heading (small, white)
+- GIANT horizontal marquee: "Work with us" repeated, scrolling horizontally
+- Green circular CTA button between the marquee text repetitions
+- Below the marquee: "SIMONE" in massive OUTLINED/STROKE typography (no fill, just border)
+- Footer bar: © 2026, Instagram, LinkedIn, "Site by Kin", 1% Planet badge
+- **Pattern**: The footer echoes the hero — same giant "SIMONE" text but now as outlined strokes instead of filled. Creates bookend/closure. The horizontal marquee adds perpetual motion.
+
+---
+
+## Key Design Patterns for VIB3+ Translation
+
+### 1. Typography-As-Hero
+The hero section has NOTHING except giant text. No background effects, no images. The text IS the visual impact. For VIB3+: the opening cinematic should let the visualizer fill the entire space without competing with too many UI elements.
+
+### 2. Hard Dark/Light Mode Switches
+Sections don't cross-fade between modes — they SNAP. Cream → dark teal is a sharp boundary (though with Lenis smoothing it feels smooth). For VIB3+: system/parameter presets should change sharply at section boundaries, not gradually.
+
+### 3. Zigzag Asymmetric Cards
+Case study cards alternate: image-right → image-left → image-right. This creates visual rhythm and prevents monotony. For VIB3+: cascade cards or triptych panels should have alternating asymmetry rather than centered symmetry.
+
+### 4. Floating Product Objects
+Images are positioned OUTSIDE their text columns, overlapping into adjacent space. This creates real depth layers. For VIB3+: visualizer canvases could extend beyond their logical containers, bleeding into adjacent sections.
+
+### 5. Marquee CTA
+"Work with us" scrolls infinitely horizontally. This adds persistent motion that's independent of scroll position. For VIB3+: a parameter-driven text ticker or rotating geometry showcase could serve the same purpose.
+
+### 6. Outlined Typography Echo
+The hero's filled "SIMONE" becomes outlined/stroked at the footer. The same shape, different rendering. For VIB3+: the same geometry could be shown in different visualization systems at different scroll positions (Quantum fill → Faceted outline).
+
+### 7. Subtle Noise Texture
+Both light and dark backgrounds have a visible noise/grain texture overlay. This adds tactile quality and prevents "flat digital" feeling. For VIB3+: a CSS grain overlay on sections would add this same warmth.
+
+---
+
+*Analysis based on actual Playwright screenshots captured with wheel-event scrolling.*