Stars

Render dynamic shooting stars on a canvas

npm run add Stars

Use the Stars component to create a visually engaging effect on your page with a canvas element:

<Stars className="star" />

You can use the Stars component without any props. It’ll take up the available width of its container. By default, the component will render 25 shooting stars in a 45° angle. You can position it as a background using CSS positioning and z-index values. To target the canvas, pass a CSS selector using the className prop.

Density and Direction

You can change these default values using the density and directionDegree props:

<Stars
    density={8}
    directionDegree={-45}
/>

By default, density is set to 5, which will render an 5x5 grid pattern. In the above example, increasing it to 8 will render an 8x8 grid, making the total number of stars 64. To better visualize emit locations, you can set the debug prop to true during development.

Size and Speed

Size and speed of the stars can also be configured using the size and speed props:

<Stars size={4} />

<Stars speed={2} />

API

type AnimateStarsProps = {
    directionDegree?: number
    size?: number
    speed?: number
    density?: number
    padding?: number
    randomized?: boolean
    debug?: boolean
    className?: string
}