@meycult/core 0.1.0

package/src/unveil/effects.tsx

@@ -0,0 +1,200 @@
+'use client'
+
+/** MeyCult Unveil background effects — 4 canvas + 6 CSS layers. */
+import { useEffect, useRef } from 'react'
+
+export interface FxProps {
+  density?: number // 0-100
+  speed?: number // 0-2 multiplier
+  opacity?: number // 0-1 master
+}
+
+function reducedMotion(): boolean {
+  return (
+    typeof window !== 'undefined' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  )
+}
+
+/** Shared rAF canvas loop: DPR cap, resize, hidden-tab + offscreen pause. */
+function useCanvas(
+  ref: React.RefObject<HTMLCanvasElement | null>,
+  render: (ctx: CanvasRenderingContext2D, w: number, h: number, t: number) => void,
+  active: boolean,
+) {
+  useEffect(() => {
+    if (!active) return
+    const canvas = ref.current
+    if (!canvas || reducedMotion()) return
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+    let raf = 0
+    let w = 0
+    let h = 0
+    const resize = () => {
+      const dpr = Math.min(window.devicePixelRatio || 1, 1.5)
+      const rect = canvas.getBoundingClientRect()
+      w = Math.max(1, Math.floor(rect.width * dpr))
+      h = Math.max(1, Math.floor(rect.height * dpr))
+      canvas.width = w
+      canvas.height = h
+    }
+    resize()
+    const ro = new ResizeObserver(resize)
+    const parent = canvas.parentElement
+    if (parent) ro.observe(parent)
+    let visible = true
+    const io = new IntersectionObserver(([e]) => {
+      visible = e.isIntersecting
+      if (visible) last = performance.now()
+    })
+    io.observe(canvas)
+    let last = performance.now()
+    const loop = (t: number) => {
+      raf = requestAnimationFrame(loop)
+      if (!visible || document.hidden) {
+        last = t
+        return
+      }
+      void last
+      last = t
+      ctx.clearRect(0, 0, w, h)
+      render(ctx, w, h, t)
+    }
+    raf = requestAnimationFrame(loop)
+    return () => {
+      cancelAnimationFrame(raf)
+      ro.disconnect()
+      io.disconnect()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [active])
+}
+
+/**
+ * Old-Egypt / illuminati glyph ascension — all cult yellow. Authentic
+ * hieroglyphs via self-hosted 'Noto Sans Egyptian Hieroglyphs' (same
+ * pattern as New Rocker); serif fallback covers ☥/△/◉ everywhere.
+ */
+const GLYPH_FONT = `'"Noto Sans Egyptian Hieroglyphs", serif'`
+const GLYPHS = [
+  '𓂀', '𓂀', // Eye of Horus
+  '☥', '☥', // ankh — life
+  '△', // pyramid
+  '𓆣', // scarab
+  '𓅓', // owl
+  '𓇳', // sun
+  '𓊵', // djed pillar
+  '𓆙', // cobra
+  '𓆄', // feather
+  '◉', // the eye
+]
+
+export function RuneCanvas({ density = 50, speed = 0.6, opacity = 0.8 }: FxProps) {
+  const ref = useRef<HTMLCanvasElement>(null)
+  const parts = useRef(
+    Array.from({ length: 60 }, (_, i) => ({
+      x: Math.random(),
+      y: Math.random(),
+      vy: 0.0002 + Math.random() * 0.0006,
+      tw: Math.random() * Math.PI * 2,
+      size: 10 + Math.random() * 12,
+      glyph: GLYPHS[i % GLYPHS.length],
+    })),
+  )
+  useEffect(() => {
+    // ensure the hieroglyph webfont is ready before first glyphs drift in
+    try {
+      void document.fonts?.load(`64px ${GLYPH_FONT}`)
+    } catch {
+      /* serif fallback covers the safe subset */
+    }
+  }, [])
+  useCanvas(
+    ref,
+    (ctx, w, h, t) => {
+      const n = Math.floor((density / 100) * parts.current.length)
+      for (let i = 0; i < n; i++) {
+        const p = parts.current[i]
+        p.y -= p.vy * (0.4 + speed)
+        p.tw += 0.02 * (0.4 + speed)
+        if (p.y < -0.05) {
+          p.y = 1.05
+          p.x = Math.random()
+        }
+        const x = (p.x + Math.sin(p.tw) * 0.008) * w
+        const y = p.y * h
+        ctx.globalAlpha = (0.15 + 0.5 * Math.abs(Math.sin(p.tw))) * opacity
+        ctx.font = `${p.size}px ${GLYPH_FONT}`
+        ctx.fillStyle = '#FFE600'
+        ctx.fillText(p.glyph, x, y)
+      }
+      void t
+      ctx.globalAlpha = 1
+    },
+    true,
+  )
+  return <canvas ref={ref} className="mey-bg-canvas" aria-hidden="true" />
+}
+
+export function AshCanvas({ density = 50, speed = 0.5, opacity = 0.8 }: FxProps) {
+  const ref = useRef<HTMLCanvasElement>(null)
+  const parts = useRef(
+    Array.from({ length: 220 }, () => ({
+      x: Math.random(),
+      y: Math.random(),
+      life: 100 + Math.random() * 200,
+    })),
+  )
+  useCanvas(
+    ref,
+    (ctx, w, h, t) => {
+      // fade previous frame (destination-out keeps canvas transparent)
+      ctx.globalCompositeOperation = 'destination-out'
+      ctx.fillStyle = 'rgba(0,0,0,0.08)'
+      ctx.fillRect(0, 0, w, h)
+      ctx.globalCompositeOperation = 'source-over'
+      const n = Math.floor((density / 100) * parts.current.length)
+      const z = t * 0.0001 * (0.3 + speed)
+      for (let i = 0; i < n; i++) {
+        const p = parts.current[i]
+        const px = p.x * w
+        const py = p.y * h
+        const ang =
+          (Math.sin(px * 0.002 + z * 7) + Math.cos(py * 0.002 - z * 5)) * Math.PI
+        const nx = px + Math.cos(ang) * 2
+        const ny = py + Math.sin(ang) * 2
+        ctx.globalAlpha = 0.25 * opacity
+        ctx.strokeStyle = '#FFE600'
+        ctx.beginPath()
+        ctx.moveTo(px, py)
+        ctx.lineTo(nx, ny)
+        ctx.stroke()
+        p.x = (nx / w + 1) % 1
+        p.y = (ny / h + 1) % 1
+        if (--p.life <= 0) {
+          p.x = Math.random()
+          p.y = Math.random()
+          p.life = 200
+        }
+      }
+      ctx.globalAlpha = 1
+    },
+    true,
+  )
+  return <canvas ref={ref} className="mey-bg-canvas" aria-hidden="true" />
+}
+
+export function VeilFog({ opacity = 0.7 }: FxProps) {
+  return (
+    <div className="mey-veil" style={{ opacity }} aria-hidden="true">
+      <i />
+      <i />
+    </div>
+  )
+}
+
+
+export function BreathVignette() {
+  return <div className="mey-breath" aria-hidden="true" />
+}

package/src/unveil.ts

@@ -0,0 +1,78 @@
+/**
+ * MeyCult Unveil constants — single source of truth for the countdown.
+ * Target: Fri 25 Sept 2026, 20:00 SAST (Africa/Johannesburg, UTC+2, no DST).
+ * Overridable via NEXT_PUBLIC_UNVEIL_DATE (ISO with offset) for previews.
+ */
+
+export const UNVEIL_TZ = 'Africa/Johannesburg'
+
+export const UNVEIL_DEFAULT_ISO = '2026-09-25T20:00:00+02:00'
+
+/** Live window after T-0 before flipping to replay/ended state. */
+export const LIVE_WINDOW_MS = 3 * 3_600_000
+
+function resolveLaunchAt(): number {
+  const raw =
+    typeof process !== 'undefined'
+      ? process.env?.NEXT_PUBLIC_UNVEIL_DATE || process.env?.VITE_UNVEIL_DATE
+      : undefined
+  const t = Date.parse(raw || UNVEIL_DEFAULT_ISO)
+  return Number.isFinite(t) ? t : Date.parse(UNVEIL_DEFAULT_ISO)
+}
+
+export const UNVEIL_AT = resolveLaunchAt()
+
+export type UnveilPhase = 'countdown' | 'live' | 'ended'
+
+export function unveilPhase(now: number = Date.now()): UnveilPhase {
+  if (now < UNVEIL_AT) return 'countdown'
+  if (now < UNVEIL_AT + LIVE_WINDOW_MS) return 'live'
+  return 'ended'
+}
+
+/** "25 Sept 2026, 20:00 SAST" — always rendered in Unveil timezone (SAST). */
+export function unveilDayLabel(at: number = UNVEIL_AT): string {
+  return new Intl.DateTimeFormat('en-ZA', {
+    timeZone: UNVEIL_TZ,
+    weekday: 'short',
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  }).format(new Date(at))
+}
+
+/** Visitor-local rendering of the same instant. */
+export function unveilLocalLabel(at: number = UNVEIL_AT): string {
+  return new Intl.DateTimeFormat(undefined, {
+    day: 'numeric',
+    month: 'short',
+    hour: '2-digit',
+    minute: '2-digit',
+    timeZoneName: 'short',
+  }).format(new Date(at))
+}
+
+export interface CountdownParts {
+  days: number
+  hours: number
+  minutes: number
+  seconds: number
+  done: boolean
+}
+
+export function diffParts(target: number, now: number = Date.now()): CountdownParts {
+  const delta = target - now
+  if (delta <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0, done: true }
+  return {
+    days: Math.floor(delta / 86_400_000),
+    hours: Math.floor(delta / 3_600_000) % 24,
+    minutes: Math.floor(delta / 60_000) % 60,
+    seconds: Math.floor(delta / 1_000) % 60,
+    done: false,
+  }
+}
+
+export const pad2 = (n: number) => String(n).padStart(2, '0')