@kinem/vue

Vue bindings for kinem. Composables and a <Motion> component that wrap the vanilla play() and related APIs. Animations run against template refs via WAAPI or rAF; Vue's reactivity is never used to drive per-frame state updates.

<script setup lang="ts">
import { Motion } from "@kinem/vue"
</script>

<template>
  <Motion
    :initial="{ opacity: 0, y: 20 }"
    :animate="{ opacity: 1, y: 0 }"
    :transition="{ duration: 400 }"
  >
    hello
  </Motion>
</template>

Install

pnpm add @kinem/vue @kinem/core

@kinem/core is a peer dependency.

What's exported

• useAnimation, useGesture, useScroll, useSpring composables
• useTime, useVelocity, useTransform, useCombine, useMotionValueEvent for reactive value plumbing
• useAnimate for imperative animate(target, props, opts) calls scoped to a template ref
• useInView for IntersectionObserver-driven flags
• useKinemTransition for <Transition> integration
• useReducedMotion, prefersReducedMotion
• <Motion> component
• <ReorderGroup> and <ReorderItem> for drag-to-sort lists

<script setup lang="ts">
import { ref } from "vue"
import { useAnimate } from "@kinem/vue"

const items = ref([{ id: 1, label: "one" }, { id: 2, label: "two" }])
const { scope, animate } = useAnimate()
const play = () => animate("li", { opacity: [0, 1] }, { duration: 300 })
</script>

<template>
  <ul :ref="scope">
    <li v-for="i in items" :key="i.id">{{ i.label }}</li>
  </ul>
  <button @click="play">play</button>
</template>

Docs

Full guide and API reference in the main repo.

License

Dual licensed under Apache 2.0 or MIT.