"use client"; import { useMemo } from "react"; import { motion } from "framer-motion"; import { Sparkles } from "lucide-react"; import { cn } from "@/lib/utils"; /** * A curated cool-toned palette: violet → periwinkle → sky → aqua and back. * Reads as a premium multi-hue sweep rather than a full RGB rainbow. */ const DEFAULT_COLORS = [ "#a78bfa", "#7c6cff", "#6b8cff", "#5b8cff", "#38bdf8", "#818cf8", ]; const round = (n: number) => Math.round(n * 1000) / 1000; export function ColourfulText({ text, className, colors = DEFAULT_COLORS, duration = 5, }: { text: string; className?: string; colors?: string[]; duration?: number; }) { // Split once; whitespace is rendered as a fixed, non-animated gap so word // shapes stay intact while every glyph carries its own phase of the sweep. const chars = useMemo(() => Array.from(text), [text]); return ( {chars.map((ch, i) => { if (ch === " ") { // eslint-disable-next-line react/no-array-index-key return ( ); } // Rotate the palette per glyph so, even at rest (t=0), the word already // shows a full gradient, then the whole thing flows together. const k = i % colors.length; const rotated = [...colors.slice(k), ...colors.slice(0, k)]; const colorKeyframes = [...rotated, rotated[0]]; const waveDelay = round((i % 12) * 0.11); return ( {ch} ); })} ); } export default function Demo() { return (

{/* Ambient glow so the panel is alive even before the text sweeps */}

Lumenite UI Design something{" "} yours. A headline that never sits still, each letter drifts through a cool, tasteful spectrum with a soft blur-and-scale wave.

); }

Colourful Text

Design something unmistakably yours.

Design something yours.