THE CENTER
The Core/Flow Gestalt Color System with Gravity Lensing Operations
╔═══════════════════════════════════════════════════════════════════════════════╗
║ THE CORE/FLOW GESTALT COLOR SYSTEM ║
║ with Gravity Lensing Operations ║
╠═══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ COORDINATE PARADIGM ║
║ ──────────────────────────── ║
║ CORE (OkLCH) FLOW (OkLab) ║
║ Identity space + center Transition space ║
║ ║
║ ════════════════════════════════════════════════════════════════════════════ ║
║ ║
║ GRAVITY (Overall paradigm) ║
║ ─────────────────────── ║
║ ║
║ Frame Drag Einstein Arc ║
║ ─────────── ──────────── ║
║ blend_hue() warp_hue_compress() ║
║ "Hue dragged toward Core" "Hue path bends around Core" ║
║ Gestalt: Similarity Gestalt: Common Fate ║
║ ║
║ │ ║
║ ▼ ║
║ ║
║ Caustic curve (boundary line) ║
║ Caustic region (convergence zone) ║
║ fill_with_oklab_gradient() ║
║ Gestalt: Continuity ║
║ ║
║ ════════════════════════════════════════════════════════════════════════════ ║
║ ║
║ OUTPUT RESULT ║
║ ────── ────── ║
║ Lensed Colors Pragnanz ║
║ (transformed colors) (perceived as orderly whole) ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
Terminology Mapping
| Physics Term | Role | Function | Gestalt |
|---|---|---|---|
| Core | Theme Hue center point | core_hue | Figure/Ground |
| Frame Drag | Hue dragging | blend_hue() | Similarity |
| Einstein Arc | Space bending | warp_hue_compress() | Common Fate |
| Caustic curve | Convergence boundary | pull_width | - |
| Caustic region | Convergence zone | fill_with_oklab_gradient() | Continuity |
| Lensed Colors | Transformed output | - | - |
| Pragnanz | Perceptual effect | - | Pragnanz |
Why Gravitational Lensing Metaphor?
┌─────────────────────────────────────────────────────────────────┐
│ Why the gravity lens metaphor? │
├─────────────────────────────────────────────────────────────────┤
│ │
│ FRAME DRAG (Lense-Thirring Effect) │
│ ────────────────────────────────── │
│ • Physics: Rotating massive body drags spacetime │
│ • Monolex: Core drags all colors toward its Hue │
│ • Result: Gestalt Similarity (similar = same group) │
│ │
│ EINSTEIN ARC (Gravitational Lensing) │
│ ───────────────────────────────────── │
│ • Physics: Light bends around massive object │
│ • Monolex: Hue bends its path when passing near Core │
│ • Result: Gestalt Common Fate (same direction = same group) │
│ │
│ CAUSTIC │
│ ──────── │
│ • Physics: Boundary where light rays converge │
│ • Monolex: Zone where Hues converge │
│ • Caustic curve = boundary line, Caustic region = inner zone │
│ • Result: Gestalt Continuity │
│ │
└─────────────────────────────────────────────────────────────────┘
Frame Drag = CORE Operation (Gestalt Similarity)
Why CORE?
Frame Drag modifies the identity of a color:┌─────────────────────────────────────────────────────────────────┐
│ FRAME DRAG = CORE Operation │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Original: Red (0 degrees) │
│ ↓ blend_hue(0, 250, 0.15) // Dragged toward Core │
│ Result: "Blue-tinged Red" (~37 degrees) │
│ │
│ This changes the answer to "What is Red?": │
│ Before: "Pure Red" │
│ After: "Red that belongs to Blue theme" (dragged to Core) │
│ │
│ ───────────────────────────────────────────────────────────── │
│ │
│ Gestalt Connection: SIMILARITY │
│ ────────────────────────────────── │
│ │
│ "Elements with similar characteristics are perceived as group" │
│ │
│ After core_hue = 250 degrees applied: │
│ ┌─────────────────────────────────────┐ │
│ │ Red+Blue Green+Blue Yellow+Blue│ │
│ │ ↓ ↓ ↓ │ │
│ │ All have "Blue-ish" common trait │ │
│ │ ↓ ↓ ↓ │ │
│ │ Perceived as same theme (Similarity│ │
│ └─────────────────────────────────────┘ │
│ │
│ Core drags identity → Gestalt Similarity grouping │
│ │
└─────────────────────────────────────────────────────────────────┘
Frame Drag Code
┌───────────────────────────────────────────────────────────────────────┐
│ FRAME DRAG CODE FLOW │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ tint_strength > 0? │
│ │ │
│ NO ──┴──► Skip (no Frame Drag) │
│ │ │
│ YES ─┴──► dragged_h = blend_hue(h, core_hue, tint_strength) │
│ h = dragged_h │
│ │
│ EFFECT: Hue dragged toward Core in OkLCH polar space │
│ │
└───────────────────────────────────────────────────────────────────────┘
// theme_transform.rs
// CORE operation: Hue blending in OkLCH space (Frame Drag)
if cache.tint_strength > 0.0 {
let dragged_h = blend_hue(h, cache.core_hue, cache.tint_strength);
h = dragged_h;
}
Einstein Arc = CORE + FLOW Hybrid (Gestalt Common Fate)
Hybrid Structure
This is the most important insight:┌─────────────────────────────────────────────────────────────────┐
│ EINSTEIN ARC = CORE + FLOW Hybrid │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Einstein Arc uses different operations by zone: │
│ │
│ │
│ Core ● (250 degrees Blue) │
│ ╲│╱ │
│ ╲ │ ╱ Outside Caustic: CORE (Arc) │
│ ╲ ╲ │ ╱ ╱ Hue bends, identity preserved │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━ ← Caustic curve │
│ │ ░░░░░ │ │
│ │ ░░░░░ │ Inside Caustic: FLOW │
│ │ ░░░░░ │ Gradient convergence │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━ ← Caustic curve │
│ │
│ │
│ Outside Caustic: CORE Operation │
│ ───────────────────────────────── │
│ • Function: warp_hue_compress() │
│ • Coordinate: OkLCH (Polar) │
│ • Action: Hue angle redistribution (Arc around Core) │
│ • Purpose: Redistribute space while preserving color identity │
│ │
│ Inside Caustic (Caustic region): FLOW Operation │
│ ──────────────────────────────────────── │
│ • Function: fill_with_oklab_gradient() │
│ • Coordinate: OkLab (Cartesian) │
│ • Action: Linear interpolation gradient │
│ • Purpose: Smooth transition (prevent muddiness) │
│ │
└─────────────────────────────────────────────────────────────────┘
Why Hybrid is Necessary
┌─────────────────────────────────────────────────────────────────┐
│ Using CORE only? │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Colors jump abruptly at Caustic curve boundary: │
│ │
│ Just outside boundary: 45 degrees (Orange) │
│ Just inside boundary: 70 degrees (Yellow-Green) ← Abrupt! │
│ │
│ Problem: Unnatural color transitions │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ Using FLOW only? │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Entire color wheel processed as gradient: │
│ │
│ All colors blend → individual identity lost │
│ Red becomes "some mixed color" not "Red" │
│ │
│ Problem: Color identity destruction │
│ │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ CORE + FLOW Hybrid (Einstein Arc): │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Outside Caustic (CORE): Arc while preserving identity │
│ Red is still Red │
│ Blue occupies wider area │
│ │
│ Inside Caustic (FLOW): Smooth gradient transition │
│ No abrupt jumps at boundary │
│ OkLab linear interpolation → no muddiness │
│ │
│ Result: Identity(Core) + Smoothness(Flow) = Optimal harmony │
│ │
└─────────────────────────────────────────────────────────────────┘
Einstein Arc Code: Zone-Based Coordinate Selection
┌───────────────────────────────────────────────────────────────────────┐
│ APPLY_HUE_WARP: ZONE-BASED COORDINATE SELECTION │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ INPUT: hue, l, c, cache │
│ │
│ pull_mode? │
│ │ │
│ MODE 1 ──► PURE CORE (Einstein Arc without Caustic): │
│ warped = warp_hue_compress(...) │
│ return (l, c×cos(warped), c×sin(warped)) │
│ │ │
│ MODE 2 ──► CORE + FLOW Hybrid: │
│ warped = warp_hue_compress(...) // Always calculate │
│ │ │
│ └──► fill_with_oklab_gradient() returns Some? │
│ │ │
│ YES ─┴──► Inside Caustic: use FLOW │
│ │ return (grad_l, grad_a, grad_b) │
│ │ │
│ NO ──┴──► Outside Caustic: use CORE │
│ return (l, c×cos(warped), c×sin) │
│ │
└───────────────────────────────────────────────────────────────────────┘
// theme_transform.rs
fn apply_hue_warp(hue: f32, l: f32, c: f32, cache: &ThemeTransformCache) -> (f32, f32, f32) {
match cache.pull_mode {
1 => {
// compress only: PURE CORE (Einstein Arc without Caustic)
let warped = warp_hue_compress(hue, cache.core_hue,
cache.pull_strength, cache.pull_width);
(l, c * warped.cos(), c * warped.sin())
}
_ => {
// Einstein Arc + Caustic: CORE + FLOW hybrid
let warped = warp_hue_compress(...); // CORE (always calculated)
if let Some((grad_l, grad_a, grad_b)) = fill_with_oklab_gradient(
hue, cache.core_hue, cache.pull_strength,
cache.pull_width, l, c
) {
// Inside Caustic region: use FLOW
(grad_l, grad_a, grad_b)
} else {
// Outside Caustic: use CORE (Arc)
(l, c * warped.cos(), c * warped.sin())
}
}
}
}
Zone-Based Coordinate Transformation (Code-Level Evidence)
Outside Caustic: CORE (OkLCH Polar)
┌───────────────────────────────────────────────────────────────────────┐
│ WARP_HUE_COMPRESS: OUTSIDE CAUSTIC (CORE Operation) │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ All calculations in OkLCH Polar (radian angles) │
│ │
│ STEP 1: Calculate angle difference │
│ delta = normalize(hue - core_hue) to [-π, π] │
│ abs_d = |delta| │
│ │
│ STEP 2: Zone check │
│ abs_d <= width? │
│ │ │
│ YES ─┴──► Inside Caustic: compress │
│ ratio = abs_d / width │
│ compressed = ratio × (1 - strength) │
│ return core_hue + sign × compressed × width │
│ │ │
│ NO ──┴──► Outside Caustic: Arc around Core │
│ Redistribute in expanded range │
│ (Only manipulate Hue angle, L/C unchanged) │
│ │
│ OUTPUT: warped hue angle (radians) │
│ CONVERSION: (l, c×cos(H'), c×sin(H')) │
│ │
└───────────────────────────────────────────────────────────────────────┘
warp_hue_compress (Einstein Arc)
─────────────────────────────────
Directly manipulates Hue angle in OkLCH Polar space.
All calculations performed in radian angles (OkLCH Polar):
delta = angle difference between input hue and core hue
═══════════════════════════════════════════════════════════════
★ Inside Caustic: Compress toward center (CORE operation)
═══════════════════════════════════════════════════════════════
ratio = 0 at center, 1 at boundary
compressed = ratio × (1 - strength)
result = core_hue + sign × compressed × width
═══════════════════════════════════════════════════════════════
★ Outside Caustic: Arc around Core (CORE operation)
═══════════════════════════════════════════════════════════════
Only manipulate Hue angle, L/C unchanged
→ Leveraging OkLCH (polar) characteristics
Redistribute in expanded range proportionally
Output: warped hue angle (radians)
Final OkLab conversion: (l, c × cos(warped), c × sin(warped))
// ↑ a = C * cos(H) ↑ b = C * sin(H)
Inside Caustic (Caustic region): FLOW (OkLab Cartesian)
┌───────────────────────────────────────────────────────────────────────┐
│ FILL_WITH_OKLAB_GRADIENT: INSIDE CAUSTIC (FLOW Operation) │
├───────────────────────────────────────────────────────────────────────┤
│ │
│ ZONE CHECK: |delta| > width? │
│ │ │
│ YES ─┴──► Return None (Outside Caustic → use CORE instead) │
│ │ │
│ NO ──┴──► Inside Caustic: Apply FLOW │
│ │
│ STEP 1: Convert boundaries OkLCH → OkLab │
│ ───────────────────────────────────────── │
│ left_boundary = core_hue - width_after │
│ right_boundary = core_hue + width_after │
│ │
│ left_a = c × cos(left_boundary) │
│ left_b = c × sin(left_boundary) │
│ right_a = c × cos(right_boundary) │
│ right_b = c × sin(right_boundary) │
│ │
│ STEP 2: Linear interpolation in OkLab Cartesian │
│ ─────────────────────────────────────────────── │
│ t = (hue_offset + width) / (2 × width) // 0=left, 1=right │
│ │
│ result_a = left_a × (1-t) + right_a × t │
│ result_b = left_b × (1-t) + right_b × t │
│ │
│ OUTPUT: Some((l, result_a, result_b)) in OkLab Cartesian │
│ │
└───────────────────────────────────────────────────────────────────────┘
fill_with_oklab_gradient (Caustic Fill)
────────────────────────────────────────
OkLab linear interpolation inside the Caustic zone.
Zone check: if outside Caustic → return None, use CORE instead
═══════════════════════════════════════════════════════════════
★ OkLCH → OkLab conversion (Core code)
═══════════════════════════════════════════════════════════════
Left Caustic curve boundary point (OkLCH → OkLab):
left_a = C × cos(left_boundary) // a = C × cos(H)
left_b = C × sin(left_boundary) // b = C × sin(H)
Right Caustic curve boundary point (OkLCH → OkLab):
right_a = C × cos(right_boundary) // a = C × cos(H)
right_b = C × sin(right_boundary) // b = C × sin(H)
═══════════════════════════════════════════════════════════════
★ OkLab Cartesian linear interpolation (FLOW operation)
═══════════════════════════════════════════════════════════════
t = position ratio within zone [0, 1]
(0 = left boundary, 1 = right boundary)
result_a = left_a × (1-t) + right_a × t // a interpolation
result_b = left_b × (1-t) + right_b × t // b interpolation
Output: (L, result_a, result_b) in OkLab Cartesian
Smooth gradient without muddy intermediate colors
Why Different Coordinates per Zone?
┌─────────────────────────────────────────────────────────────────┐
│ ZONE-BASED Coordinate Selection: Geometric Reasoning │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Outside Caustic: OkLCH (Polar) - CORE │
│ ───────────────────────────────────── │
│ │
│ • Hue = angle, Chroma = radius │
│ • Changing only angle = "moving on color wheel" │
│ • Preserves individual color identity │
│ • Red is still Red (just at adjusted angle) │
│ │
│ OkLCH color wheel: │
│ ●────● │
│ ╱ ╲ ● Each color expressed as angle │
│ ● ● → Angle adjustment = identity preserved │
│ ╲ ╱ │
│ ●────● │
│ │
│ ───────────────────────────────────────────────────────────── │
│ │
│ Inside Caustic: OkLab (Cartesian) - FLOW │
│ ─────────────────────────────────────── │
│ │
│ • a = green-red axis, b = blue-yellow axis │
│ • Linear interpolation between two points = shortest path │
│ • Doesn't pass through color wheel center → prevents muddiness │
│ • Creates smooth gradient │
│ │
│ OkLab Cartesian: │
│ b │
│ ↑ │
│ ────●──────────●──→ a │
│ ╱ ╲ │
│ ╱ Linear ╲ │
│ ●────────────────● │
│ left Caustic right Caustic │
│ curve curve │
│ │
│ ───────────────────────────────────────────────────────────── │
│ │
│ Conclusion: Optimal coordinate per zone │
│ ─────────────────────────────────── │
│ │
│ • Outside: Need identity manipulation → Polar(angle) natural → │
│ • Inside: Need smooth transition → Cartesian(line) efficient → │
│ │
└─────────────────────────────────────────────────────────────────┘
Mathematical Conversion Formulas
╔═══════════════════════════════════════════════════════════════════════════════╗
║ OkLCH ↔ OkLab Conversion Formulas ║
╠═══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ OkLCH → OkLab (Polar → Cartesian) ║
║ ───────────────────────────────── ║
║ ║
║ a = C * cos(H) // Used in fill_with_oklab_gradient ║
║ b = C * sin(H) // left_a, left_b, right_a, right_b calculation ║
║ L = L // Lightness unchanged ║
║ ║
║ OkLab → OkLCH (Cartesian → Polar) ║
║ ───────────────────────────────── ║
║ ║
║ C = sqrt(a^2 + b^2) // Chroma = distance from origin ║
║ H = atan2(b, a) // Hue = angle ║
║ L = L // Lightness unchanged ║
║ ║
║ ─────────────────────────────────────────────────────────────────────────── ║
║ ║
║ CORE (Einstein Arc - warp_hue_compress): ║
║ • Manipulates H (Hue) only ║
║ • Final: (L, C*cos(H'), C*sin(H')) ║
║ ║
║ FLOW (Caustic region - fill_with_oklab_gradient): ║
║ • Linearly interpolates a, b ║
║ • Final: (L, a', b') returned directly ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
Zone-Based Gestalt Effects: Three Principles Achieved Simultaneously
┌─────────────────────────────────────────────────────────────────┐
│ EINSTEIN ARC: Three Gestalt Principles Achieved Simultaneously │
├─────────────────────────────────────────────────────────────────┤
│ │
│ │ │
│ ╲ │ ╱ │
│ ╲ ╲ │ ╱ ╱ Arc region (CORE) │
│ ╲ ╲ ╲ │ ╱ ╱ ╱ │
│ ╔══════════════════════════╗ ← Caustic curve │
│ ║ ║ │
│ ║ ● Core ║ Caustic region │
│ ║ ║ (FLOW) │
│ ╚══════════════════════════╝ ← Caustic curve │
│ ╱ ╱ ╱ │ ╲ ╲ ╲ │
│ ╱ ╱ │ ╲ ╲ Arc region (CORE) │
│ ╱ │ ╲ │
│ │ │
│ │
│ ───────────────────────────────────────────────────────────── │
│ │
│ Why Zone-Based Hybrid is Psychologically Effective? │
│ ──────────────────────────────────────────── │
│ │
│ • Outside Caustic (CORE): │
│ Red is still perceived as Red │
│ → Individual color "figure" preserved │
│ → Figure/Ground principle │
│ │
│ • Inside Caustic (FLOW): │
│ No abrupt jumps at boundaries │
│ → Eye perceives "natural connection" │
│ → Continuity principle │
│ │
│ • Overall (Both): │
│ All colors move toward same direction (Core) │
│ → "These colors move together" │
│ → Common Fate principle │
│ │
│ Result: Synergy of three Gestalt principles │
│ → Lensed Colors → Pragnanz │
│ │
└─────────────────────────────────────────────────────────────────┘
Comparison: CORE only vs FLOW only vs Hybrid
┌───────────────────────────────────────────────────────────────┐
│ Gestalt Achievement by Coordinate Choice │
├───────────────────────────────────────────────────────────────┤
│ │
│ CORE only (OkLCH only): │
│ ───────────────────────── │
│ ✅ Common Fate Colors move in same direction │
│ ✅ Figure/Ground Color identity preserved (Red is Red) │
│ ❌ Continuity Abrupt jumps at Caustic curve boundary │
│ │
│ FLOW only (OkLab only): │
│ ────────────────────── │
│ ✅ Common Fate Same direction interpolation │
│ ❌ Figure/Ground All colors blend → identity lost │
│ ✅ Continuity Smooth gradient │
│ │
│ CORE + FLOW Hybrid (Zone-Based Einstein Arc): │
│ ──────────────────────────────────────────── │
│ ✅ Common Fate Overall same direction Arc │
│ ✅ Figure/Ground Identity preserved Outside Caustic │
│ ✅ Continuity Smooth transition Inside Caustic │
│ │
│ → All three Gestalt principles achieved! (Hybrid is optimal) │
│ │
└───────────────────────────────────────────────────────────────┘
Zone-Based Coordinates and Gestalt Mapping
| Zone | Coordinate | Gestalt Principle | Psychological Effect |
|---|---|---|---|
| Overall | - | Common Fate | ”Same direction = same group” |
| Outside Caustic | OkLCH (Polar) | Figure/Ground | ”Identity preserved = distinguishable” |
| Inside Caustic | OkLab (Cartesian) | Continuity | ”Smooth transition = natural” |
Integrated Theme System: Frame Drag + Einstein Arc
The Complete Pipeline
╔═══════════════════════════════════════════════════════════════════════════════╗
║ ║
║ CORE HUE (Theme Color = Mass Center): Blue 250 degrees ║
║ ║
╠═══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ Input: Arbitrary colors from terminal output ║
║ ───────────────────────────────────── ║
║ ║
║ ls: Red(0), Green(120), Blue(240) ║
║ vim: Purple(280), Orange(30), Yellow(60) ║
║ git: Red(0), Green(120) ║
║ ║
║ │ ║
║ ▼ ║
║ ║
║ STEP 1: Frame Drag Applied (Gestalt Similarity) ║
║ ════════════════════════════════════════════════ ║
║ ║
║ blend_hue(color_hue, 250, 0.15) ║
║ ║
║ Red(0) → Red+Blue(~340) "Blue-ish Red" ║
║ Green(120) → Green+Blue(~140) "Blue-ish Green" ║
║ Orange(30) → Orange+Blue(~60) "Blue-ish Orange" ║
║ ║
║ Gestalt Effect: All colors "Blue-ish" → Similarity grouping ║
║ Physics: Core's gravity drags all colors (Frame Dragging) ║
║ ║
║ │ ║
║ ▼ ║
║ ║
║ STEP 2: Einstein Arc Applied (Gestalt Common Fate) ║
║ ══════════════════════════════════════════════════════ ║
║ ║
║ Caustic Zone: 70 degrees center (near Blue's complement) ║
║ Caustic Width: +/-45 degrees (25 ~ 115 degrees) ║
║ ║
║ Result: ║
║ • Caustic region (Green zone): Compressed → less prominent ║
║ • Theme Zone (Blue zone): Expanded → theme emphasized ║
║ • All colors "move" toward Blue → Common Fate grouping ║
║ • Physics: Light bending around mass like Einstein Ring ║
║ ║
║ │ ║
║ ▼ ║
║ ║
║ Output: Lensed Colors (Colors fully integrated to theme) ║
║ ──────────────────────────────────────────────── ║
║ ║
║ • Frame Drag: "Same Blue tint" → Similarity ║
║ • Einstein Arc: "Same Blue direction" → Common Fate ║
║ • Combined: Dual Gestalt grouping → Lensed Colors ║
║ ║
║ │ ║
║ ▼ ║
║ ║
║ Result: Pragnanz (Perceived as orderly, regular, simple whole) ║
║ ──────────────────────────────────────────────────────────── ║
║ ║
║ "These definitely belong to the same theme" → Powerful integration ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
Function Role Summary (Gravity Lensing)
┌─────────────────────────────────────────────────────────────────┐
│ Role of Each Function in Theme Integration (Gravity Lensing) │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Frame Drag (Hue Dragging Operation): │
│ ───────────────────────────────────────────── │
│ │
│ 1. blend_hue(h, core_hue, strength) │
│ └─ Physics: Frame Dragging (spacetime dragging) │
│ └─ Effect: Hue dragged toward Core │
│ └─ Gestalt: Creates Similarity │
│ └─ Coordinate: OkLCH (Polar/CORE) │
│ │
│ 2. blend_hue(h, core_h, inherit_ratio) │
│ └─ Physics: Frame Dragging (proximity effect) │
│ └─ Effect: Proximity to Core Hue │
│ └─ Gestalt: Creates Proximity │
│ └─ Coordinate: OkLCH (Polar/CORE) │
│ │
│ ───────────────────────────────────────────────────────────── │
│ │
│ Einstein Arc (Hue Bending Operation): │
│ ──────────────────────────────────────────── │
│ │
│ 1. warp_hue_compress(h, core_hue, strength, width) │
│ └─ Physics: Einstein Arc (light bending) │
│ └─ Zone: Outside Caustic (Arc region) │
│ └─ Effect: Hue space redistribution │
│ └─ Gestalt: Common Fate + Figure/Ground │
│ └─ Coordinate: OkLCH (Polar/CORE) │
│ │
│ 2. fill_with_oklab_gradient(h, core_h, str, width, l, c) │
│ └─ Physics: Caustic (light ray convergence) │
│ └─ Zone: Inside Caustic (Caustic region) │
│ └─ Effect: Linear interpolation (smooth transition) │
│ └─ Gestalt: Common Fate + Continuity │
│ └─ Coordinate: OkLab (Cartesian/FLOW) │
│ │
└─────────────────────────────────────────────────────────────────┘
Final Summary: Gravity = Theme Integration
╔═══════════════════════════════════════════════════════════════════════════════╗
║ ║
║ GRAVITY (Frame Drag + Einstein Arc) = Theme Integration System ║
║ OUTPUT: Lensed Colors | RESULT: Pragnanz ║
║ ║
╠═══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ Layered Naming Structure: ║
║ ─────────────────── ║
║ ║
║ Level 1 (Coordinate): Core (OkLCH) | Flow (OkLab) ║
║ Level 2 (Physics): Gravity (gravitational lensing paradigm) ║
║ Level 3 (Operation): Frame Drag | Einstein Arc ║
║ (Hue dragging) | (Hue bending) ║
║ | ↓ ║
║ | Caustic curve (boundary) ║
║ | Caustic region (convergence) ║
║ OUTPUT: Lensed Colors (transformed colors) ║
║ RESULT: Pragnanz (orderly whole) ║
║ ║
║ ─────────────────────────────────────────────────────────────────────────── ║
║ ║
║ Gestalt Perspective: ║
║ ───────────── ║
║ ║
║ Frame Drag → Similarity → "Same tint = one group" ║
║ Einstein Arc → Common Fate → "Same direction = one group" ║
║ Combined → Dual grouping → Lensed Colors → Pragnanz ║
║ ║
║ ─────────────────────────────────────────────────────────────────────────── ║
║ ║
║ Technical Perspective: ║
║ ───────────── ║
║ ║
║ CSS Core/Flow (Static) → Runtime Gravity (Dynamic) ║
║ ──────────────────── ──────────────────────── ║
║ Predefined colors only → Arbitrary input colors ║
║ Build time → Runtime ║
║ oklch(), color-mix() → blend_hue(), warp_hue_compress(), ║
║ fill_with_oklab_gradient() ║
║ Result: CSS variables → Result: Lensed Colors → Pragnanz ║
║ ║
║ ─────────────────────────────────────────────────────────────────────────── ║
║ ║
║ Core/Flow Extension (Gravity Mapping): ║
║ ───────────────────────────────────── ║
║ ║
║ Core = Frame Drag + Einstein Arc Outside (OkLCH Polar) ║
║ • blend_hue() ← Frame Drag ║
║ • warp_hue_compress() ← Einstein Arc (Arc region) ║
║ ║
║ Flow = Einstein Arc Inside (OkLab Cartesian) ║
║ • fill_with_oklab_gradient() ← Caustic region ║
║ • mix_in_oklab() - general color blending ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════════╝
Complete Terminology Table
| Physics Term | Gestalt | Core/Flow | Function |
|---|---|---|---|
| Frame Drag | Similarity | CORE | blend_hue() |
| Einstein Arc | Common Fate | CORE + FLOW | warp_hue_compress() + fill_with_oklab_gradient() |
| Caustic curve | - | Boundary line | pull_width |
| Caustic region | Continuity | FLOW | fill_with_oklab_gradient() |
| Lensed Colors | - | OUTPUT | Transformed colors |
| Pragnanz | Perceptual result | RESULT | Orderly whole |
| Gravity | Dual grouping | Identity + Transition | Powerful theme integration |
“Colors frame-drag toward Core, arc around it, and converge at the Caustic into Lensed Colors achieving Pragnanz.”
Back to Gestalt Principles
Review the foundational Gestalt-to-physics mappings