VIB3+ Design & Navigation

Help users create, choreograph, and export 4D visualizations.

Workflow

1. Detect Mode

•Live Mode: MCP server connected — use tool calls directly
•Artifact Mode: No MCP — generate JSON configs or JS snippets to apply manually

2. Choose System

System	Character	Best For
`quantum`	Complex lattice, procedural math	Intricate, alien, mathematical
`faceted`	Clean 2D geometry from 4D	Precise, geometric, minimalist
`holographic`	5-layer glassmorphic depth	Rich, layered, ethereal

3. Select Geometry

Encoding: index = core_type × 8 + base_geometry

Base (0-7)	0 tetra	1 hypercube
Base	0-7	Pure geometry, no warp
Hypersphere	8-15	S³ projection, Hopf fibration (flowing, organic)
Hypertetra	16-23	5-cell pentatope warp (angular, crystalline)

Examples: 11 = hypersphere+torus, 21 = hypertetra+fractal, 1 = tesseract

4. Set 6D Rotation

Plane	Type	Visual Effect
XY	3D	Spin around Z axis
XZ	3D	Tumble around Y axis
YZ	3D	Roll around X axis
XW	4D	Inside-out hyperspace morph
YW	4D	Vertical hyperspace shift
ZW	4D	Depth-plane hyperspace warp

Order (critical): XY → XZ → YZ → XW → YW → ZW

5. Tune Parameters

Parameter	Range	Effect
hue	0-360	Color hue (HSL)
saturation	0-1	Color saturation
intensity	0-1	Brightness
speed	0.1-3	Animation speed
chaos	0-1	Randomness/turbulence
gridDensity	4-100	Pattern density (high=intricate, low=bold)
morphFactor	0-2	Shape interpolation
dimension	3.0-4.5	4D projection distance (low=dramatic, high=flat)

6. Apply Color & Post-Processing

22 Presets: Ocean, Lava, Neon, Monochrome, Sunset, Aurora, Cyberpunk, Forest, Desert, Galaxy, Ice, Fire, Toxic, Royal, Pastel, Retro, Midnight, Tropical, Ethereal, Volcanic, Holographic, Vaporwave

14 Effects: bloom, chromaticAberration, vignette, filmGrain, scanlines, pixelate, blur, sharpen, colorGrade, noise, distort, glitch, rgbShift, feedback

7. Verify & Iterate

•describe_visual_state → text description of current visual
•capture_screenshot → 5-layer composite PNG for multimodal analysis

MCP Tool Workflows

Natural Language Design

code

design_from_description("serene ocean deep organic")
describe_visual_state()  // verify
batch_set_parameters({...adjustments...})  // refine

Atomic Parameter Update

code

batch_set_parameters({
    system: "quantum", geometry: 11,
    rotation: { XW: 0.8, YW: 0.5, ZW: 1.2 },
    visual: { hue: 200, saturation: 0.9, speed: 0.5, chaos: 0.1 }
})

Timeline Animation

code

create_timeline({
    tracks: [
      { parameter: "rot4dXW", keyframes: [
        { time: 0, value: 0, easing: "easeInOut" },
        { time: 5000, value: 6.28, easing: "linear" }
      ]}
    ], bpm: 120
})
control_timeline({ action: "play" })

Multi-Scene Choreography

code

create_choreography({
    name: "my-set", scenes: [
        { start: 0, duration: 15000, system: "quantum", geometry: 2, preset: "Ocean" },
        { start: 15000, duration: 20000, system: "faceted", geometry: 11, preset: "Neon" },
        { start: 35000, duration: 25000, system: "holographic", geometry: 21, preset: "Cyberpunk" }
    ]
})

Audio-Reactive

code

configure_audio_band({ band: "bass", target: "morphFactor", weight: 0.8, mode: "add" })
configure_audio_band({ band: "mid", target: "rot4dXW", weight: 0.5, mode: "add" })
configure_audio_band({ band: "high", target: "gridDensity", weight: 0.3, mode: "multiply" })

Quick Response Guide

User Says	Action
"Make it more [adjective]"	`design_from_description` or map adjective to params
"Animate between X and Y"	`play_transition` with easing and duration
"Create a sequence"	`create_choreography`
"React to music"	`configure_audio_band`
"Save/export this"	`save_to_gallery` or `export_package`
"Show geometry N"	`change_geometry(N)` — N/8=core, N%8=base
"Rotate in 4D"	`set_rotation` with XW/YW/ZW planes

Design Principles

•4D rotations (XW/YW/ZW) create effects impossible in 3D — use liberally
•gridDensity controls perceived distance — 60-100=intricate/far, 4-10=bold/close
•dimension is the 4D lens — 3.0=dramatic fish-eye, 4.5=flat
•Chaos + speed create life — even calm designs benefit from chaos 0.02, speed 0.3
•Batch is better — always use batch_set_parameters to prevent flicker

References

For deep dives, read these codebase files:

•CLAUDE.md — Full technical reference (architecture, uniforms, C++ core, projections)
•DOCS/CONTROL_REFERENCE.md — Complete parameter documentation
•DOCS/MULTIVIZ_CHOREOGRAPHY_PATTERNS.md — Choreography composition patterns
•src/agent/mcp/tools.js — All MCP tool definitions with JSON schemas
•src/creative/AestheticMapper.js — 130+ NLP aesthetic keywords
•src/creative/ColorPresetsSystem.js — 22 color preset definitions
•src/creative/PostProcessingPipeline.js — 14 effects, 7 preset chains