@meycult/core 0.1.0

package/src/styles/theme.css

@@ -0,0 +1,396 @@
+@import "tailwindcss";
+
+/* Self-hosted brand font — identical in Next.js and Vite, no next/font needed. */
+@font-face {
+  font-family: 'New Rocker';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/NewRocker-Regular.woff2') format('woff2');
+}
+
+/* Old-Egypt glyphs for the ascension background (subset: hieroglyph block). */
+@font-face {
+  font-family: 'Noto Sans Egyptian Hieroglyphs';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/NotoSansEgyptianHieroglyphs-Regular.woff2') format('woff2');
+}
+
+@theme {
+  --color-bg: #141003;
+  --color-surface: #171402;
+  --color-panel: rgba(26, 22, 3, 0.55);
+  --color-accent: #FFE600;
+  --color-accent-2: #FFF7A1;
+  --color-text: #FFF9DB;
+  --color-text-muted: rgba(255, 249, 219, 0.55);
+  --color-line: rgba(255, 230, 0, 0.18);
+  --color-yes: #FFE600;
+  --color-no: #e04a4a;
+  --color-yes-bg: rgba(255, 230, 0, 0.21);
+  --color-no-bg: rgba(224, 74, 74, 0.12);
+  --color-success: #FFE600;
+  --color-danger: #e04a4a;
+  --color-warning: #FF9D00;
+  --color-info: #FFE600;
+  --color-premium-400: #FFB000;
+  --color-premium-500: #9C7500;
+  --color-premium-600: #6B4E00;
+  --font-heading: "Rajdhani", sans-serif;
+  --font-body: "Space Grotesk", sans-serif;
+  --font-mono: "Space Mono", monospace;
+  --font-logo: "Chakra Petch", sans-serif;
+  --font-cult: "New Rocker", "Chakra Petch", sans-serif;
+  --radius: 4px;
+  --glow: 0 0 20px rgba(255, 230, 0, 0.18);
+}
+
+@layer base {
+  * {
+    border-color: var(--color-line);
+  }
+  body {
+    background: var(--color-bg);
+    color: var(--color-text);
+    font-family: var(--font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+@utility scrollbar-thin {
+  &::-webkit-scrollbar { width: 6px; height: 6px; }
+  &::-webkit-scrollbar-track { background: var(--color-surface); }
+  &::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 3px; }
+}
+
+@utility glass {
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+@utility glow-accent {
+  box-shadow: 0 0 20px color-mix(in srgb, var(--color-accent) 30%, transparent),
+              0 0 60px color-mix(in srgb, var(--color-accent) 10%, transparent);
+}
+
+@utility glow-premium {
+  box-shadow: 0 0 20px color-mix(in srgb, var(--color-premium-400) 30%, transparent),
+              0 0 60px color-mix(in srgb, var(--color-premium-500) 10%, transparent);
+}
+
+.landing-card {
+  position: relative;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 230, 0, 0.17);
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(24px) saturate(160%);
+  -webkit-backdrop-filter: blur(24px) saturate(160%);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25),
+              inset 0 1px 0 rgba(255, 255, 255, 0.06),
+              0 0 40px rgba(255, 230, 0, 0.17);
+}
+.landing-card > * {
+  position: relative;
+  z-index: 1;
+}
+
+.holo-grid {
+  position: relative;
+}
+
+.ui-label {
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  font-size: 10px;
+}
+
+.ui-num {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+h2 {
+  font-weight: 300;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  text-shadow: 0 0 12px var(--color-accent),
+               0 0 30px color-mix(in srgb, var(--color-accent) 50%, transparent);
+}
+
+@keyframes flow {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+
+.xp-fill {
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--color-accent) 20%, var(--color-bg)),
+    var(--color-accent),
+    var(--color-accent-2),
+    var(--color-accent)
+  );
+  background-size: 300% 100%;
+  animation: flow 3s ease infinite;
+}
+
+@keyframes virtueShimmer {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+
+.virtue-bar-fill {
+  background-size: 200% 100%;
+  animation: virtueShimmer 3s ease-in-out infinite;
+  transition: width 0.5s ease-out;
+}
+
+/* ── Corner Glow Blobs ── */
+.corner-glow {
+  position: fixed;
+  pointer-events: none;
+  z-index: 0;
+  border-radius: 50%;
+}
+
+.corner-glow--tl {
+  top: -25%;
+  left: -15%;
+  width: 70vw;
+  height: 70vh;
+  background: radial-gradient(circle, rgba(255, 230, 0, 0.22) 0%, transparent 65%);
+  filter: blur(55px);
+  animation: glowTL 18s ease-in-out infinite alternate;
+}
+
+.corner-glow--tr {
+  top: -12%;
+  right: -12%;
+  width: 40vw;
+  height: 40vh;
+  background: radial-gradient(circle, rgba(255, 230, 0, 0.17) 0%, transparent 65%);
+  filter: blur(55px);
+  animation: glowTR 20s ease-in-out 3s infinite alternate;
+}
+
+.corner-glow--bl {
+  bottom: -15%;
+  left: -12%;
+  width: 45vw;
+  height: 45vh;
+  background: radial-gradient(circle, rgba(255, 230, 0, 0.17) 0%, transparent 65%);
+  filter: blur(60px);
+  animation: glowBL 17s ease-in-out 6s infinite alternate;
+}
+
+.corner-glow--br {
+  bottom: -25%;
+  right: -15%;
+  width: 65vw;
+  height: 65vh;
+  background: radial-gradient(circle, rgba(255, 230, 0, 0.21) 0%, transparent 65%);
+  filter: blur(60px);
+  animation: glowBR 22s ease-in-out 9s infinite alternate;
+}
+
+.corner-glow--ct {
+  top: 30%;
+  left: 30%;
+  width: 50vw;
+  height: 50vh;
+  background: radial-gradient(circle, rgba(255, 230, 0, 0.11) 0%, transparent 75%);
+  filter: blur(55px);
+  animation: glowCT 25s ease-in-out 5s infinite alternate;
+}
+
+.corner-glow--cb {
+  bottom: -10%;
+  left: 20%;
+  width: 40vw;
+  height: 40vh;
+  background: radial-gradient(circle, rgba(255, 230, 0, 0.14) 0%, transparent 70%);
+  filter: blur(65px);
+  animation: glowCB 23s ease-in-out 7s infinite alternate;
+}
+
+@keyframes glowTL {
+  0%   { opacity: 0.35; transform: translate(-10vw, -5vh) scale(0.9); }
+  25%  { opacity: 0.9; transform: translate(25vw, 15vh) scale(1.25); }
+  50%  { opacity: 0.5; transform: translate(-15vw, 30vh) scale(1.0); }
+  75%  { opacity: 0.85; transform: translate(20vw, -10vh) scale(1.3); }
+  100% { opacity: 0.35; transform: translate(-10vw, -5vh) scale(0.9); }
+}
+@keyframes glowTR {
+  0%   { opacity: 0.3; transform: translate(5vw, -10vh) scale(1.05); }
+  25%  { opacity: 0.8; transform: translate(-30vw, 10vh) scale(0.75); }
+  50%  { opacity: 0.45; transform: translate(10vw, 25vh) scale(1.1); }
+  75%  { opacity: 0.85; transform: translate(-20vw, -15vh) scale(0.8); }
+  100% { opacity: 0.3; transform: translate(5vw, -10vh) scale(1.05); }
+}
+@keyframes glowBL {
+  0%   { opacity: 0.4; transform: translate(-5vw, 15vh) scale(0.85); }
+  25%  { opacity: 0.85; transform: translate(25vw, -20vh) scale(1.2); }
+  50%  { opacity: 0.5; transform: translate(-20vw, 10vh) scale(0.9); }
+  75%  { opacity: 0.8; transform: translate(15vw, 20vh) scale(1.15); }
+  100% { opacity: 0.4; transform: translate(-5vw, 15vh) scale(0.85); }
+}
+@keyframes glowBR {
+  0%   { opacity: 0.35; transform: translate(10vw, 10vh) scale(1.1); }
+  25%  { opacity: 0.85; transform: translate(-25vw, -20vh) scale(0.8); }
+  50%  { opacity: 0.5; transform: translate(15vw, -15vh) scale(1.2); }
+  75%  { opacity: 0.9; transform: translate(-10vw, 20vh) scale(0.85); }
+  100% { opacity: 0.35; transform: translate(10vw, 10vh) scale(1.1); }
+}
+@keyframes glowCT {
+  0%   { opacity: 0.25; transform: translate(-20vw, 5vh) scale(0.9); }
+  25%  { opacity: 0.7; transform: translate(15vw, -15vh) scale(1.2); }
+  50%  { opacity: 0.35; transform: translate(-10vw, 20vh) scale(1.0); }
+  75%  { opacity: 0.65; transform: translate(20vw, 10vh) scale(1.15); }
+  100% { opacity: 0.25; transform: translate(-20vw, 5vh) scale(0.9); }
+}
+@keyframes glowCB {
+  0%   { opacity: 0.35; transform: translate(0, 0) scale(0.9); }
+  25%  { opacity: 0.8; transform: translate(-10vw, -8vh) scale(1.1); }
+  50%  { opacity: 0.45; transform: translate(8vw, -12vh) scale(0.95); }
+  75%  { opacity: 0.75; transform: translate(-6vw, -4vh) scale(1.15); }
+  100% { opacity: 0.35; transform: translate(0, 0) scale(0.9); }
+}
+
+/* ── Section Layout ── */
+.section {
+  position: relative;
+  z-index: 10;
+  padding: 6rem 1.5rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section--hero {
+  padding-top: 10rem;
+  padding-bottom: 8rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  text-align: center;
+}
+
+@media (max-width: 640px) {
+  .section--hero {
+    padding-top: 3rem;
+    padding-bottom: 4rem;
+    min-height: auto;
+  }
+}
+
+.section-title {
+  font-family: var(--font-heading);
+  font-weight: 300;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+  text-shadow: 0 0 12px var(--color-accent), 0 0 30px color-mix(in srgb, var(--color-accent) 50%, transparent);
+}
+
+/* ── Brand: "Mey" — ALWAYS Chakra Petch, never themed, all projects ── */
+.brand-mey {
+  font-family: 'Chakra Petch', sans-serif;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+/* ── Brand: "Cult" in MeyCult — New Rocker ── */
+.brand-cult {
+  font-family: var(--font-cult), var(--font-logo), sans-serif;
+  font-size: 1.10em; /* relative to Mey */
+  margin-left: -0.04em; /* gap Mey → Cult */
+  letter-spacing: -0.01em; /* gaps between Cult letters */
+  color: var(--color-accent);
+}
+
+/* ── Brand: "Unveil" in MeyCult Unveil — New Rocker, no glow ── */
+.brand-unveil {
+  font-family: var(--font-cult), var(--font-logo), sans-serif;
+  letter-spacing: 0.02em;
+  color: var(--color-accent);
+}
+
+/* ── Light glow behind Unveil, same treatment as MeyCult wordmark ── */
+.unveil-glow {
+  text-shadow:
+    0 0 40px rgba(255, 255, 255, 0.35),
+    0 0 80px rgba(255, 255, 255, 0.15),
+    0 0 120px rgba(255, 255, 255, 0.08);
+}
+
+/* ── Unveil tablet: yellow stone, engraved glyph frieze ── */
+.tablet-panel {
+  position: relative;
+  border-radius: 18px;
+  border: 2px solid rgba(255, 230, 0, 0.35);
+  background: linear-gradient(180deg, #2a2003 0%, #171402 100%);
+  box-shadow:
+    inset 0 2px 24px rgba(0, 0, 0, 0.65),
+    inset 0 -1px 0 rgba(255, 247, 161, 0.18),
+    0 0 60px rgba(255, 230, 0, 0.25);
+  padding: 2rem 1.5rem;
+}
+@media (min-width: 640px) {
+  .tablet-panel { padding: 3rem 3.5rem; }
+}
+.tablet-frieze {
+  font-family: 'Noto Sans Egyptian Hieroglyphs', serif;
+  font-size: 1.15rem;
+  letter-spacing: 0.35em;
+  white-space: nowrap;
+  overflow: hidden;
+  user-select: none;
+  color: #6b5d00;
+  text-shadow:
+    0 -1px 0 rgba(255, 247, 161, 0.35),
+    0 1px 1px rgba(0, 0, 0, 0.8);
+}
+.tablet-frieze--top { margin-bottom: 1.5rem; }
+.tablet-frieze--bottom { margin-top: 1.5rem; }
+
+.section-subtitle {
+  color: var(--color-text-muted);
+  font-size: 0.95rem;
+  margin-bottom: 3rem;
+  text-align: center;
+}
+
+.table-glass {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.table-glass th {
+  text-align: left;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--color-text-muted);
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--color-line);
+}
+
+.table-glass td {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid rgba(255, 230, 0, 0.17);
+  font-size: 0.875rem;
+}
+
+.table-glass tr:last-child td {
+  border-bottom: none;
+}

package/src/supabase/browser.ts

@@ -0,0 +1,103 @@
+import { createClient, type SupabaseClient } from '@supabase/supabase-js'
+
+export interface BrowserEnv {
+  url: string
+  anonKey: string
+}
+
+/**
+ * Chunked cookie storage — shares the session across subdomains
+ * (e.g. app.meycult.com + shop.meycult.com via domain=.meycult.com)
+ * while staying under the ~4KB cookie limit.
+ */
+export function chunkedCookieStorage(
+  storageKey: string,
+  cookieDomain: string | null,
+  chunkSize = 3200,
+): Pick<Storage, 'getItem' | 'setItem' | 'removeItem'> {
+  const domainAttr = cookieDomain ? `; domain=${cookieDomain}` : ''
+
+  function readCookie(name: string): string | null {
+    if (typeof document === 'undefined') return null
+    const match = document.cookie.match(
+      new RegExp('(?:^|; )' + name.replace(/([.$?*|{}()[\]\\/+^])/g, '\\$1') + '=([^;]*)'),
+    )
+    return match ? decodeURIComponent(match[1]) : null
+  }
+
+  function writeCookie(name: string, value: string, maxAge = 60 * 60 * 24 * 30): void {
+    document.cookie = `${name}=${encodeURIComponent(value)}; path=/${domainAttr}; max-age=${maxAge}; SameSite=Lax; Secure`
+  }
+
+  function deleteCookie(name: string): void {
+    document.cookie = `${name}=; path=/${domainAttr}; max-age=0; SameSite=Lax; Secure`
+  }
+
+  function countKey(): string {
+    return `${storageKey}.n`
+  }
+
+  return {
+    getItem(key: string): string | null {
+      const count = readCookie(countKey())
+      if (count) {
+        let out = ''
+        for (let i = 0; i < Number(count); i++) out += readCookie(`${key}.${i}`) ?? ''
+        return out || null
+      }
+      return readCookie(key)
+    },
+    setItem(key: string, value: string): void {
+      const prev = readCookie(countKey())
+      if (prev) for (let i = 0; i < Number(prev); i++) deleteCookie(`${key}.${i}`)
+      deleteCookie(key)
+      if (value.length <= chunkSize) {
+        writeCookie(key, value)
+        deleteCookie(countKey())
+        return
+      }
+      const parts = Math.ceil(value.length / chunkSize)
+      for (let i = 0; i < parts; i++) writeCookie(`${key}.${i}`, value.slice(i * chunkSize, (i + 1) * chunkSize))
+      writeCookie(countKey(), String(parts))
+    },
+    removeItem(key: string): void {
+      const count = readCookie(countKey())
+      if (count) for (let i = 0; i < Number(count); i++) deleteCookie(`${key}.${i}`)
+      deleteCookie(countKey())
+      deleteCookie(key)
+    },
+  }
+}
+
+export interface BrowserOptions extends BrowserEnv {
+  /** e.g. 'meycult-auth'. Defaults to 'meycult-auth'. */
+  storageKey?: string
+  /** e.g. '.meycult.com' on prod, null on localhost. Defaults to hostname heuristic. */
+  cookieDomain?: string | null
+  detectSessionInUrl?: boolean
+}
+
+function defaultCookieDomain(): string | null {
+  if (typeof window === 'undefined') return null
+  return window.location.hostname.endsWith('meycult.com') ? '.meycult.com' : null
+}
+
+export function createSupabaseBrowser(options: BrowserOptions): SupabaseClient {
+  const {
+    url,
+    anonKey,
+    storageKey = 'meycult-auth',
+    cookieDomain = defaultCookieDomain(),
+    detectSessionInUrl = true,
+  } = options
+  const onDomain = cookieDomain !== null
+  return createClient(url, anonKey, {
+    auth: {
+      storageKey,
+      persistSession: true,
+      autoRefreshToken: true,
+      detectSessionInUrl,
+      ...(onDomain ? { storage: chunkedCookieStorage(storageKey, cookieDomain) } : {}),
+    },
+  })
+}

package/src/supabase/callback.ts

@@ -0,0 +1,15 @@
+import type { SupabaseClient } from '@supabase/supabase-js'
+
+/**
+ * OAuth callback helper — host route calls this with its server client,
+ * then redirects to `next` (default '/').
+ */
+export async function exchangeCodeForSession(
+  supabase: SupabaseClient,
+  code: string | null,
+  next = '/',
+): Promise<{ next: string; error: string | null }> {
+  if (!code) return { next, error: 'missing_code' }
+  const { error } = await supabase.auth.exchangeCodeForSession(code)
+  return { next, error: error ? error.message : null }
+}

package/src/supabase/proxy.ts

@@ -0,0 +1,36 @@
+import { createServerClient } from '@supabase/ssr'
+import { NextResponse, type NextRequest } from 'next/server'
+
+/**
+ * Refresh the Supabase session on every request so Server Components
+ * always see a valid token. Wire into the host's proxy.ts:
+ *   export default coreUpdateSession as middleware-style default export
+ */
+export async function updateSession(request: NextRequest) {
+  let supabaseResponse = NextResponse.next({ request })
+
+  const supabase = createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return request.cookies.getAll()
+        },
+        setAll(
+          cookiesToSet: { name: string; value: string; options?: Record<string, unknown> }[],
+        ) {
+          cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value))
+          supabaseResponse = NextResponse.next({ request })
+          cookiesToSet.forEach(({ name, value, options }) =>
+            supabaseResponse.cookies.set(name, value, options),
+          )
+        },
+      },
+    },
+  )
+
+  await supabase.auth.getClaims()
+
+  return supabaseResponse
+}

