Reduced-motion CSS
Movement should follow the reader’s preference. MotionHearth is a Windows AI coding workspace for examining CSS animation rules, reduced-motion states and the content that must remain available.
@keyframes mark-slide {
to { transform: translateX(12px); }
}
.motion-mark { animation: mark-slide 1.2s linear infinite; }
.status:focus-visible { outline: 2px solid currentColor; }
@media (prefers-reduced-motion: reduce) {
.motion-mark { animation: none; transform: none; }
}Project
Check both preference states and keyboard focus, preserving the status text when movement is disabled.
Review before applying
Compare actual behavior with the expected result. If a check fails, investigate it before applying more changes.
Connection
Base URL, credentials and a reachable server.
@keyframes mark-slide {
to { transform: translateX(12px); }
}
.motion-mark { animation: mark-slide 1.2s linear infinite; }
.status:focus-visible { outline: 2px solid currentColor; }
@media (prefers-reduced-motion: reduce) {
.motion-mark { animation: none; transform: none; }
}Treat motion preferences as part of an interface change
MotionHearth is a Windows coding workspace for developing interface changes with a connected AI model. Bring the project folder and describe what an interaction should communicate. The conversation can follow the component and its styles together, helping you review a proposed animation in the context of the status, focus or feedback it is supposed to convey.
One task suggested by motion.css is to review an animation when reduced motion is requested. Ask how the existing interface communicates the same information after movement stops, and whether keyboard focus remains apparent. Those questions turn the sample into an application change you can inspect. They also keep the request broader than simply deleting a keyframe while remaining small enough to check on the actual screen.
You can choose an unrestricted AI model if your supported OpenAI-compatible or Anthropic endpoint offers one. Add its connection details and required credentials, recognizing that capabilities and restrictions belong to the model and server. Review the resulting CSS and component edits before testing the interface with motion enabled and reduced. Use keyboard navigation as well as pointer input. The goal is a coherent behavior under both preferences, supported by what your application renders rather than by the assistant's description alone.
Checking motion and interaction together
What should a reduced-motion request specify?
Name the moving element, the information it conveys and the alternative behavior you expect. Include the relevant component and stylesheet. This lets the proposed change preserve useful feedback instead of removing motion without considering what users lose.
Can a stopped animation hide the current status?
It can if movement was the only indication. Inspect the remaining text, shape or state marker when animation is disabled. Ask for an alternative that fits your interface, then verify that it remains clear throughout the interaction.
Why test keyboard focus during a motion change?
Styles near an animated control may also affect its focus indicator. Navigate through the changed screen using the keyboard and confirm which element is active. Reviewing keyframes alone will not establish whether the full interaction remains understandable.
How much can the model verify from source files?
It can propose an interpretation of the code available within its context and tools. You still need to inspect the rendered states and run project checks. Treat missing screens, styles or runtime conditions as limits on the review.
MotionHearth · Updated 2026-10-25