nib_motion 0.1.0

Declarative animation primitives for Flutter.

🚀 NibMotion

A declarative, physics-based animation framework for Flutter — inspired by Framer Motion.

👉 Live Demo: https://nib-website-five.vercel.app/motion 📚 Full Documentation: https://nib-website-five.vercel.app/docs

---

✨ Why NibMotion?

Flutter animations often require:

• AnimationController boilerplate
• Tweens everywhere
• Complex widget rebuild logic

NibMotion replaces that with a simple mental model:

Describe how your UI should look in different states — and let NibMotion handle the animation.

---

✨ Features

• Declarative animation API
• Physics-based spring animations
• Gesture animations (tap, hover, drag, focus)
• Variants system (state-driven UI)
• Keyframe animations
• Exit animations (Presence system)
• Viewport & scroll animations
• Layout (FLIP) animations
• Motion values system (high-performance reactive animation)
• Reduced motion support (accessibility-ready)
• Zero external dependencies

---

📦 Installation

flutter pub add nib_motion

Then import:

import 'package:nib_motion/nib_motion.dart';

---

⚡ Basic Usage

NibMotion(
  initial: const NibAnim(opacity: 0, y: 20),
  animate: const NibAnim(opacity: 1, y: 0),
  child: const Text("Hello NibMotion"),
)

---

🎯 Think in States, Not Controllers

Instead of:

• AnimationController
• Tween
• AnimatedBuilder

You write:

NibAnim(
  opacity: 0,
  y: 20,
)

NibMotion handles interpolation automatically.

---

🎭 Gestures

NibMotion(
  whileTap: const NibAnim(scale: 0.9),
  whileHover: const NibAnim(scale: 1.05),
  child: YourWidget(),
)

---

🔁 Variants (State System)

NibMotion(
  variants: {
    "open": NibAnim(y: 0, opacity: 1),
    "closed": NibAnim(y: 20, opacity: 0),
  },
  initial: "closed",
  animate: "open",
  child: YourWidget(),
)

---

🎬 Keyframes

keyframes: [
  NibKeyframe(at: 0.0, value: NibAnim(opacity: 0, y: 30)),
  NibKeyframe(at: 1.0, value: NibAnim(opacity: 1, y: 0)),
]

---

📜 Presence (Exit Animations)

NibPresence(
  children: [
    if (visible)
      NibMotion(
        key: ValueKey("item"),
        exit: const NibAnim(opacity: 0, y: 20),
        child: YourWidget(),
      )
  ],
)

---

👀 Viewport Animations

NibMotion(
  whileInView: const NibAnim(opacity: 1, y: 0),
  initial: const NibAnim(opacity: 0, y: 30),
  viewport: const NibInViewConfig(amount: 0.2),
  child: YourWidget(),
)

---

📐 Layout Animations (FLIP)

Smooth transitions when widgets move or reorder:

NibLayoutGroup(
  children: tasks.map((t) => TaskCard(t)).toList(),
)

---

📊 Motion Controller

Imperative control when needed:

final controller = NibMotionController();

NibMotion(
  controller: controller,
  child: YourWidget(),
);

controller.sequence([
  NibMotionSequenceStep(
    target: const NibAnim(scale: 1.2),
  ),
]);

---

🌊 Scroll Motion

ScrollMotionBridge(controller: scrollController)

Map scroll values into animations:

scrollY.mapRange([0, 200], [0, 1])

---

♿ Reduced Motion Support

NibMotion automatically respects system accessibility settings.

You can also override globally:

NibMotionConfig(
  reducedMotion: true,
  child: MyApp(),
)

---

🧠 Philosophy

NibMotion is built around one idea:

UI should be described, not animated manually.

It gives Flutter a motion model closer to modern UI frameworks like Framer Motion — but fully native, performant, and Flutter-optimized.

---

📚 Learn More

• 📚 Docs: https://nib-website-five.vercel.app/docs
• 🎬 Live Demo: https://nib-website-five.vercel.app/motion

Explore advanced topics:

• Animate
• Transitions
• Gestures
• Variants
• Presence
• Layout
• Scroll
• Motion Values

---

🚀 Status

NibMotion is actively evolving into a full motion system for Flutter apps and UI frameworks.

---

📄 License

MIT

---