@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

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: [email protected]