
Modern Motion in Nuxt with Motion.js
Practical patterns for building fluid, interruptible animations in Nuxt using Motion.js—focus on structure, performance, and accessibility.

Bo Cooper
Motion done well guides, orients, and builds trust. Motion done poorly distracts and slows. Here's a framework for using Motion.js inside a production Nuxt app.
Principles
- Intent > Decoration
- Interruptibility
- Respect user preferences
- Defer non-critical motion
Setup
Install motion-v/nuxt
(already in this template). Then compose variants near the component.
const fadeSlide = {
initial: { opacity: 0, y: 12 },
enter: { opacity: 1, y: 0, transition: { duration: 0.35 } },
exit: { opacity: 0, y: -4, transition: { duration: 0.2 } }
}
Layout Transitions
Use keyed wraps + Motion presence to animate route swaps without jank.
Stagger Utilities
Create a small helper to produce delays based on index rather than hard-coding.
export const stagger = (i: number, base = 0.05) => ({ delay: base * i })
Reduced Motion
import { usePreferredReducedMotion } from '@vueuse/core'
const reduced = usePreferredReducedMotion()
const maybe = (value: any) => reduced.value ? undefined : value
Performance Tips
- Use transform not layout properties
- Move heavy animations off the initial route
- Avoid animating box-shadow; use pseudo elements
- Profile long lists; bail early with v-intersect
Testing Motion
Record Core Web Vitals before/after; ensure no LCP regressions.
Wrap Up
Motion.js + Nuxt gives you declarative, composable motion. Codify patterns early and keep motion purposeful.
Interactive SVG Game Boy Component (Vue + Filters + Parallax)
Building an accessible, filter-rich, interactive SVG Game Boy in Vue with glow feedback, CRT mask, animated gradient, button micro-interactions, and tiny parallax.
Reusable Spotlight Effect Directive for Nuxt
Build a plug-and-play Vue directive that recreates Nuxt's spotlight cursor interaction for any element—accessible and performant.