"use client"; import * as React from 'react'; import { useState, useEffect, createContext, useContext, useMemo, FC, ReactNode, ElementType, ComponentProps, CSSProperties, } from 'react'; import { motion } from 'framer-motion'; // Helper function to generate a random number in a given range const random = (min: number, max: number): number => Math.random() * (max - min) + min; // --- TYPE DEFINITIONS --- // Defines the properties for a single sparkle interface Sparkle { id: string; color: string; size: number; style: { top: string; left: string; animationDelay: string; }; } // Defines the configuration options for the useSparkles hook interface UseSparklesOptions { colors?: { first: string; second: string }; sparkleCount?: number; sparkleSize?: number; } // Defines the shape of the context data interface SparklesContextType { sparkles: Sparkle[]; } // Defines the props for the SparkleInstance component interface SparkleInstanceProps { size: number; color: string; style: CSSProperties; key?: string; // Add key prop to fix the type error } // Defines the base props for the SparklesText component interface BaseSparklesTextProps extends UseSparklesOptions { children?: ReactNode; className?: string; } // Makes the SparklesText component polymorphic, allowing the 'as' prop // to change the rendered HTML element and accept its specific attributes. type PolymorphicSparklesTextProps = { as?: T; } & BaseSparklesTextProps & Omit, keyof BaseSparklesTextProps>; // --- HOOK --- /** * useSparkles Hook * This custom hook encapsulates the logic for generating and managing sparkles. * @param options - Configuration for the sparkles. * @returns An array of sparkle objects. */ const useSparkles = ({ colors = { first: '#9E7AFF', second: '#FE8BBB' }, sparkleCount = 20, sparkleSize = 12, }: UseSparklesOptions = {}): Sparkle[] => { const [sparkles, setSparkles] = useState([]); useEffect(() => { const generateSparkle = (): Sparkle => { const color = Math.random() > 0.5 ? colors.first : colors.second; return { id: crypto.randomUUID(), color, size: random(sparkleSize * 0.7, sparkleSize * 1.3), style: { top: `${random(0, 100)}%`, left: `${random(0, 100)}%`, // animationDelay is a valid CSS property, so we can assert the type animationDelay: `${random(0, 2.5)}s`, }, }; }; const newSparkles = Array.from({ length: sparkleCount }, generateSparkle); setSparkles(newSparkles); }, [sparkleCount, colors.first, colors.second, sparkleSize]); return sparkles; }; // --- CONTEXT --- const SparklesContext = createContext(null); // --- COMPONENTS --- /** * SparkleInstance Component * Renders a single animated sparkle using an SVG shape. */ const SparkleInstance: FC = React.memo(({ size, color, style }) => { const path = "M120 80L100 0 80 80 0 100l80 20 20 80 20-80 80-20-80-20z"; return ( ); }); SparkleInstance.displayName = 'SparkleInstance'; /** * SparklesWrapper Component * Consumes the sparkles context and renders the SparkleInstance components. */ const SparklesWrapper: FC = React.memo(() => { const context = useContext(SparklesContext); if (!context) { // This should not happen if the component is used correctly. return null; } const { sparkles } = context; return ( <> {sparkles.map((sparkle) => ( ))} ); }); SparklesWrapper.displayName = 'SparklesWrapper'; /** * SparklesText Component * The main component that wraps text and adds a sparkling effect. * It's a polymorphic component, meaning you can change the underlying * HTML element using the `as` prop. */ export const SparklesText = ({ as, children, className, ...sparkleOptions }: PolymorphicSparklesTextProps) => { const Component = as || 'h1'; const sparkles = useSparkles(sparkleOptions); const contextValue = useMemo(() => ({ sparkles }), [sparkles]); return ( {children} ); }; export default SparklesText;

Sparkles Text

Preview

Starship

Usage