Create a 'Tilt' component

[ibelick]

We're looking to add 'Tilt' component to motion-primitives! This component would let you add an interactive element that reacts to mouse movements by tilting in the corresponding direction.

Requirements:

• Allow customization with transition.
• Maintain performance for smooth animations.
• Ensure compatibility with the most recent browsers.
• Simple, easy-to-use API.

Ideal Contribution:

• A React component that uses Framer Motion for animations.
• Include a demo page that showcases the component with various content types like images and text (docs/tiltable-card/page.mdx).

Example Usage:

<Tilt transition={{
  type: "spring",
  stiffness: 900,
  damping: 80,
  mass: 10,
}}>
  <div className="w-[200px] h-[300px] bg-zinc-800">
    <img src="example.jpg" alt="Example" />
    <h2>Interactive Card</h2>
    <p>This card tilts as you hover over it, adding a dynamic interactive element to your UI.</p>
  </div>
</Tilt>

How to Contribute:

• Fork the repository on GitHub.
• Create your feature branch (git checkout -b feature/tiltable-card).
• Commit your changes (git commit -am 'Add Tiltable Card').
• Push to the branch (git push origin feature/tiltable-card).
• Open a new Pull Request targeting the main branch.

If you have a Twitter handle, please provide it so I can tag you in the related announcement demo tweet. You'll also be added to the Credit in the documentation page. Thank you for considering contributing to motion-primitives!

[chbg]

Hi, @ibelick !

Could you please assign this issue to me? I'd love to work on adding the 'Tilt' component to motion-primitives. Thanks!

[ibelick]

Hey @chbg, just assigned the issue to you. Thanks!

[gabe-santos]

Any updates to this? I can work on this.