Interaction

Velocity Card

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 motion-blocks add velocity-card

npx motion-blocks add velocity-card

bunx --bun motion-blocks add velocity-card

yarn dlx motion-blocks add velocity-card

Usage

---import "@/components/motion-blocks/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-blocks/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-blocks/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-blocks/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-blocks/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`