The Moodboard: Spatial Curation & Production Vision
The transition from individual story beats to a cohesive visual direction requires a space for holistic curation. The Moodboard Architect is a high-performance, non-linear workspace within the Export Suite. It enables directors and designers to arrange, scale, and rotate assets independently of the sequential timeline to establish a unified visual direction for a project.
The module architecture utilizes WebGL spatial state management, batch asset processing, and cross-domain data synchronization.
Technical Architecture: The Spatial Engine
The Moodboard functions as a dynamic PIXI.js-powered stage where every image is treated as a stateful entity rather than a static element.
- High-Performance Spatial Workspace: Utilizing a WebGL core, the Moodboard manages multiple high-resolution textures while maintaining consistent frame rates. It employs Zustand for real-time state tracking, ensuring that all spatial coordinates, scales, and rotation values are persisted instantly.
- Keyboard-Driven Precision: To optimize workflow speed, the system includes a robust Shortcut Logic framework. This allows for fluid, keyboard-driven scaling and rotation commands. A Persistent HUD (Heads-Up Display) within the viewport provides a real-time reference guide for available shortcuts to assist with user navigation.
- Dynamic Asset Loading: The Moodboard communicates directly with the Tauri-backed local file system and the project’s SQLite database. This architecture facilitates the instantaneous retrieval of project shots without duplicating memory-intensive image data.
Key Feature Breakdown
The Moodboard functions as the bridge between creative research and project delivery:
| Tool | Technical Implementation | Production Purpose |
|---|---|---|
| Batch-Selection Onboarding | Logic for multi-selection from internal image galleries. | Rapidly populates the canvas with key project beats for iteration. |
| External Asset Bridge | A hook for importing local files directly to the canvas. | Integrates external concept art or lighting references into the storyboard vision. |
| Unified Composition | A global canvas that exports as a dedicated production asset. | Provides a single view of the project’s aesthetic direction for stakeholders. |
| Viewport HUD | A dynamic UI layer overlaying shortcut metadata. | Ensures technical controls are accessible without obstructing the creative workspace. |
Performance and Optimization
Managing a freeform layout requires precise synchronization between the UI and the data layer:
- State Persistence and Sync: Every transform applied to a Moodboard item is stored within the
moodboardSlice. This ensures that the precise composition is perfectly preserved across application sessions. - Optimized Batch Rendering: When retrieving multiple shots from the gallery, the system utilizes an asset loader hook to prevent UI blocking. Viewport visibility is prioritized, loading high-resolution textures only as they become necessary on the canvas.
- Export Integration: The Moodboard is fully integrated into the Interactive Export Service. During website generation, the Moodboard state is compiled into its own section, transforming internal visual research into a polished, client-facing presentation.
Core Architectural Benefits
The Moodboard Architect facilitates the transformation of raw story ideas into a unified creative direction. By providing an environment where external references coexist with internal storyboard shots, the system allows for the refinement of the look, feel, and rhythm of a project early in the production cycle.
- Non-Linear Ideation: The system removes the constraints of the traditional storyboard grid, allowing for freeform visual thinking and high-level composition.
- Technical Rigor: The WebGL and SQL foundation ensures that creative exploration is supported by desktop-class performance and data integrity.
- Client-Ready Deliverables: Visual research is transitioned from internal folders into a structured, professional export format that improves communication with stakeholders.
- Seamless Asset Integration: Bridging the gap between generated AI content and external reference libraries creates a versatile and comprehensive production environment.