motion

Name: motion
Availability: InStock
Author: Incubrain

Automate hardware-accelerated animations in Vue 3 and Nuxt with motion-v.

78|8|Updated Nov 7, 2022

Search Tags:#layout #animations #Nuxt #Vue 3 #gestures #scroll #motion-v

Ready to run

npx skills add https://github.com/incubrain/foundry --skill motion-incubrain

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion
Source: https://github.com/incubrain/foundry/tree/main/.claude/skills/motion
Command: npx skills add https://github.com/incubrain/foundry --skill motion-incubrain

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Motion Vue provides a straightforward way to add production‑ready, hardware‑accelerated animations to Vue 3 and Nuxt projects without heavy boilerplate.

Core Features & Use Cases

Motion Component API: wrap any HTML or SVG element to animate props like initial, animate, and exit.
Gesture, Scroll & Layout: support for gestures, scroll‑linked effects, and layout transitions with layoutId and AnimatePresence.
Composables & Templates: access useMotionValue, useSpring, useTransform, and useMotionTemplate to drive performant animations.

Quick Start

Install the motion-v library in a Vue 3 project and enable the Nuxt module. Then configure Nuxt to include the motion-v/nuxt module.

Frequently Asked Questions about motion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add hardware-accelerated UI animations to a Vue 3 or Nuxt project?▼

Add hardware-accelerated UI animations to Vue 3 or Nuxt by installing the motion-v library, enabling the Nuxt module, and using the Motion component API to animate props like initial, animate, and exit.

What is the best way to handle layout transitions and scroll-linked effects in Vue 3?▼

Handle layout transitions and scroll-linked effects in Vue 3 by utilizing motion-v's AnimatePresence with layoutId, which manages component transitions and scroll interactions without heavy boilerplate.

Can I use composables like useMotionValue and useSpring for Vue 3 gesture interactions?▼

Yes, you can drive performant gesture interactions in Vue 3 using motion-v composables like useMotionValue, useSpring, useTransform, and useMotionTemplate.

Does motion-v require heavy boilerplate for production-ready frontend animations?▼

No, motion-v provides a straightforward way to add production-ready frontend animations to Vue 3 and Nuxt projects without requiring heavy boilerplate.

How do I animate HTML and SVG elements using a Motion API in Nuxt?▼

Animate HTML and SVG elements in Nuxt by wrapping them with the motion-v Motion component API, which directly accepts animation props to drive hardware-accelerated visual effects.