import React from "react"; export function AuroraTrail({ size = 72, stroke = 6, speed = 1.6, colors = ["#FF6F9C", "#9D6FFF", "#FFC163"], label, overlay = false, className = "", }) { const [c1, c2, c3] = colors; const vars = { "--at-size": `${size}px`, "--at-stroke": `${stroke}px`, "--at-speed": `${speed}s`, "--at-c1": c1, "--at-c2": c2, "--at-c3": c3, }; const content = (

{label ? (

{label.split("").map((ch, i) => ( {ch === " " ? "\u00A0" : ch} ))}

) : null}

); if (!overlay) return content; return

{content}

; } function AuroraTrailStyles() { return ( ); } /* ------------------------------------------------------------------ */ /* Showcase / demo (preview only — not part of the shipped component) */ /* ------------------------------------------------------------------ */ export default function Showcase() { return (

Component

AuroraTrail Loader

A single self-contained React component: a breathing glow, a comet-trail ring, a pulsing core, and an optional wave-animated label. No dependencies, fully themeable via props.

); } function Card({ title, children }) { return (

{children} {title}

); }

AuroraTail Loader

Commentaires0