Sparkles Text

A text component with animated sparkles that move and fade smoothly. It generates multiple sparkles around the text for a dynamic effect. Use it to add visual interest to headlines or important text.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/sparkles-text

npx layro-cli add @magicuidesign/sparkles-text

npx layro-cli add @magicuidesign/sparkles-text

bunx layro-cli add @magicuidesign/sparkles-text

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import {
  useEffect,
  useState,
  type CSSProperties,
  type ReactElement,
} from "react"
import { motion } from "motion/react"

import { cn } from "@/lib/utils"

interface Sparkle {
  id: string