Backgrounds Fancy Stable
FallingStarsBg
Canvas-based 3D starfield with perspective projection, motion trails, and glow
Preview
svelte
<script lang="ts">
import { FallingStarsBg } from 'fancy-ui-svelte';
</script>
<FallingStarsBg />Installation
pnpm add fancy-ui-svelte
import { FallingStarsBg } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { FallingStarsBg } from 'fancy-ui-svelte';
</script>
<FallingStarsBg />Examples
Basic Usage
svelte
<script lang="ts">
import { FallingStarsBg } from "$lib/fancy-ui/bg-falling-stars";
</script>
<div class="relative h-[400px] overflow-hidden rounded-lg border bg-black">
<FallingStarsBg />
<div class="relative z-10 flex h-full items-center justify-center">
<h2 class="text-4xl font-bold text-white">Falling Stars</h2>
</div>
</div>Custom Color
svelte
<script lang="ts">
import { FallingStarsBg } from "$lib/fancy-ui/bg-falling-stars";
</script>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="relative h-[250px] overflow-hidden rounded-lg border bg-black">
<FallingStarsBg color="#60a5fa" />
<div class="relative z-10 flex h-full items-center justify-center">
<p class="text-blue-300">color="#60a5fa"</p>
</div>
</div>
<div class="relative h-[250px] overflow-hidden rounded-lg border bg-black">
<FallingStarsBg color="#f472b6" />
<div class="relative z-10 flex h-full items-center justify-center">
<p class="text-pink-300">color="#f472b6"</p>
</div>
</div>
</div>Star Count
Control number of stars.
svelte
<script lang="ts">
import { FallingStarsBg } from "$lib/fancy-ui/bg-falling-stars";
</script>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="relative h-[250px] overflow-hidden rounded-lg border bg-black">
<FallingStarsBg count={50} />
<div class="relative z-10 flex h-full items-center justify-center">
<p class="text-sm text-white/80">count=50 (sparse)</p>
</div>
</div>
<div class="relative h-[250px] overflow-hidden rounded-lg border bg-black">
<FallingStarsBg count={500} />
<div class="relative z-10 flex h-full items-center justify-center">
<p class="text-sm text-white/80">count=500 (dense)</p>
</div>
</div>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | "#FFF" | Star color as hex string |
count | number | 200 | Number of stars |
Links
Related components
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
Sp
Sparkles
Canvas-based floating particle sparkle effect with configurable density and colors
Backgrounds Stable