| name | vib3-design |
| description | VIB3+ visualization design and navigation. Use when creating 4D visualizations, designing presets, choreographing animations, configuring audio-reactive visuals, or answering "how do I make it look like X" questions. Integrates with VIB3+ MCP server for real-time control. Use when this capability is needed. |
| metadata | {"author":"domusgpt"} |
VIB3+ Design & Navigation
Help users create, choreograph, and export 4D visualizations.
Gold Standard v3 — Creative Foundation
Before designing, absorb the creative vocabulary in examples/dogfood/GOLD_STANDARD.md — motion vocabulary (14 motions), coordination grammar (7 patterns), composition framework, and 3-mode parameter model — and study the flagship reference at examples/codex/synesthesia/.
Three Parameter Modes (Every Design Must Have All Three)
-
Continuous Mapping — Parameters respond to input state every frame (audio→density, touch→rotation, tilt→dimension). Use EMA smoothing: alpha = 1 - Math.exp(-dt / tau). Reference tau: speed 0.08s, chaos 0.12s, density 0.15s, hue 0.25s.
-
Event Choreography — Discrete events trigger Attack/Sustain/Release envelopes. Tap = chaos burst. System switch = crossfade. Beat detection = intensity flash. Design timing asymmetry (approach faster than retreat).
-
Ambient Drift — Parameters breathe without input. Heartbeat: morph + intensity sine waves. Use prime-number periods (7s, 11s, 13s) to prevent mechanical feel.
Design-Analyze-Enhance Loop
- Design — Plan mappings and timeline for your platform
- Analyze — Is 4D rotation visible? Do events feel distinct? Is audio reactivity noticeable?
- Enhance — Layer the three modes. Find emergent combinations
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 | 2 sphere | 3 torus | 4 klein | 5 fractal | 6 wave | 7 crystal |
|---|
| 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 visualcapture_screenshot → 5-layer composite PNG for multimodal analysis
MCP Tool Workflows
Natural Language Design
design_from_description("serene ocean deep organic")
describe_visual_state() // verify
batch_set_parameters({...adjustments...}) // refine
Atomic Parameter Update
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
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
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
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 documentationDOCS/MULTIVIZ_CHOREOGRAPHY_PATTERNS.md — Choreography composition patternssrc/agent/mcp/tools.js — All MCP tool definitions with JSON schemassrc/creative/AestheticMapper.js — 130+ NLP aesthetic keywordssrc/creative/ColorPresetsSystem.js — 22 color preset definitionssrc/creative/PostProcessingPipeline.js — 14 effects, 7 preset chains
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
