Skip to content

refactor: use static motion elements and remove motionComponent prop#905

Open
Yeom-JinHo wants to merge 6 commits intomagicuidesign:mainfrom
Yeom-JinHo:refactor/static-components
Open

refactor: use static motion elements and remove motionComponent prop#905
Yeom-JinHo wants to merge 6 commits intomagicuidesign:mainfrom
Yeom-JinHo:refactor/static-components

Conversation

@Yeom-JinHo
Copy link
Collaborator

resolve #884

Description

This PR focuses on fixing react-hooks/static-components compatibility across text-related Magic UI components by removing render-time dynamic motion component creation.

Because stability and cross-project lint compatibility are the priority, this includes breaking API changes to keep behavior predictable and type-safe.

Changes

  • Static Motion Components (major fix): Replaced motion.create(...) in render paths with static motionElements maps in:
    • TextAnimate
    • HyperText
    • LineShadowText
    • TypingAnimation
    • Terminal’s TypingAnimation
  • as Typing (breaking change): Narrowed as from broad ElementType to a supported tag union (article | div | h1 | ... | span) for consistency and safer refs/types.
  • Type Safety:
    • Updated relevant props to Omit<MotionProps, "children"> where needed.
    • Fixed ref typing in HyperText and TypingAnimation paths.
  • TypingAnimation Behavior: Added state reset when source text input changes to avoid stale animation state.
  • Docs + Registry Sync: Updated MDX docs and regenerated public/r/*.json + llms-full.txt to reflect API changes.

Motivation

  • Ensure components are compatible with stricter React Hooks lint environments (static-components rule).
  • Remove runtime component-creation risks and improve rendering stability.
  • Standardize polymorphic behavior across components with a predictable, maintainable API surface.
  • Keep generated registry/docs in sync so downstream consumers get accurate types and usage guidance.

Breaking Changes

  • Narrowed as type to a fixed supported tag union in updated components.
    -> Passing arbitrary/custom component types is no longer supported via as.
  • TypingAnimation now renders with an outer wrapper element for in-view tracking.
    -> Projects relying on exact DOM structure/selectors may need minor CSS adjustments.

@Yeom-JinHo Yeom-JinHo self-assigned this Mar 2, 2026
@vercel
Copy link

vercel bot commented Mar 2, 2026

@Yeom-JinHo is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

TextAnimate : motion.create triggers react-hooks/static-components ESLint error

1 participant