105 lines
2.2 KiB
Plaintext
105 lines
2.2 KiB
Plaintext
---
|
|
title: Stars Background
|
|
description: A dark, interactive background featuring animated dots of varying sizes and speeds, simulating a dynamic and immersive starry space effect.
|
|
author:
|
|
name: imskyleen
|
|
url: https://github.com/imskyleen
|
|
---
|
|
|
|
<ComponentPreview name="stars-background-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="stars-background" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<StarsBackground />
|
|
```
|
|
|
|
## Props
|
|
|
|
### StarsBackground
|
|
|
|
<TypeTable
|
|
type={{
|
|
children: {
|
|
description: 'The children of the component',
|
|
type: 'React.ReactNode',
|
|
required: false,
|
|
},
|
|
className: {
|
|
description: 'The className of the component',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
factor: {
|
|
description: 'The factor of the component',
|
|
type: 'number',
|
|
default: '0.05',
|
|
required: false,
|
|
},
|
|
speed: {
|
|
description: 'The speed of the component',
|
|
type: 'number',
|
|
default: '50',
|
|
required: false,
|
|
},
|
|
transition: {
|
|
description: 'The transition of the interactive movement',
|
|
type: 'SpringOptions',
|
|
required: false,
|
|
default: '{ stiffness: 50, damping: 20 }',
|
|
},
|
|
starColor: {
|
|
description: 'The color of the stars',
|
|
type: 'string',
|
|
default: '#fff',
|
|
required: false,
|
|
},
|
|
pointerEvents: {
|
|
description:
|
|
'Controls whether pointer events are caught by the component or pass through to elements behind it',
|
|
type: 'boolean',
|
|
default: 'true',
|
|
required: false,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
### StarLayer
|
|
|
|
<TypeTable
|
|
type={{
|
|
count: {
|
|
description: 'The number of stars',
|
|
type: 'number',
|
|
default: '1000',
|
|
required: false,
|
|
},
|
|
size: {
|
|
description: 'The size of the stars',
|
|
type: 'number',
|
|
default: '1',
|
|
required: false,
|
|
},
|
|
transition: {
|
|
description: 'The transition of the stars',
|
|
type: 'Transition',
|
|
required: false,
|
|
default: '{ repeat: Infinity, duration: 50, ease: "linear" }',
|
|
},
|
|
starColor: {
|
|
description: 'The color of the stars',
|
|
type: 'string',
|
|
default: '#fff',
|
|
required: false,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
## Credits
|
|
|
|
- Credits to [umangladani](https://codepen.io/umangladani/pen/wvgwgjK) for the inspiration
|