nib — physics-based motion & 30+ animated components for Flutter

The difference

One widget does what forty lines used to

Every Flutter animation starts the same way: a controller, a ticker, a tween, an initState, a dispose. nib_motion deletes all of it.

vanilla Flutter 40 lines

class _CardState extends State<Card>
    with SingleTickerProviderStateMixin {
  late final AnimationController _c;
  late final Animation<Offset> _slide;

  @override
  void initState() {
    super.initState();
    _c = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 400),
    );
    _slide = Tween(
      begin: const Offset(0, 0.3),
      end: Offset.zero,
    ).animate(CurvedAnimation(
      parent: _c, curve: Curves.easeOutBack));
    _c.forward();
  }

  @override
  void dispose() {
    _c.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) =>
      SlideTransition(position: _slide, child: child);
}

nib_motion 5 lines

NibMotion(
  initial: NibAnim(y: 30),
  animate: NibAnim(y: 0),
  transition: NibTransition.springSnappy,
  child: child,
)

Same spring, springier curve, and no controller to leak. That is the whole pitch.

nib_motion · eighteen primitives

Every animation you'll ever need — running live

Fade, spring, stagger, gesture, presence, layout, scroll, text and GPU shaders. Each is a widget you wrap around your own. Hover and tap the cards — this is nib_motion, in the browser.

Hello NibMotion

Fade & slideNibMotion

initial → animate. Opacity and offset — the move you'll reach for a hundred times a day.

springSnappy

SpringNibTransition

Real spring physics — mass, stiffness, damping. springSnappy, springGentle, or roll your own.

StaggerNibMotionList

One staggerDelay choreographs an entire list. Lists that animate themselves in.

GesturewhileTap

whileTap, whileHover, whileDrag — declare the state, nib springs it there and back.

now you see me

PresenceNibPresence

The exit animation Flutter never gave you — plays removal to completion, then unmounts.

TransformNibAnim.rotate

Rotate, scale, offset — all interpolated with physics, driven by state or gesture.

See all 18 primitives

nib_components · built on nib_motion

Thirty-plus native widgets. Every one animated.

A real Flutter package — flutter pub add nib_components. Flip animated: true and any widget springs, staggers or shimmers on the same engine. Reads your NibTheme, works light and dark, imported like anything else.

import 'package:nib_components/nib_components.dart';

NibButton(
  label: 'Get started',
  variant: NibButtonVariant.fill,
  animated: true,
  onPressed: () => submit(),
)

tap · toggle · live

Liquid Glass

NibLiquidGlass

Apple's Liquid Glass material — as a real Flutter box.

A genuine refraction shader on Impeller: bends the backdrop with Snell's law, not a cheap blur.
Chromatic dispersion, a saturation boost and background-derived rim lighting.
Interactive — the specular highlight tracks the pointer and a press springs the surface.
Any shape via borderRadius or a custom clipper; graceful frosted fallback off-Impeller.

OTP Input

NibOtpInput

The one-time-code field you were about to build by hand.

Paste a whole code and it splits across the cells; SMS autofill is wired in.
Ships with its own on-screen keypad — or defer to the system keyboard.
Loading, error and masked (obscured) states, plus an optional confirm button.
Cells pop in one by one on nib_motion the moment you flip animated.

Resizable Panels

NibResizablePanels

Drag-to-resize layouts that never fall apart.

Draggable dividers you can also resize from the keyboard — fully accessible.
Per-panel min / max constraints keep every layout honest.
Goes narrow gracefully: collapses to a scrollable stack instead of squishing panels to nothing.
Horizontal or vertical, driven by a controller with layout-change callbacks.

Command Palette

NibCommandPalette

Ship a ⌘K launcher in an afternoon.

Cmd+K on Mac, Ctrl+K everywhere else — or open it programmatically.
Search, full arrow-key navigation, and a recents list out of the box.
Bring your own fuzzy filter; the overlay animates in on nib_motion.

Carousel

NibCarousel

Swipeable stories with real momentum.

Native PageView physics — momentum and accessibility come for free.
Auto-play that politely pauses the instant a finger lands.
Peek the adjacent slides, loop infinitely, dots or line indicator.

Data Table

NibDataTable

Thousands of rows, still buttery.

Virtualized rows stay smooth at scale, with a sticky header.
Sort, single- or multi-select, plus loading and empty states.
Falls back to horizontal scroll on narrow screens instead of crushing columns.

…and two dozen more —AccordionAlertBottom SheetBreadcrumbButtonCardFlip CardCheckboxComboboxContext MenuDate PickerDialogHover CardInputLoaderNav MenuPaginationPopoverRadio GroupSelectSkeletonSliderSwitchTabsTextareaToastToggle Group

Browse every component

Two packages, one engine

Take the motion. Take the widgets. Or take both.

Two Flutter packages on pub.dev — nib_components is built on nib_motion, so they speak the same language.

nib_motion — the engine

Physics-based, declarative animation with zero dependencies. The springs, gestures and presence you just saw — dropped onto any Flutter widget, yours or anyone's.

$ flutter pub add nib_motion

nib_components — the widgets

Thirty-plus native, themeable components built on top of nib_motion — from buttons and sliders to liquid glass and a command palette, animated out of the box.

$ flutter pub add nib_components

Delete your AnimationControllers

Add nib_motion in one line and animate with state instead of boilerplate — then let nib_components do it for your whole UI.

Read the docs