Connect with your favorite tools
MotionX integrates with the ecosystem you already use.
Features
- Dynamic Grid: Automatically populates from an array of integrations.
- Theme Aware: Works seamlessly in both light and dark modes.
- Original Logos: Supports custom React components for high-quality SVG logos.
- Animated Tiles: Smooth entrance and hover animations using Framer Motion.
- Magnetic CTA: Interactive call-to-action button that follows the cursor.
- Responsive: Adapts to different screen sizes with configurable columns and rows.
Installation
Props
Integration
| Prop | Type | Description |
|---|---|---|
name | string | Display name shown in tooltip. |
color | string | Background color of the tile (hex, rgb, etc.). |
textColor | string | Foreground / icon text color. |
icon | string | ReactNode | Short label or React Icon component. |
IntegrationsGrid
| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | See source | Main heading text. |
subheading | ReactNode | See source | Description text. |
ctaLabel | string | "Discover integrations" | CTA link label. |
ctaHref | string | "#" | CTA link href. |
integrations | Integration[] | DEFAULT_INTEGRATIONS | Array of integration objects. |
columns | number | 9 | Number of grid columns. |
rows | number | 5 | Number of visible grid rows. |
className | string | - | Optional container class name. |