Sparkles

New

Overview

Decorative animated sparkles around inline content, with configurable count, size, color, and duration.

Add sparkles to inline content .

HEEx

<p class="text-sm">
  Add sparkles to <Sparkles.sparkles id="example-sparkles-default">inline content</Sparkles.sparkles>.
</p>

Size

Use larger sparkles for more emphasis.

HEEx

<p class="text-sm">
  Use
  <Sparkles.sparkles
    id="example-sparkles-big"
    size="2.5em"
    color="#38bdf8"
  >
    larger sparkles
  </Sparkles.sparkles>
  for more emphasis.
</p>

Colors

Choose red , orange , or green .

HEEx

<p class="text-sm">
  Choose <Sparkles.sparkles id="example-sparkles-red" count={2} color="#ef4444">red</Sparkles.sparkles>, <Sparkles.sparkles
    id="example-sparkles-orange"
    count={2}
    color="#f97316"
  >orange</Sparkles.sparkles>,
  or <Sparkles.sparkles id="example-sparkles-green" count={2} color="#22c55e">green</Sparkles.sparkles>.
</p>

Rainbow

Rainbow sparkles cycle through multiple colors.

HEEx

<p class="text-sm">
  <Sparkles.sparkles
    id="example-sparkles-rainbow"
    count={5}
    color="rainbow"
    duration_ms={2000}
  >
    Rainbow sparkles
  </Sparkles.sparkles>
  cycle through multiple colors.
</p>

Add this module

terminal

mix dizzy.add sparkles

Component API

Sparkles.sparkles

Attributes

Attributes for Sparkles.sparkles
Name	Type	Default	Values
`class`	`:any`	nil	—
`color`	`:string`	"#4ab9f8"	—
`count`	`:integer`	3	—
`duration_ms`	`:integer`	1500	—
`id`	`:string`	Required	—
`rest`	`:global`	nil	—
`size`	`:string`	"1em"	—

Slots

Slots for Sparkles.sparkles
Name	Required	Attributes
`inner_block`	Required	—

JavaScript hook

DizzySparkles

Creates decorative SVG sparkles around the component content, repositions them between animation cycles, and supports fixed or rainbow colors. The effect is omitted when the user prefers reduced motion.

Included in the packaged Dizzy hooks. mix dizzy.add wires this hook into your LiveSocket configuration automatically.