@cntyclub/ui-react 0.10.3 → 0.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.10.3",
+  "version": "0.10.4",
   "description": "React component library for the Country Club UI Kit — Base UI primitives styled with the Country Club design system (Tailwind CSS v4)",
   "type": "module",
   "sideEffects": [

package/src/components/ui/aurora-text.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { memo, type CSSProperties, type ReactNode } from "react";
+
+import { cn } from "../../lib/utils/css";
+
+export interface AuroraTextProps {
+  children: ReactNode;
+  className?: string;
+  /**
+   * Gradient stops, cycled left→right and looped back to the first. The default
+   * is a vivid RGB set (pink → purple → blue → sky) chosen to stay legible on
+   * BOTH light and dark backgrounds — the text is painted with these colors
+   * (transparent fill + clipped gradient), so it never depends on the page bg.
+   */
+  colors?: string[];
+  /** Animation speed multiplier. 1 ≈ a 10s loop; 2 is twice as fast. */
+  speed?: number;
+  /** Add a soft, blurred RGB halo behind the text (a subtle aura). */
+  glow?: boolean;
+}
+
+const DEFAULT_COLORS = ["#FF0080", "#7928CA", "#0070F3", "#38bdf8"];
+
+/**
+ * Animated RGB gradient text: the gradient slowly sweeps across the glyphs on a
+ * loop (via `background-position`, so it's GPU-composited and cheap — safe on
+ * mobile). Purely CSS; no JS ticking. The real text is kept in an `sr-only`
+ * span so it stays selectable/announced while the visible layer is decorative.
+ *
+ * @example
+ * <AuroraText>Thinking</AuroraText>
+ * <AuroraText glow speed={1.4} colors={["#22d3ee", "#a855f7", "#f43f5e"]}>Live</AuroraText>
+ */
+export const AuroraText = memo(function AuroraText({
+  children,
+  className,
+  colors = DEFAULT_COLORS,
+  speed = 1,
+  glow = false,
+}: AuroraTextProps) {
+  const gradientStyle: CSSProperties = {
+    backgroundImage: `linear-gradient(135deg, ${colors.join(", ")}, ${colors[0]})`,
+    // Oversized so the sweep has room to travel before repeating.
+    backgroundSize: "200% auto",
+    WebkitBackgroundClip: "text",
+    backgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    color: "transparent",
+    animationDuration: `${10 / speed}s`,
+  };
+
+  return (
+    <span className={cn("relative inline-block", className)}>
+      {/* Accessible, copyable text; the colored layers below are decorative. */}
+      <span className="sr-only">{children}</span>
+      {glow ? (
+        <span
+          aria-hidden="true"
+          className="animate-aurora pointer-events-none absolute inset-0 select-none blur-[6px] opacity-60"
+          style={gradientStyle}
+        >
+          {children}
+        </span>
+      ) : null}
+      <span aria-hidden="true" className="animate-aurora relative" style={gradientStyle}>
+        {children}
+      </span>
+    </span>
+  );
+});
+
+AuroraText.displayName = "AuroraText";

package/src/index.ts

@@ -8,6 +8,7 @@ export * from "./components/ui/alert-dialog";
 export * from "./components/ui/animated-theme-toggler";
 export * from "./components/ui/app-store-buttons";
 export * from "./components/ui/aspect-ratio";
+export * from "./components/ui/aurora-text";
 export * from "./components/ui/autocomplete";
 export * from "./components/ui/avatar";
 export * from "./components/ui/avatar-group";

package/src/styles.css

@@ -17,6 +17,7 @@
 @theme inline {
   --animate-skeleton: skeleton 2s -1s infinite linear;
   --animate-qr-scan: qr-scan 2.6s ease-in-out infinite alternate;
+  --animate-aurora: aurora 10s ease infinite;
   --color-warning-foreground: var(--warning-foreground);
   --color-warning: var(--warning);
   --color-success-foreground: var(--success-foreground);
@@ -81,6 +82,16 @@
       transform: translateY(150%);
     }
   }
+  /* AuroraText: sweep the oversized gradient back and forth across the glyphs. */
+  @keyframes aurora {
+    0%,
+    100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+  }
   --font-sans: "DM Sans", sans-serif;
   --font-serif: "Fraunces", sans-serif;
 }