@meycult/core 0.1.0

package/src/ui/card.tsx

@@ -0,0 +1,102 @@
+import * as React from "react"
+import { cn } from "../cn"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-(--card-spacing)", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/ui/shimmer-button.tsx

@@ -0,0 +1,81 @@
+import React, { type ComponentPropsWithoutRef, type CSSProperties } from "react";
+
+import { cn } from "../cn";
+
+export interface ShimmerButtonProps extends ComponentPropsWithoutRef<"button"> {
+  shimmerColor?: string;
+  shimmerSize?: string;
+  borderRadius?: string;
+  shimmerDuration?: string;
+  background?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
+  (
+    {
+      shimmerColor = "#b6ff7a",
+      shimmerSize = "0.05em",
+      shimmerDuration = "3s",
+      borderRadius = "100px",
+      background = "rgba(4, 16, 7, 1)",
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        style={
+          {
+            "--spread": "90deg",
+            "--shimmer-color": shimmerColor,
+            "--radius": borderRadius,
+            "--speed": shimmerDuration,
+            "--cut": shimmerSize,
+            "--bg": background,
+          } as CSSProperties
+        }
+        className={cn(
+          "group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden [border-radius:var(--radius)] border border-white/10 px-6 py-3 whitespace-nowrap text-white [background:var(--bg)]",
+          "transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      >
+        <div
+          className={cn(
+            "-z-30 blur-[2px]",
+            "[container-type:size] absolute inset-0 overflow-visible",
+          )}
+        >
+          <div className="animate-shimmer-slide absolute inset-0 [aspect-ratio:1] h-[100cqh] [border-radius:0] [mask:none]">
+            <div className="animate-spin-around absolute -inset-full w-auto [translate:0_0] rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))]" />
+          </div>
+        </div>
+        {children}
+
+        <div
+          className={cn(
+            "absolute inset-0 size-full",
+            "rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]",
+            "transform-gpu transition-all duration-300 ease-in-out",
+            "group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]",
+            "group-active:shadow-[inset_0_-10px_10px_#ffffff3f]",
+          )}
+        />
+
+        <div
+          className={cn(
+            "absolute [inset:var(--cut)] -z-20 [border-radius:var(--radius)] [background:var(--bg)]",
+          )}
+        />
+      </button>
+    );
+  },
+);
+
+ShimmerButton.displayName = "ShimmerButton";

package/src/unveil/LaunchStage.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+/** Fixed ambient stage behind the Unveil countdown. Kept set only. */
+import { useEffect } from 'react'
+import { GrainVeil } from '@meyvoid/core/backgrounds'
+import { BG_STYLES } from './bgStyles'
+import { parseBgQuery, useUnveilBg } from './bg'
+import { AshCanvas, BreathVignette, RuneCanvas, VeilFog } from './effects'
+
+export function LaunchStage() {
+  const { effects, density, speed, opacity, grain, setMany } = useUnveilBg()
+
+  useEffect(() => {
+    useUnveilBg.persist.rehydrate()
+    const next = parseBgQuery(window.location.search)
+    if (next) setMany(next)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const fx = { density, speed, opacity }
+
+  return (
+    <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden" aria-hidden="true">
+      <style>{BG_STYLES}</style>
+      {effects.includes('veil') && <VeilFog opacity={opacity} />}
+      {effects.includes('ash') && <AshCanvas {...fx} />}
+      {effects.includes('runes') && <RuneCanvas {...fx} />}
+      {effects.includes('breath') && <BreathVignette />}
+      {grain && <GrainVeil />}
+    </div>
+  )
+}

package/src/unveil/Tablet.tsx

@@ -0,0 +1,23 @@
+/**
+ * TabletPanel — yellow engraved tablet enclosing Unveil details.
+ * Dark bronze body, gold border, engraved hieroglyph frieze top + bottom
+ * (letterpress technique: darker-than-surface glyphs, light up-left edge).
+ */
+import type { ReactNode } from 'react'
+
+const FRIEZE =
+  '𓂀 𓆣 𓅓 𓇳 𓊵 𓆙 𓆄 ☥ △ ◉ 𓂀 𓆣 𓅓 𓇳 𓊵 𓆙 𓆄 ☥ △ ◉ 𓂀 𓆣 𓅓 𓇳 𓊵 𓆙 𓆄 ☥ △ ◉'
+
+export function TabletPanel({ children }: { children: ReactNode }) {
+  return (
+    <div className="tablet-panel">
+      <div className="tablet-frieze tablet-frieze--top" aria-hidden="true">
+        {FRIEZE}
+      </div>
+      {children}
+      <div className="tablet-frieze tablet-frieze--bottom" aria-hidden="true">
+        {FRIEZE}
+      </div>
+    </div>
+  )
+}

package/src/unveil/bg.ts

@@ -0,0 +1,59 @@
+/**
+ * MeyCult Unveil background state. Kept set: glyphs, veil, ash, breath.
+ * The six retired layers live in @meyvoid/core backgrounds for reuse.
+ */
+import { createPersistStore } from '../lib/store'
+
+export type BgEffect = 'runes' | 'veil' | 'ash' | 'breath'
+
+export const BG_EFFECTS: Array<{ id: BgEffect; label: string }> = [
+  { id: 'runes', label: 'Egyptian Glyphs' },
+  { id: 'veil', label: 'Veil Fog' },
+  { id: 'ash', label: 'Ash Flow-Field' },
+  { id: 'breath', label: 'Breath Vignette' },
+]
+
+export const BG_DEFAULTS: BgEffect[] = ['runes', 'veil', 'ash', 'breath']
+
+interface BgState {
+  effects: BgEffect[]
+  density: number // 0-100
+  speed: number // 0-2
+  opacity: number // 0-1
+  grain: boolean
+  toggle: (e: BgEffect) => void
+  setMany: (e: BgEffect[]) => void
+  set: (p: Partial<Pick<BgState, 'density' | 'speed' | 'opacity' | 'grain'>>) => void
+  reset: () => void
+}
+
+export const useUnveilBg = createPersistStore<BgState>(
+  'meycult-unveil-bg-v1',
+  1,
+  (set) => ({
+    effects: BG_DEFAULTS,
+    density: 50,
+    speed: 0.6,
+    opacity: 0.8,
+    grain: true,
+    toggle: (e) =>
+      set((s) => ({
+        effects: s.effects.includes(e)
+          ? s.effects.filter((x) => x !== e)
+          : [...s.effects, e],
+      })),
+    setMany: (effects) => set({ effects }),
+    set: (p) => set(p),
+    reset: () =>
+      set({ effects: BG_DEFAULTS, density: 50, speed: 0.6, opacity: 0.8, grain: true }),
+  }),
+)
+
+/** Read-only ?bg=veil,runes share param (applied once on mount). */
+export function parseBgQuery(search: string): BgEffect[] | null {
+  const m = new URLSearchParams(search).get('bg')
+  if (!m) return null
+  const ids = m.split(',').map((s) => s.trim()) as BgEffect[]
+  const valid = ids.filter((id) => BG_EFFECTS.some((e) => e.id === id))
+  return valid.length ? valid : null
+}

package/src/unveil/bgStyles.ts

@@ -0,0 +1,13 @@
+/** CSS-only Unveil background layers (injected via <style> by LaunchStage).
+ * Kept set: glyphs canvas, veil fog, ash flow, breath vignette. The six
+ * retired layers live in @meyvoid/core backgrounds for future reuse. */
+export const BG_STYLES = `
+.mey-veil{position:absolute;inset:auto 0 0 0;height:44vh;filter:blur(60px);pointer-events:none}
+.mey-veil i{position:absolute;width:55vw;height:22vh;border-radius:50%;background:radial-gradient(closest-side,rgba(255,230,0,.16),transparent 70%)}
+.mey-veil i:nth-child(2){background:radial-gradient(closest-side,rgba(255,230,0,.18),transparent 70%);animation:mey-veil-drift 38s ease-in-out infinite alternate}
+@keyframes mey-veil-drift{from{transform:translateX(-8vw)}to{transform:translateX(8vw)}}
+.mey-breath{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 180px 60px rgba(0,0,0,.75);animation:mey-breath 7s ease-in-out infinite}
+@keyframes mey-breath{50%{box-shadow:inset 0 0 240px 90px rgba(0,0,0,.9)}}
+.mey-bg-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
+@media (prefers-reduced-motion:reduce){.mey-veil i:nth-child(2),.mey-breath{animation:none}}
+`

package/src/unveil/blocks.tsx

@@ -0,0 +1,199 @@
+'use client'
+
+/**
+ * Unveil page blocks — MeyGod festival anatomy in cult tokens:
+ * hero (eye + countdown), where/when (map), cards, hype+QR, notify.
+ */
+import type { ReactNode } from 'react'
+import { MeyQR } from '@meyvoid/core/qr'
+import CultEye from '../brand/CultEye'
+import { CultCountdown } from '../components/CultCountdown'
+import { UNVEIL_AT, unveilDayLabel, unveilLocalLabel } from '../unveil'
+
+export function UnveilHero() {
+  return (
+    <section className="section section--hero">
+      <a href="/unveil/countdown" aria-label="Open the full-page countdown" data-testid="unveil-sigil">
+        <div className="w-[200px] sm:w-[280px]">
+          <CultEye fluid />
+        </div>
+      </a>
+
+      <div className="mt-2 flex flex-col items-center leading-none">
+        <span className="text-6xl sm:text-7xl font-bold tracking-wider">
+          <span className="brand-mey">Mey</span>
+          <span className="brand-cult">Cult</span>
+        </span>
+        <span className="brand-unveil unveil-glow mt-1 text-5xl sm:text-6xl">Unveil</span>
+      </div>
+      <p className="mt-3 text-sm text-text-muted tracking-wide">
+        {unveilDayLabel(UNVEIL_AT)} SAST · Stellenbosch
+      </p>
+      <p className="text-xs text-text-muted">{unveilLocalLabel(UNVEIL_AT)} your time</p>
+
+      <div className="mt-8 w-full max-w-2xl">
+        <CultCountdown />
+      </div>
+      <p className="mt-3 text-xs text-text-muted">Touch the sigil for the full-page countdown.</p>
+
+      <div className="mt-8 flex flex-wrap justify-center gap-3">
+        <a
+          className="px-6 py-2.5 rounded-lg bg-accent text-bg font-bold text-sm uppercase tracking-wider"
+          href="/#crowdfunding"
+        >
+          Notify me
+        </a>
+        <a
+          className="px-6 py-2.5 rounded-lg border border-line/40 text-sm uppercase tracking-wider text-text"
+          href="/unveil/countdown"
+        >
+          Full countdown
+        </a>
+      </div>
+    </section>
+  )
+}
+
+export interface WhereWhenProps {
+  venue?: string
+  city?: string
+  mapsUrl?: string
+  footnote?: string
+  map?: { src: string; alt: string }
+}
+
+export function WhereWhen({
+  venue = 'Venue TBA — Stellenbosch',
+  city = 'Stellenbosch, Western Cape',
+  mapsUrl,
+  footnote = 'Doors 19:30. Free to attend. Bring a friend; leave as Cult.',
+  map,
+}: WhereWhenProps) {
+  const href =
+    mapsUrl ?? 'https://www.google.com/maps/search/?api=1&query=-33.9347,18.8607'
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-[2fr_1fr] gap-8 sm:gap-12 items-center">
+      <div className="justify-self-start w-full">
+        {map ? (
+          <a href={href} target="_blank" rel="noreferrer" className="block w-full group">
+            <div
+              className="w-full aspect-[2/1] overflow-hidden rounded-xl transition-transform duration-300 group-hover:scale-[1.02]"
+              style={{ border: '1px solid rgba(255,230,0,0.18)', boxShadow: '0 0 40px rgba(255,230,0,0.12)' }}
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={map.src} alt={map.alt} className="w-full h-full object-cover" />
+            </div>
+            <p className="mt-2 text-[10px] uppercase tracking-[0.25em] text-text-muted/60 text-center">
+              © OpenStreetMap contributors
+            </p>
+          </a>
+        ) : (
+          <div
+            className="w-full aspect-[2/1] rounded-xl flex items-center justify-center"
+            style={{ border: '1px solid rgba(255,230,0,0.18)', background: 'rgba(0,0,0,0.3)' }}
+          >
+            <div className="w-[64px]">
+              <CultEye fluid />
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="text-center sm:text-right sm:border-l sm:border-dashed sm:pl-12 justify-self-end w-full border-line">
+        <h2 className="section-title" style={{ fontSize: '1.875rem', letterSpacing: '0.08em' }}>
+          Where and When
+        </h2>
+        <div className="mt-4 text-sm sm:text-base tracking-[0.2em] text-accent" style={{ fontFamily: 'var(--font-heading)' }}>
+          {unveilDayLabel(UNVEIL_AT).toUpperCase()}
+        </div>
+        <div className="mt-1 text-base sm:text-lg text-text font-medium">{venue}</div>
+        <div className="text-sm text-text-muted">{city}</div>
+        <div className="mt-4 text-[10px] uppercase tracking-[0.35em] text-text-muted">The Hour</div>
+        <div className="mt-0.5 text-4xl sm:text-5xl font-bold leading-none text-text" style={{ fontFamily: 'var(--font-heading)' }}>
+          20:00
+        </div>
+        {footnote && <p className="mt-4 text-xs sm:text-sm text-text-muted italic leading-relaxed">{footnote}</p>}
+      </div>
+    </div>
+  )
+}
+
+export interface UnveilCard {
+  title: ReactNode
+  body: string
+}
+
+export function CardGrid({ cards, cols = 3 }: { cards: UnveilCard[]; cols?: 2 | 3 }) {
+  const colCls = cols === 2 ? 'md:grid-cols-2' : 'md:grid-cols-2 lg:grid-cols-3'
+  return (
+    <div className={`grid grid-cols-1 ${colCls} gap-3 max-w-3xl mx-auto`}>
+      {cards.map((c, i) => (
+        <div key={i} className="landing-card p-4 text-center">
+          <h3 className="text-sm font-bold text-text uppercase tracking-wider" style={{ fontFamily: 'var(--font-heading)' }}>
+            {c.title}
+          </h3>
+          <p className="text-[11px] text-text-muted mt-1 leading-relaxed">{c.body}</p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function HypeRow({ qrUrl }: { qrUrl: string }) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-[2fr_1fr] gap-8 items-center max-w-3xl mx-auto">
+      <div>
+        <h2 className="section-title">What is the Unveil?</h2>
+        <p className="text-text-muted text-sm sm:text-base leading-relaxed">
+          The first <span className="text-text font-semibold">playable prophecy market</span>. Not
+          watching — <span className="text-text font-semibold">playing</span>. Quests seeded hourly,
+          dual tokens, heroes that level as you wager. On stage in Stellenbosch, live on YouTube —
+          then in your pocket.
+        </p>
+        <p className="text-text-muted text-xs sm:text-sm leading-relaxed mt-3">
+          Free to play. Real USDC cash-out. Sweepstakes-legal.
+        </p>
+        <div className="mt-4 flex flex-wrap gap-3">
+          <a className="px-6 py-2.5 rounded-lg bg-accent text-bg font-bold text-sm uppercase tracking-wider" href="/#crowdfunding">
+            Get notified
+          </a>
+          <a className="px-6 py-2.5 rounded-lg border border-line/40 text-sm uppercase tracking-wider text-text" href="/whitepaper">
+            Read the whitepaper
+          </a>
+        </div>
+      </div>
+      <div className="justify-self-center w-[180px]">
+        <MeyQR
+          url={qrUrl}
+          brand="cult"
+          fg="#ffffff"
+          accent="#FFE600"
+          bg={null}
+          plaque="none"
+          style="styled"
+          size={180}
+          label="QR code — MeyCult Unveil"
+        />
+        <p className="mt-2 text-[10px] uppercase tracking-[0.25em] text-text-muted/60 text-center">
+          Pierce the veil
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export function NotifyPanel() {
+  return (
+    <div className="landing-card p-8 max-w-lg mx-auto text-center">
+      <p className="text-accent font-bold text-lg mb-2">Be there at 20:00.</p>
+      <p className="text-sm text-text-muted mb-6">
+        One email when the veil lifts. No spam. No password.
+      </p>
+      <a
+        className="inline-block px-6 py-2.5 rounded-lg bg-accent text-bg font-bold text-sm uppercase tracking-wider"
+        href="/#crowdfunding"
+      >
+        Join the list
+      </a>
+    </div>
+  )
+}