Context
Explores the loading and listening states for a Siemens search experience — the moment between a query and its results, and the voice-input affordance. The goal is to settle the motion language (timing, colour, the combined state) before any of it is built into the styleguide.
Approach
A single self-contained code/loaders.html renders three loaders against the dark search-bar canvas from the source video: a progress spinner, a voice-listening pulse, and a combined state. code/search-animation.html is a fuller motion study. Reference stills live in research/hires/ and research/zoom/; the source capture (research/loading-animations.mov) and its extracted research/frames/ are kept locally only (gitignored) because of size.
Findings
- The combined loader reads clearly at the search-bar's own scale using the mint accent.
- Voice and progress states need distinct motion, not just distinct colour, to be told
apart at a glance.