React Spinning Border

react-spinning-border is a lightweight, customizable React component that creates a visually engaging, scroll-linked spinning border effect. Built with TypeScript, styled with TailwindCSS, and animated using Motion, it’s perfect for creating eye-catching avatar or profile image components.

Demo

Documentation

Explore the complete Storybook documentation for detailed usage, examples, and API reference:

View Storybook

Installation

Install the package via npm:

npm install react-spinning-border

SpinningBorder Component API

| Prop Name | Type | Default | Description | | ------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | | image | string | Required | The local or external image source. Must be a valid image URL or path. Typically a profile or avatar image. | | colors | [HexColor] \| [HexColor, HexColor] \| [HexColor, HexColor, HexColor] \| [HexColor, HexColor, HexColor, HexColor] | ['#f137a6', '#fbe932', '#5c9eff', '#7ed21e'] | An optional array of hex color strings to customize border gradients. Must be 1 to 4 valid hex colors. | | size | 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' | 'md' | The overall size of the component. Options: 'sm' (96x96px), 'md' (192x192px), 'lg' (320x320px), etc. | | border | 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | The size of the border around the image. Options: 'sm' (3%), 'md' (5%), 'lg' (7%), 'xl' (8%). | | padding | 'sm' \| 'md' \| 'lg' \| 'none' | 'md' | The size of the gap between the border and the image. Options: 'sm' (2%), 'md' (3%), 'lg' (7%), etc. | | speedFactor | number | 1 | A number used to speed up or slow down the spin animation. Recommended range: 0 to 10. | | className | string | undefined | Additional CSS classes for custom styling. | | ...rest | React.HTMLAttributes<HTMLDivElement> | undefined | Any additional HTML attributes to be passed to the component's container. |

Examples

Basic Usage

<SpinningBorder
  image="https://example.com/profile.jpg"
  size="lg"
  border="xl"
  colors={['#ff0000', '#00ff00', '#0000ff']}
/>

Custom Speed and Padding

<SpinningBorder
  image="/assets/avatar.png"
  size="md"
  border="lg"
  padding="sm"
  speedFactor={2}
  colors={['#e63946', '#f1faee']}
/>

Links

• Project Repo: GitHub
• NPM Package: npmjs.com

Author

This package was created and maintained by Seth Way.

• Portfolio: sethway.vercel.app
• GitHub: @seth-way
• LinkedIn: @sethway
• npm: @seth-way

License

This project is licensed under the MIT License.