Interface Lab
Login
Back to knowledge
Frontend Implementation

Copy-in Motion Component Localization and Accessibility

After copying an external motion component, Lottie/Rive player, Motion/GSAP example, or registry block, localize copy, states, direction, duration, reduced motion, pause/stop/hide behavior, keyboard paths, and license source.

copy-inmotionlocalizationaccessibility

Design Principle

Once a motion component is copied into the repository, it is no longer a demo fragment. It becomes a local interaction asset that must satisfy brand voice, language direction, accessible fallbacks, performance budget, and source licensing.

Large Theory

Copy-in motion libraries can quickly create expressive interfaces, but demo components usually assume English copy, ideal data, decorative motion, and one visual theme. Agents should not paste Magic UI, Motion-Primitives, Animate UI, Lottie, Rive, or GSAP examples and only recolor them. They need to turn motion purpose, copy, states, accessibility, and licensing into a local contract.

Small Points

  1. Identify the motion role first: feedback, continuity, guidance, state change, brand atmosphere, or celebration. Do not animate every element.
  2. Localization is more than translation; it includes zh/en length, number/date format, RTL direction, button labels, empty/error/loading/complete states, and tone.
  3. prefers-reduced-motion or Motion's useReducedMotion should replace large movement, scale, parallax, and autoplay with opacity or immediate state changes where possible.
  4. Autoplaying loops, blinking, tickers, marquees, carousels, and background videos need pause/stop/hide or short-stop behavior instead of competing with core content.
  5. Keyboard paths, focus-visible, aria-live, aria-busy, alt/poster, static fallback, and screen-reader names should be accepted with the component.
  6. When copying a component, record source URL, license, commit/version, dependencies, imported files, removed demo assets, and local modifications.

Design Judgment

A component can enter the library when users still understand state and complete the task with animation disabled, and when enabled motion clarifies change or brand tone. If motion carries the only information, blocks keyboard operation, cannot be paused, or only works as an English demo, localization is incomplete.

Implementation Notes

Create a motion intake checklist: source, license, component role, localized copy, state matrix, duration/easing, reducedMotion behavior, pause/stop/hide control, keyboard path, ARIA/live-region, asset fallback, dependency diff, performance notes, and QA screenshots. In React/Motion projects, prefer MotionConfig reducedMotion="user" or useReducedMotion for global or local fallbacks. In Tailwind, use motion-safe and motion-reduce. For Lottie/Rive, keep a static poster and textual state.

Counterexamples/Risks

Dropping an English empty-state Lottie into a Chinese admin app, running a partner-logo marquee forever with no pause, showing loading only as a spinner with no text, copying a Motion example but missing dependency or license notes, changing content order when animation is disabled, and moving in the wrong direction under RTL.

Case Study

Magic UI describes itself as a copy-paste library of animated components and effects under MIT. Motion-Primitives provides Motion and Tailwind based motion components and warns that the project is in beta. Animate UI distributes animated React, Tailwind, Motion, and Shadcn CLI components. Motion accessibility guidance recommends respecting Reduced Motion by replacing large transforms with opacity and disabling autoplay video or parallax. WCAG 2.2.2 requires automatically moving, blinking, scrolling, or updating parallel content to be pausable, stoppable, or hideable. The reusable lesson is that copy-in speed must be paid back with localization, fallbacks, and controls.

Source Links

Magic UI: https://github.com/magicuidesign/magicui Motion-Primitives: https://github.com/ibelick/motion-primitives Animate UI: https://github.com/imskyleen/animate-ui Motion useReducedMotion: https://motion.dev/docs/react-use-reduced-motion Motion accessibility: https://motion.dev/docs/react-accessibility WCAG Pause, Stop, Hide: https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html WCAG Animation from Interactions: https://www.w3.org/TR/WCAG22/#animation-from-interactions

Agent Directive

Before copying a motion component, record source license and motion role; on intake, localize copy, states, reduced motion, pause/stop/hide, keyboard path, and static fallback instead of only copying the demo effect.