Cognitive Signal — State-Driven Motion System
Cognitive Signal is a personal motion study exploring how a compact UI component can communicate changing system states through motion, feedback and interaction.
Built in Cavalry within a self-imposed one-week production window. With more time, the visual design and UI language could naturally be pushed further, but the constraint helped keep the focus on the core idea: building a signal-driven component with reusable behaviours and clear motion logic.
The project also became a practical way to learn Cavalry by building something real — testing its strengths, limitations, production potential, and how my existing After Effects knowledge could transfer into a more procedural and system-driven workflow.
The main animation introduces the component as a state-driven signal display. A single value moves through different ranges, updating progress, colour, label, glow and feedback as the system changes state.
State System
The component is built around three core states: Fragmented, Drifting, and Optimal.
Each state is driven by the same underlying signal value, but expressed through different combinations of colour, progress, label and atmosphere. Fragmented suggests instability, Drifting sits in transition, and Optimal represents a more resolved signal.
The goal was to keep each state immediately readable while maintaining a restrained visual language. The system needed to communicate clearly without becoming noisy or over-designed.
Feedback & Interaction
Motion is used both as system feedback and as user interaction. The feedback moments give emphasis to key states without turning the component into an alert-heavy interface. Fragmented introduces a subtle sense of tension, while Optimal creates a sense of stability as the signal reaches its strongest state.
The expanded interaction uses progressive disclosure to reveal secondary information only when needed. This allows the component to move between a compact signal view and a more contextual expanded view without losing its core identity.
Process & Insights
A central signal value drives connected behaviours across the component, including the displayed number, progress bar, colour state, label, glow, stroke and feedback.
Some parts of the system are controlled through reusable relationships, while others are shaped manually where timing, hierarchy and feel matter more.
This hybrid approach helped keep the prototype flexible without making it overly procedural. It also gave me a useful way to explore how Cavalry could support fast iteration, reusable behaviours and UI motion systems in a production context.
Signal value, colour mapping and dependency graph setup showing how value, progress, colour and feedback behaviours are connected across the component.