@stianlarsen/border-beam
TypeScript icon, indicating that this package has built-in type declarations

1.0.10 • Public • Published

@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

Fallback Image

Your browser does not support the video tag.

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:

Prop Type Description
className string An optional CSS class to apply custom styling.
size number The size of the animated beam. Defaults to 200.
duration number The duration of the animation in seconds. Defaults to 15.
borderWidth number The width of the border in pixels. Defaults to 1.5.
anchor number The anchor point of the beam. Defaults to 90.
colorFrom string The starting color of the gradient. Defaults to #ffaa40.
colorTo string The ending color of the gradient. Defaults to #9c40ff.
delay number Delay 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.

Package Sidebar

Install

npm i @stianlarsen/border-beam

Weekly Downloads

55

Version

1.0.10

License

MIT

Unpacked Size

8.57 kB

Total Files

7

Last publish

Collaborators

  • stianlarsen