Accessibility and diagnostics
Motion is not free for everyone who sees it. For some people a page that slides, parallaxes and springs is nausea, not delight - which is why browsers ship prefers-reduced-motion. Bmotion honours it, but not by throwing every animation away: opacity and colour keep animating while transforms, layout and dimension changes snap. That is the difference between a page that stops moving and a page that stops working.
Reduced motion, four ways
Pick the policy once, at registration. User is the recommended setting and the
web-platform default: follow the operating system everywhere. The default is
IgnoreUnlessConfigured, which only consults the OS inside a
<BmotionConfig> - a back-compatible choice, so an app that never opted in
can never have its animations silently switched off underneath it.
| BmReducedMotionMode | Behaviour |
|---|---|
IgnoreUnlessConfigured |
The default, for back-compatibility. The OS preference is respected only inside a <BmotionConfig>. |
User |
Recommended. Respect the OS preference everywhere - the web-platform default. |
Always |
Always reduce, whatever the OS says. Useful for a per-app 'reduce motion' setting. |
Never |
Never reduce. For surfaces where the motion carries the meaning. |
What "reduced" actually does
Both boxes below animate x, rotate and
backgroundColor. The right one sits inside
<BmotionConfig ReduceMotion="true">: its position and rotation jump
straight to the target while its colour still crossfades. Nothing is lost - the state change
is still legible, it just does not travel across the screen.
Slowing everything down
TransitionSpeed is a playback multiplier over a whole subtree, and it scales
every time-based field - duration, delay, repeat delay, a spring's visual duration - so the
animation stays in proportion rather than having its delays left behind. It is how you
review timing at quarter speed without editing a single transition, and
TransitionSpeed="0" is how you check what a page looks like with no motion at
all.
Keyboard-accessible taps
WhileTap is not a mouse-only state. When a tappable element has focus,
Enter and Space press and release it exactly like a pointer -
WhileTap plays and OnTap fires, and losing focus mid-press cancels
it the way dragging off the element does. Give the element tabindex="0" if it
is not natively focusable. Tab to the box below and press
Space.
Knowing what the runtime can do
Rather than guessing which render mode you are in, inject BmotionCapabilities. On Blazor Server there is no synchronous interop, so the per-frame loop cannot run: drag, inertia, colour interpolation, keyframe arrays and motion values collapse to instant state changes, while compositor-eligible animations still play normally. Detect it and offer a different affordance instead of shipping a control that silently does not move.
Watching the engine
OnUpdate hands you the exact CSS the engine flushed to an element this
frame. It is a plain delegate rather than an EventCallback on purpose: it runs
inside the render loop, so it must not trigger a re-render per frame - read it, and update
the DOM yourself or throttle to state.
For everything at once there is <BmotionInspector />: drop it anywhere in a development build and it lists every element registered with the engine, its active drivers and its live values. It is the answer to "is this element animating, and what does the engine think its transform is?" - a question that is otherwise very hard to ask from the outside.