Motiif
To me, motion is part of the design and should be included at the same stage as visual design, or earlier during UX and wireframing. It informs how an app looks, feels, and works just as much as color or typography, and is an important part of product voice and branding. Design theme previewers and generators are not hard to find. Motion previewers are more rare. A tool that combines both and is easy to update and expand simply doesn't exist, at least not that I've found. So I built it myself.
Fleet Ops
FleetOps is an AV delivery vehicle tracking system. It live tracks vehicles in the fleet and displays current routes, progress, and systems monitoring. It is also set up to provide alerts for incidents in the AV systems, traffic, and any other events that affect the fleet. The FleetOps demo is a POC that stress tests Motiif and shows that rapid design and motion iteration in a real product environment is possible when set up correctly.
Design themes
Motiif is meant to be expanded. It is compatible with most CSS design theme systems and is set up to inject new themes quickly and easily. Three design themes are included as starting points:
Graphite: A balanced theme, useful for most apps and a great starting point.
Guchi: A more refined theme that uses earth tones, light borders, and generous spacing to create a premium app feel.
Tactical: A more specific style targeted at gaming, dense UI, and systems operations.
The next version of Motiif will have a one-click CSS theme import feature, making it even easier to test and demo your designs.
Motion themes
An app without good UX motion design feels incomplete, cheap, and flat. Abrupt transitions cause change blindness, unusual patterns are disorienting, and overdone motion feels overwhelming. Including motion in the design and planning stages reveals opportunities where it can guide user attention, clarify flows, and inform UX decisions. Motiif makes it easy to rapidly switch between motion themes in a live environment, far more useful than a video or static demo.
Five motion themes are included as starting points:
Standard: Balanced Y transitions and simple fade ups, safe for any product.
Dense: Fast durations and micro Y movements, 2-4px, built for data-heavy UI.
Expressive: Overshoots, bounces, and scales, best for consumer and lighter products.
Relaxed: Shared axis X movement, calm and orienting, good for most apps.
Reduced: Minimal fades only, for sensitive users.
The next version of Motiif will include one-click motion theme import.
Outcome
Motiif started as a gap I couldn't find a solution for, so I built one. It proves that design and motion can be prototyped and tested together quickly and scaled across entire systems. Motion shouldn't be an afterthought. Motiif proves it doesn't have to be.
