Stars Background
A parallax-animated starfield background using layered motion and randomized star positions.
API
| Prop Name | Type | Default | Description |
|---|---|---|---|
factor | number | 0.05 | Multiplier for mouse parallax movement. |
speed | number | 50 | Base speed (in seconds) for vertical looping animation of star layers. |
transition | SpringOptions | { stiffness: 50, damping: 20 } | Spring physics config for smooth motion response to cursor movement. |
starColor | string | "#fff" | Color of the stars. Accepts any valid CSS color value. |
class | string | — | Optional additional classes for container div. Useful for z-index, etc. |
💡 This component wraps a slot for children, so you can place other UI elements over the background.
Install using CLI
Install Manually
StarsBackground.vue
Features
- Animated starfield: Renders three independently scrolling layers of stars with varying sizes and density.
- Parallax effect: Responds to mouse movement with smooth spring physics, adding depth and realism.
- Customizable star density: Each layer uses a different number of stars for natural variation.
- Slot support: Acts as a visual container, allowing foreground UI or content to be layered on top.
- Responsive
Credits
- Ported from Animate UI
Sparkles
A configurable sparkles component that can be used as a background or as a standalone component.
Stractium Background
A shader-based background inspired by intricate fractal patterns and organic textures, created using raymarching and GLSL. This effect is designed to simulate complex, evolving visual textures.