edbnedbn/ui
Get Started
WelcomeChangelogLicenseOverview
Components
ButtonAlert DialogPopoverDropdown Menu
Motion
Motion Provider
Spring PresetsHooks
ComponentsBlocks
HomeDocsUtilitiesMotion Provider

On this page

Motion Provider

A context provider for global motion configuration. Controls animation behavior based on user preferences, device capabilities, and explicit settings.

Overview

The MotionProvider wraps your app to provide consistent motion settings. All animated components automatically respect these settings.

TypeScript
// app/layout.tsx
import { MotionProvider } from "@/components/MotionProvider"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <MotionProvider>
          {children}
        </MotionProvider>
      </body>
    </html>
  )
}

Installation

1

Install dependencies

Terminal
npm install motion
2

Add the MotionProvider component

Copy the MotionProvider component to your project:

3

Wrap your app

Add the provider to your root layout.

TypeScript
<MotionProvider>
  {children}
</MotionProvider>

Configuration

Control how animations behave across your application.

TypeScript
// Default: respects user's system preferences
<MotionProvider reducedMotion="user">
  {children}
</MotionProvider>

// prefers-reduced-motion: reduce → animations disabled
// prefers-reduced-motion: no-preference → animations enabled

Low Power Detection

Automatically disable animations on battery-constrained devices.

TypeScript
// Auto-disable animations on low-power devices
<MotionProvider lowPowerAutoDisable>
  {children}
</MotionProvider>

// Detects:
// - Battery level < 20%
// - Battery saver mode
// - Low CPU core count
// - Device not charging

Battery API

Uses the Navigator Battery API where available. Falls back to CPU core detection on unsupported browsers.

Hooks

Access motion configuration from any component.

useMotionConfig

TypeScript
import { useMotionConfig } from "@/components/MotionProvider"

function MyComponent() {
  const { reducedMotion, lowPowerAutoDisable } = useMotionConfig()
  
  return (
    <div>
      <p>Reduced motion: {reducedMotion}</p>
      <p>Low power auto-disable: {lowPowerAutoDisable ? "yes" : "no"}</p>
    </div>
  )
}

useShouldDisableAnimation

TypeScript
import { useShouldDisableAnimation } from "@/components/MotionProvider"

function AnimatedComponent({ disableAnimation }) {
  // Combines: prop override + context settings + system preferences
  const shouldDisable = useShouldDisableAnimation(disableAnimation)
  
  if (shouldDisable) {
    return <div>Static version</div>
  }
  
  return <motion.div animate={{ opacity: 1 }}>Animated version</motion.div>
}

API Reference

MotionProvider Props

PropTypeDefaultDescription
reducedMotion"user" | "always" | "never""user"How to handle reduced motion
lowPowerAutoDisablebooleantrueAuto-disable on low battery
childrenReact.ReactNode—Child components

Component Integration

All edbn/ui components use useShouldDisableAnimation internally. They accept a disableAnimation prop for per-instance overrides.