Component Contract

What every generated animation component guarantees.

Structure

• Single standalone TSX file
• Default export, named function ending in “Loader”
• Fully typed with TypeScript (no any)
• Under 100 lines

Dependencies

• Imports only from react and motion/react
• Tailwind utility classes for layout
• Inline styles only for dynamic values from props
• No external assets, fonts, or images

Props

Every component accepts these optional props with sensible defaults:

• className?: string merged into the root element
• color?: string primary animation color
• size?: number base size in pixels or multiplier
• speed?: number duration multiplier (1 = default)

Accessibility

• role="status" on the root container
• aria-label describing the loading state
• Respects prefers-reduced-motion

Security

No fetch, eval, localStorage, dangerouslySetInnerHTML, or external URLs. Components are pure presentation.