motion_x_ui 2.0.2

The ultimate Flutter Premium Design System + Motion Framework. 200+ components, 10 presets, border beam, aurora, glass, 3D tilt, magnetic effects, and premium loaders — all with zero boilerplate.

MotionX UI 🚀✨

The Ultimate Flutter Premium Design System & Motion Framework
200+ Production-Ready Components, 10 Design Presets, Animated Glowing Aurora Borders, Border Beams, Glassmorphism, 3D Perspective Tilts, Magnetic Micro-Interactions, and Premium Loaders — with Zero Boilerplate.

---

🌟 What's New in v2.0.1 (Aurora Light & Motion Updates)

• 🌈 MotionAuroraBorder: Premium multi-color glowing Aurora light border with sweeping aura effects & custom gradient rotation.
• ⚡ Border Beam Engine: Smooth 60/120 FPS rotating border light sweep for cards and interactive containers.
• 🎨 10 Unified Design System Presets: Apple, Material3, Cyberpunk, Luxury, Glass, Minimal, Neo, Gaming, Retro, and Future.
• 🪟 Real Backdrop Blur Glassmorphism: High-performance frosted glass with dynamic opacity and tint reflection.
• 🧲 Magnetic & 3D Tilt Mechanics: Interactive cursor and touch tracking with spring physics curves.

---

📦 Installation

Add motion_x_ui to your pubspec.yaml:

dependencies:
  motion_x_ui: ^2.0.1

Or run:

flutter pub add motion_x_ui

---

💡 Highlights & Usage Examples

1. 🌈 MotionAuroraBorder (Aurora Color Light Border Effect)

Wrap any widget to give it a stunning, animated glowing Aurora border light beam with multi-color radial aura:

MotionAuroraBorder(
  borderRadius: 20.0,
  borderWidth: 3.0,
  glowBlur: 14.0,
  enableOuterGlow: true,
  colors: const [
    Color(0xFF00F2FE), // Cyan
    Color(0xFF4FACFE), // Blue
    Color(0xFF00FF87), // Emerald
    Color(0xFF7F00FF), // Violet
    Color(0xFFFF007F), // Pink
  ],
  child: Container(
    padding: const EdgeInsets.all(24),
    decoration: BoxDecoration(
      color: const Color(0xFF0F172A),
      borderRadius: BorderRadius.circular(20),
    ),
    child: const Text(
      'Aurora Glowing Card',
      style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold),
    ),
  ),
)

---

2. ⚡ MotionBorderBeam (Aceternity UI Rotating Light Beam)

An animated rotating gradient border beam that sweeps around the border smoothly:

MotionBorderBeam(
  borderRadius: 16.0,
  borderWidth: 2.0,
  duration: const Duration(seconds: 3),
  child: MotionCard(
    preset: MotionPreset.cyberpunk,
    child: const Text('Border Beam Card'),
  ),
)

---

3. 🎯 MotionButton (3D Press, Glass, Haptics & State Animations)

// Standard Preset Motion Button
MotionButton(
  text: 'Explore Universe',
  preset: MotionPreset.apple,
  icon: Icons.rocket_launch,
  onPressed: () async {
    await Future.delayed(const Duration(seconds: 2));
  },
);

// Frosted Glass Variant
MotionButton.glass(
  text: 'Glass Button',
  onPressed: () {},
);

// Aurora Rotating Border Light Button
MotionButton.aurora(
  text: 'Aurora Glowing Button',
  icon: Icons.auto_awesome,
  onPressed: () {},
);

---

4. 🪟 MotionGlass (Frosted Glass Container)

MotionGlass(
  blur: 25.0,
  borderRadius: 20.0,
  opacity: 0.15,
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: const Text('Real Backdrop Blur Glass Effect'),
  ),
)

---

5. 🔑 MotionOTP & MotionTextField

// Animated OTP Input
MotionOTP(
  length: 6,
  preset: MotionPreset.cyberpunk,
  onCompleted: (code) {
    print('Verified OTP: $code');
  },
);

// Glowing Motion Text Field
MotionTextField(
  labelText: 'Email Address',
  preset: MotionPreset.glass,
  prefixIcon: Icon(Icons.email_outlined),
);

---

6. 🧲 MotionMagnetic & 3D Tilt

MotionTilt3D(
  maxAngle: 0.1,
  child: MotionMagnetic(
    strength: 0.4,
    child: MotionCard(
      preset: MotionPreset.luxury,
      child: const Text('3D Magnetic Interactive Card'),
    ),
  ),
)

---

🎨 Built-in Presets

Preset	Aesthetic Style	Best For
MotionPreset.apple	Clean, subtle shadows, gentle spring physics	iOS & macOS designs
MotionPreset.material3	Dynamic color tokens & elevation ripples	Android & Material apps
MotionPreset.cyberpunk	Neon glow, bold strokes & high contrast	Web3, Gaming, Crypto
MotionPreset.luxury	Rich gold, deep obsidian & elegant curves	Fintech & Premium SaaS
MotionPreset.glass	Backdrop blur, translucent border & glow	Modern dashboards & UI

---

🛠️ Supported Framework Components

• Effects: MotionAuroraBorder, MotionBorderBeam, MotionAurora, MotionGlass, MotionGlow, MotionShimmer, MotionMagnetic, MotionTilt3D, MotionHoverLift, MotionGradientFlow
• Buttons: MotionButton, MotionBadge
• Inputs: MotionTextField, MotionOTP
• Cards: MotionCard, MotionInstaCard, MotionMediaCard
• Controls: MotionSwitch, MotionSlider, MotionAccordion
• Display & Loaders: MotionLoader, MotionProgress, MotionAvatar, MotionTag

---

👨‍💻 Author & Community

Engineered with ❤️ by Yash Tiwari.

📄 License

Licensed under the MIT License.