package/src/supabase/server.ts

@@ -0,0 +1,31 @@
+import { createServerClient } from '@supabase/ssr'
+import { cookies } from 'next/headers'
+
+/** Next.js Server Component / Route Handler / Server Action client. */
+export async function createSupabaseServerClient() {
+  const cookieStore = await cookies()
+
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll()
+        },
+        setAll(
+          cookiesToSet: { name: string; value: string; options?: Record<string, unknown> }[],
+        ) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, options),
+            )
+          } catch {
+            // Called from a Server Component — read-only there.
+            // The proxy refreshes sessions on every request.
+          }
+        },
+      },
+    },
+  )
+}

package/src/tokens.ts

@@ -0,0 +1,37 @@
+// TS mirror of src/styles/theme.css @theme tokens — for canvas/tests/Node use.
+
+export const COLORS = {
+  bg: '#0B0A02',
+  surface: '#171402',
+  panel: 'rgba(26, 22, 3, 0.55)',
+  accent: '#FFE600',
+  accent2: '#FFF7A1',
+  text: '#FFF9DB',
+  textMuted: 'rgba(255, 249, 219, 0.55)',
+  line: 'rgba(255, 230, 0, 0.18)',
+  yes: '#FFE600',
+  no: '#e04a4a',
+  yesBg: 'rgba(255, 230, 0, 0.08)',
+  noBg: 'rgba(224, 74, 74, 0.12)',
+  success: '#FFE600',
+  danger: '#e04a4a',
+  warning: '#FF9D00',
+  info: '#FFE600',
+  premium400: '#FFB000',
+  premium500: '#9C7500',
+  premium600: '#6B4E00',
+} as const
+
+export const GLOW = {
+  text: '0 0 20px rgba(255, 230, 0, 0.18)',
+  brandCult:
+    '0 0 40px rgba(255,230,0,0.35), 0 0 80px rgba(255,230,0,0.18), 0 0 120px rgba(255,230,0,0.08)',
+} as const
+
+export const FONTS = {
+  heading: 'Rajdhani, sans-serif',
+  body: '"Space Grotesk", sans-serif',
+  mono: '"Space Mono", monospace',
+  logo: '"Chakra Petch", sans-serif',
+  cult: '"New Rocker", "Chakra Petch", sans-serif',
+} as const

