Getting Started
Components
Special Effects
Animations
Text Animations
Backgrounds
A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.
Svelte Magic UI
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/sparkles-text.json
Copy the Source Code
Copy and paste the following code into your project:
index.ts
sparkles-text.svelte
Props
SparklesText
A text wrapper that renders animated sparkle stars around its children.
| Name | Type | Default | Description |
|---|---|---|---|
as | keyof SvelteHTMLElements | "div" | HTML element used for the outer wrapper. |
children | Snippet | required | Content rendered inside the sparkle text component. |
sparklesCount | number | 10 | Number of sparkle instances generated and animated at a time. |
colors | { first: string; second: string } | { first: "#9E7AFF", second: "#FE8BBB" } | Two colors randomly used when generating sparkle stars. |
class | string | "" | Additional classes merged onto the root element. |
style | string | "" | Inline styles appended to the generated sparkle CSS variables. |