Interaction

Velocity Card

Test

A wrapper that reacts to cursor velocity with rotation and stretch, making interactions feel physical.

gsap

Preview

✦

Velocity aware

Reacts to how fast you move, not just where you are.

Move your cursor across the card to feel the velocity.

Attributes

Installation

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/velocity-card.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/velocity-card.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/velocity-card.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/velocity-card.json

Usage

---
import "@/components/motion-kit/velocity-card-element.ts";
---

<motion-velocity-card rotation-factor="3" stretch-factor="0.04" decay="250">
  <div class="card">Move your cursor fast</div>
</motion-velocity-card>

import "@/components/motion-kit/velocity-card-element.ts";

export default function Page() {
  return (
    <motion-velocity-card rotation-factor="3" stretch-factor="0.04" decay="250">
      <div className="card">Move your cursor fast</div>
    </motion-velocity-card>
  );
}

<script setup>
import "@/components/motion-kit/velocity-card-element.ts";
</script>

<template>
  <motion-velocity-card rotation-factor="3" stretch-factor="0.04" decay="250">
    <div class="card">Move your cursor fast</div>
  </motion-velocity-card>
</template>

<script>
  import "@/components/motion-kit/velocity-card-element.ts";
</script>

<motion-velocity-card rotation-factor="3" stretch-factor="0.04" decay="250">
  <div class="card">Move your cursor fast</div>
</motion-velocity-card>

<script type="module" src="/components/motion-kit/velocity-card-element.js"></script>

<motion-velocity-card rotation-factor="3" stretch-factor="0.04" decay="250">
  <div class="card">Move your cursor fast</div>
</motion-velocity-card>

API Reference

Attribute	Type	Default
`duration`	`number`	`0.25`
`rotation-factor`	`number`	`3`
`stretch-factor`	`number`	`0.04`
`decay`	`number`	`250`