1.0.11 • Published 2 months ago

@stianlarsen/border-beam v1.0.11

Weekly downloads
-
License
MIT
Repository
github
Last release
2 months ago

@stianlarsen/border-beam

npm version

An animated border component that creates a visually stunning beam of light traveling along the borders of any container. Perfect for adding a modern, dynamic touch to your web components.

Preview

A preview of @stianlarsen/border-beam

Features

  • Customizable Border Component: Easily adaptable border beam component for various use cases, allowing for dynamic, animated borders with customizable colors and timing.
  • Ease of Use: Designed for developers who want to add a unique, eye-catching effect to their components with minimal setup.
  • Fully Configurable: Adjust the size, duration, border width, colors, and delay to fit your project's needs.
  • SCSS Modules: The component is styled using SCSS modules, making it easy to integrate and customize within your existing project.

Installation

Install the package using npm:

npm install @stianlarsen/border-beam

Or using yarn:

yarn add @stianlarsen/border-beam

Usage

Border Beam

Import and use the Border Beam component in your React project:

import { BorderBeam } from "@stianlarsen/border-beam";

function App() {
  return (
    <div style={{ position: "relative", width: "300px", height: "300px" }}>
      <BorderBeam size={300} duration={10} />
    </div>
  );
}

BorderBeam Component Props

The BorderBeam component accepts several props to customize its behavior and appearance:

PropTypeDescription
classNamestringAn optional CSS class to apply custom styling.
sizenumberThe size of the animated beam. Defaults to 200.
durationnumberThe duration of the animation in seconds. Defaults to 15.
borderWidthnumberThe width of the border in pixels. Defaults to 1.5.
anchornumberThe anchor point of the beam. Defaults to 90.
colorFromstringThe starting color of the gradient. Defaults to #ffaa40.
colorTostringThe ending color of the gradient. Defaults to #9c40ff.
delaynumberDelay before the animation starts in seconds. Defaults to 0.

Customizing Colors

You can easily customize the colors of the border beam by using the colorFrom and colorTo props. For more advanced customization, you can also use CSS variables within your project.

Example of customizing colors:

<BorderBeam colorFrom="#ff0000" colorTo="#0000ff" />

Contributing

Contributions are always welcome! Please contact me for further info.

License

@stianlarsen/border-beam is MIT licensed.

Contact

For any questions or suggestions, feel free to reach out.

1.0.11

2 months ago

1.0.10

6 months ago

1.0.9

11 months ago

1.0.8

11 months ago

1.0.7

11 months ago

1.0.6

11 months ago

1.0.5

11 months ago

1.0.4

11 months ago

1.0.3

11 months ago

1.0.2

11 months ago

1.0.1

11 months ago

1.0.0

11 months ago