@stianlarsen/meteors

@stianlarsen/meteors

A dynamic and customizable React component for rendering realistic meteor animations on any container. Perfect for adding a unique and mesmerizing effect to your web applications.

Preview

Your browser does not support the video tag.

A preview of @stianlarsen/meteors

Features

• Realistic Meteor Animations: Simulate meteors shooting across the screen with customizable speed, size, and quantity.
• Dynamic and Configurable: Easily adjust the component’s behavior to suit your project, including options for light and dark modes, and custom colors.
• Ease of Integration: Drop the component into any container, and it will automatically adapt to the container's dimensions.
• SCSS Modules: Styled with SCSS modules, making it straightforward to integrate and customize within your existing project.

Installation

Install the package using npm:

npm install @stianlarsen/meteors

Or using yarn:

yarn add @stianlarsen/meteors

Usage

Meteors Component

Import and use the Meteors component in your React project:

import Meteors from "@stianlarsen/meteors";

function App() {
  return (
    <div style={{ position: "relative", width: "300px", height: "300px" }}>
      <Meteors
        speed={2}
        size={50}
        amount={20}
        colorLightmode="black"
        colorDarkmode="white"
        fallingSide="right"
      />
    </div>
  );
}

Meteors Component Props

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

Prop	Type	Description
speed	number	The speed of the meteors' fall. Defaults to 1.
size	number	The size of the meteors. Defaults to 50.
amount	number	The number of meteors. Defaults to 20.
fallingSide	string	Determines the direction of the meteor fall (left or right). Defaults to left.
colorLightmode	string	The color of the meteors in light mode. Defaults to "rgba(0, 0, 0, 1)".
colorDarkmode	string	The color of the meteors in dark mode. Defaults to "rgba(255, 255, 255, 1)".
style	CSSProperty	Add custom styling. Defaults to undefined.
className	string	Add classname to the component. Defaults to undefined.

Example of Customizing Meteor Behavior

Here is how you can customize the meteors' behavior using the available props:

<Meteors
  speed={3}
  size={30}
  amount={10}
  colorLightmode="blue"
  colorDarkmode="yellow"
  fallingSide="left"
/>

Contributing

Contributions are always welcome! Please feel free to open issues or submit pull requests.

License

@stianlarsen/meteors is MIT licensed.

Contact

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

• GitHub: @stianlars1
• Website: https://stianlarsen.com
• Email: [e-mail]