Setting Up Framer Motion in Next.js

Every animated block in the library eventually imports from framer-motion (or motion). Before they can render in Next.js, three things have to be right.

1. Install

npm install framer-motion
# or, for the motion package:
npm install motion

2. Mark components as client components

Framer Motion hooks and motion.* elements rely on browser APIs like requestAnimationFrame, so any component using them needs the client boundary:

"use client";

import { motion } from "framer-motion";

Without this, Next.js will try to prerender the element and throw a reference error during build.

3. Use Motion Values for hot paths

For things that change every frame — drag positions, scroll progress, hover-tracking — prefer useMotionValue over useState:

const x = useMotionValue(0);
const scale = useMotionValue(1);

Motion Values update outside React's render cycle, so you can drive hundreds of nodes (see the BubbleBoard) without re-rendering the tree.

Defaults that match the library

Most interactive blocks use this spring baseline:

transition={{ type: "spring", stiffness: 320, damping: 30 }}

It's lively enough to feel physical and stable enough for navigation.

Key takeaways

• Add "use client" at the top of any file rendering motion.* or using motion hooks.
• Extract shared spring presets into constants so tuning happens in one place.
• Use Motion Values wherever a value changes more often than a few times a second.