Begin with keyboard operation
Tab to the button and use Space or Enter to press and release it. Compare the states with pointer input.
The text-scramble preview can also be focused and activated with Enter or Space. Each effect has its own rules; touch input should not depend on the presence of a hover pointer.
Keep states understandable with reduced motion
The previews respond to prefers-reduced-motion. The button can move directly to its state, and text scrambling preserves the original text.
Enable the system preference and operate the control again. Check readability, state and usability, rather than only checking that animation disappeared.
Check how interactions end
A press can end through release, pointer cancellation, loss of focus or a window change. Confirm that it does not remain visually held.
Repeat input quickly and observe how motion turns toward the next target. After export, test component teardown, navigation and loading content in your own app.
Separate playback from saved parameters
Play, pause and reset help inspect a process and compare from the same configuration. Observation speed is not saved as animation timing.
Export JSON to keep changes, or use offline HTML and a standalone project to check another environment.
Repeat the checks in the real project
Use actual content
Test long text, images, wrapping and touch targets at a narrow width.
Follow the focus
Complete the interaction with a keyboard and test the relevant pointer or touch devices.
Check both motion preferences
Keep an understandable end state with and without reduced motion.