Create a 'Spotlight' component

[Julien Thibeaut]

We're looking to add 'Spotlight' component to motion-primitives! This component would let you highlight elements on a webpage dynamically, following the cursor.

Requirements:

• Allow customization with transition and className.
• 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 (docs/spotlight/page.mdx) that demonstrates the spotlight effect on different types of content (e.g., text, images, buttons).

Example Usage:

<Spotlight
  transition={{
    type: 'spring',
    stiffness: 300,
    damping: 30,
  }}
  className="bg-zinc-50 size-14" 
>
  <div className="highlighted-element">
    <h2>Spotlight Feature</h2>
    <p>This area is dynamically highlighted by the spotlight component.</p>
  </div>
</Spotlight>

How to Contribute:

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

If you have a X 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!

[Divyanshu]

Hi, @ibelick !
I am interested in contributing to this library, Could you please assign this issue to me? I'd love to work on this 'Spotlight' component. Thanks!

[Julien Thibeaut]

Hey @divyanshu-vashishth , just assigned the issue to you. Thank you :)