Backgrounds Fancy Stable
StarsBackground
Three-layer starfield background that scrolls continuously while parallax-shifting in response to cursor movement via spring physics, with stars rendered as box-shadow dots across near, mid, and far depth layers
Preview
svelte
<script lang="ts">
import { StarsBackground } from 'fancy-ui-svelte';
</script>
<StarsBackground />Installation
pnpm add fancy-ui-svelte
import { StarsBackground } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { StarsBackground } from 'fancy-ui-svelte';
</script>
<StarsBackground />Examples
Basic Usage
svelte
<script lang="ts">
import { StarsBackground } from "$lib/fancy-ui/bg-stars";
</script>
<div class="overflow-hidden rounded-lg border">
<StarsBackground class="h-[400px]">
<div class="relative z-10 flex h-full items-center justify-center">
<h2 class="text-4xl font-bold text-white">Move your mouse</h2>
</div>
</StarsBackground>
</div>Custom Color
svelte
<script lang="ts">
import { StarsBackground } from "$lib/fancy-ui/bg-stars";
</script>
<div class="overflow-hidden rounded-lg border">
<StarsBackground class="h-[300px]" starColor="#60a5fa">
<div class="relative z-10 flex h-full items-center justify-center">
<p class="text-xl text-blue-300">Blue stars</p>
</div>
</StarsBackground>
</div>Animation Speed
svelte
<script lang="ts">
import { StarsBackground } from "$lib/fancy-ui/bg-stars";
</script>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="overflow-hidden rounded-lg border">
<StarsBackground class="h-[200px]" speed={20}>
<div class="relative z-10 flex h-full items-center justify-center">
<p class="text-sm text-white/80">speed=20 (fast)</p>
</div>
</StarsBackground>
</div>
<div class="overflow-hidden rounded-lg border">
<StarsBackground class="h-[200px]" speed={100}>
<div class="relative z-10 flex h-full items-center justify-center">
<p class="text-sm text-white/80">speed=100 (slow)</p>
</div>
</StarsBackground>
</div>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
factor | number | 0.05 | Parallax factor for mouse movement |
speed | number | 50 | Base animation speed in seconds |
stiffness | number | 50 | Spring stiffness for parallax |
damping | number | 20 | Spring damping for parallax |
starColor | string | "#fff" | Color of the stars |
Slots
| Slot | Description |
|---|---|
children | Child content to render over the stars |
Links
Related components
Fa
FallingStarsBg
Canvas-based 3D starfield with perspective projection, motion trails, and glow
Backgrounds Stable
Fl
FlickeringGrid
Canvas grid of squares that flicker in and out of opacity at random each frame, pausing automatically via IntersectionObserver when scrolled off-screen and resizing to fit its container via ResizeObserver
Backgrounds Stable
Ma
MatrixRain
Canvas-based falling glyph rain with configurable color, speed, and density
Backgrounds Stable