Backgrounds
FloatingSparkles
Magic doesn't ship itself.
A field of ✦ glyphs drifting upward. Pure CSS, randomized once per mount. Drop inside any `position: relative` parent.
Install
Copy this owned-code component into your app from the registry.
pnpm dlx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/floating-sparkles.json
Examples
Default
<div style={{ position: "relative", height: 240 }}>
<FloatingSparkles />
</div>Denser + emoji
<FloatingSparkles
count={40}
glyphs={["✨", "⭐", "💫"]}
sizeRange={[10, 22]}
durationS={[5, 12]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 18 | Number of sparkles. |
| glyphs | string[] | - | Pool of glyphs. |
| durationS | [number, number] | [8, 18] | [min, max] seconds. |
| sizeRange | [number, number] | [8, 20] | [min, max] px font size. |