"use client"; import { useId, useMemo } from "react"; import { motion } from "framer-motion"; import { cn } from "@/lib/utils"; interface Sparkle { id: string; x: number; y: number; size: number; color: string; delay: number; duration: number; gap: number; rotate: number; } // White is weighted heaviest so the brand tints read as rare accents. const DEFAULT_COLORS = ["#ffffff", "#ffffff", "#ffffff", "#a99dff", "#5b8cff"]; // Deterministic pseudo-random in [0, 1), no Math.random / Date.now at any scope. function seeded(i: number): number { const v = Math.sin(i * 127.1 + 311.7) * 43758.5453; return v - Math.floor(v); } function StarShape({ size, color }: { size: number; color: string }) { return ( ); } export function SparklesText({ children, className, count = 18, colors = DEFAULT_COLORS, }: { children: React.ReactNode; className?: string; count?: number; colors?: string[]; }) { const uid = useId(); const sparkles = useMemo(() => { return Array.from({ length: count }, (_, i) => { // Positions spill a little past the text box so stars sit around the letters. const x = Number((seeded(i * 4 + 1) * 116 - 8).toFixed(2)); // -8% .. 108% const y = Number((seeded(i * 4 + 2) * 132 - 16).toFixed(2)); // -16% .. 116% const size = Math.round(7 + seeded(i * 4 + 3) * 12); // 7px .. 19px const color = colors[Math.floor(seeded(i * 4 + 4) * colors.length) % colors.length]; const delay = Number((seeded(i + 101) * 3.4).toFixed(2)); const duration = Number((1.5 + seeded(i + 211) * 1.3).toFixed(2)); const gap = Number((0.4 + seeded(i + 331) * 1.4).toFixed(2)); const rotate = Math.round(seeded(i + 447) * 80 - 40); return { id: `${uid}-${i}`, x, y, size, color, delay, duration, gap, rotate }; }); }, [count, colors, uid]); return ( {children} {sparkles.map((s) => ( ))} ); } export default function Demo() { return (

Lumenite UI

Make it sparkle

Motion primitives and micro-interactions for interfaces that feel considered, not generated.

); }

Sparkles Text