Sosai needs a set of motion pieces that replace generic loading spinners with visuals that actually explain what the product is doing while a user waits. The same visual language will carry over to the marketing page, turning waiting moments into a demonstration of the product's intelligence rather than a delay. The result should feel calm, clear and quietly confident, in keeping with a tool built for people who think carefully about design.
Overview & Goals
- Replace generic spinners with motion that visibly represents each real waiting step: crawling a site, reading colours, writing a brief.
- Reuse the same visual language across in-app loading states and marketing page loops for a consistent brand experience.
- Keep every loop calm and legible so the product feels considered, never impatient or gimmicky.
- Prepare the system to scale, documenting how a future seventh state would be built.
Budget & Timeline
Motion work runs alongside the interface build, with both landing together for the December release.
Video delivery
- Logo files
- Vector file (SVG, AI, EPS or PDF)
- Type
- Motion graphics
- Length & cut-downs
- Six loops between three and eight seconds, seamless, plus two longer sequences of about twenty seconds for the marketing page.
- Formats
- 16:9, 1:1
- Treatment
- Motion graphics
- Script
- Rough idea only
- Footage
- No footage, animation only
- Voice & subtitles
- No voice-over and no subtitles. These are silent by design.
- Music
- No music
- Handover
- Final files and project files
- Where it plays
- Website, LinkedIn
Target Audience
The animations speak to two connected audiences experiencing the same visual idea at different moments: one glancing briefly while a task completes inside the product, the other watching longer sequences to understand what the product does before signing up.
Logo & Style
Logo to use
Files available: Vector file (SVG, AI, EPS or PDF)
Typography
Keep the current type
- NewsreaderHeadlines · Google Fonts, free to use
- DM SansBody text · Google Fonts, free to use
Colour
Colors to use
Measured on the material that was sent.
References & Moodboard
1 source captured. Click any of them to see it full size.
In the client's own words
The product has moments where something is happening and the person is waiting: the site is being crawled, the colours are being read, the brief is being written. Right now these are spinners. They are the moments where the work is most visible and we are showing nothing. We want a small set of motion pieces for those states, and the same visual language for the loops on the marketing page. Not decoration, they should show what is actually happening.
Scope & Deliverables
- Short seamless loops for in-app waiting states, one per current product step
- Two extended sequences adapted for the marketing page
- Delivery in Lottie and optimised video formats for lightweight in-app loading
- Final and editable source files, with a written note on building future states
Do's & Don'ts
Do
- Deliver every loop lightweight enough to load instantly inside the app
- Make each animation clearly represent the step it belongs to, so waiting teaches something
- Keep the pace measured and the palette consistent with the current brand system
Don't
- Do not fall back on a generic spinner recoloured in brand tones
- Do not let motion feel rushed or overly energetic
- Do not introduce voice, subtitles or music, the loops are silent by design