🚀 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
Per-character/word/line text animation (NibText, NibTypewriter, NibGradientText, NibTextReveal)
GPU shader effects (NibShimmer, NibDissolve)
Animation presets (NibShake, NibBounce, NibPulse, NibFloat, NibFlip, NibRubberBand)
Advanced gestures (NibDraggable, NibPinch, NibSwipeDismiss)
Timeline orchestration (NibTimeline, NibAnimationSequence)
Path animation (NibPathMotion, NibDrawPath)
Scroll utilities (NibParallax, NibScrollReveal)
Debug tooling (NibMotionDebugger, NibPerfOverlay)

📦 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