Text Motion
Use word splitting for short editorial headings, character splitting only for very short display text, and scramble only as a brief accent. Body copy should remain stable and immediately readable.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Text Motion · motion explains one relationship
Purpose
Use word splitting for short editorial headings, character splitting only for very short display text, and scramble only as a brief accent. Body copy should remain stable and immediately readable.
Text motion must preserve final text, source order, selection and screen-reader output. Avoid replacing characters with random glyphs in the accessible tree, animating every line on a page, or changing a label while a user is trying to read it.
Reduced motion shows the final phrase directly. Prefer a small opacity/translate reveal when the typography itself does not need to be segmented.
Source: packages/skills/patterns/text-motion.md