Vib3 Design

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)

1. 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.

2. 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).

3. 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

1. Design — Plan mappings and timeline for your platform
2. Analyze — Is 4D rotation visible? Do events feel distinct? Is audio reactivity noticeable?
3. 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

3. Select Geometry

Encoding: index = core_type × 8 + base_geometry

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

4. Set 6D Rotation

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

5. Tune Parameters

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

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

Design Principles

1. 4D rotations (XW/YW/ZW) create effects impossible in 3D — use liberally
2. gridDensity controls perceived distance — 60-100=intricate/far, 4-10=bold/close
3. dimension is the 4D lens — 3.0=dramatic fish-eye, 4.5=flat
4. Chaos + speed create life — even calm designs benefit from chaos 0.02, speed 0.3
5. 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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.