package/src/ui/Callout.tsx

@@ -0,0 +1,33 @@
+import { AlertTriangle, CheckCircle, Info } from "lucide-react";
+
+type CalloutType = "info" | "warning" | "success" | "danger";
+
+const icons: Record<CalloutType, React.ReactNode> = {
+  info: <Info className="h-5 w-5" />,
+  warning: <AlertTriangle className="h-5 w-5" />,
+  success: <CheckCircle className="h-5 w-5" />,
+  danger: <AlertTriangle className="h-5 w-5" />,
+};
+
+const styles: Record<CalloutType, string> = {
+  info: "border-accent bg-accent/10 text-text",
+  warning: "border-amber-500 bg-amber-950/30 text-amber-100",
+  success: "border-green-500 bg-green-950/30 text-green-100",
+  danger: "border-red-500 bg-red-950/30 text-red-100",
+};
+
+interface CalloutProps {
+  type?: CalloutType;
+  children: React.ReactNode;
+}
+
+export function Callout({ type = "info", children }: CalloutProps) {
+  return (
+    <div className={`my-6 rounded-lg border-l-4 p-4 not-prose ${styles[type]}`}>
+      <div className="flex items-start gap-3">
+        <span className="mt-0.5">{icons[type]}</span>
+        <div className="[&>p]:m-0">{children}</div>
+      </div>
+    </div>
+  );
+}

package/src/ui/animated-shiny-text.tsx

@@ -0,0 +1,42 @@
+import { type ComponentPropsWithoutRef, type CSSProperties, type FC } from "react";
+
+import { cn } from "../cn";
+
+export interface AnimatedShinyTextProps extends ComponentPropsWithoutRef<"span"> {
+  shimmerWidth?: number;
+  gradientFrom?: string;
+  gradientVia?: string;
+  gradientTo?: string;
+}
+
+export const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({
+  children,
+  className,
+  shimmerWidth = 100,
+  gradientFrom = "transparent",
+  gradientVia = "rgba(124,255,46,0.65)",
+  gradientTo = "transparent",
+  ...props
+}) => {
+  return (
+    <span
+      style={
+        {
+          "--shiny-width": `${shimmerWidth}px`,
+          backgroundImage: `linear-gradient(to right, ${gradientFrom}, ${gradientVia}, ${gradientTo})`,
+        } as CSSProperties
+      }
+      className={cn(
+        "mx-auto max-w-md",
+        "text-neutral-600/70 dark:text-neutral-400/70",
+        "animate-shiny-text bg-clip-text bg-no-repeat",
+        "[background-size:var(--shiny-width)_100%]",
+        "[transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+};