Giters

ibelick / motion-primitives

UI kit to make beautiful, animated interfaces, faster. Customizable. Open Source.

Home Page:https://motion-primitives.com

Repository from Github https://github.comibelick/motion-primitivesRepository from Github https://github.comibelick/motion-primitives

Create a 'Border Trail' component

ibelick opened this issue · comments

commented

We're looking to add a 'Border Trail' component to motion-primitives! This component should add a dynamic border that loops continuously. It adds a fancy touch to any UI element or could be used to show a loading state or something else.

Requirements:

  • Follow any border radius and adapt to different shapes.
  • Allow customization for speed, className, and transition.
  • Maintain performance for smooth animations.
  • Ensure compatibility with the most recent browsers.
  • Simple, easy-to-use API.

Ideal Contribution:

  • A React component leveraging Framer Motion.
  • Include a demo page (with at least one example) that demonstrates the component in action. Follow the setup of other components (ex: docs/animated-group/page.mdx).

Example Usage:

<div className="any-classnames">
  <BorderTrail speed={40} className="bg-gradient-to-r from-rose-400 to-red-500 h-1 w-3" />
</div>

How to Contribute:

  • Fork the repository on GitHub.
  • Create your feature branch (git checkout -b feature/border-trail).
  • Commit your changes (git commit -am 'Add some BorderTrail').
  • Push to the branch (git push origin feature/border-trail).
  • 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!