@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.