@wopr-network/platform-ui-core 1.0.0

package/src/components/landing/hero.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { TypingEffect } from "./typing-effect";
+
+export function Hero() {
+  return (
+    <section className="crt-scanlines relative min-h-[100dvh] flex flex-col items-center justify-center bg-background px-6 text-center overflow-hidden">
+      {/* Grid dot background */}
+      <div
+        className="animate-grid-drift pointer-events-none absolute inset-0 bg-[radial-gradient(#00FF4115_1px,transparent_1px)] bg-[size:24px_24px]"
+        style={{
+          maskImage: "radial-gradient(ellipse at center, black 40%, transparent 80%)",
+          WebkitMaskImage: "radial-gradient(ellipse at center, black 40%, transparent 80%)",
+        }}
+        aria-hidden="true"
+      />
+
+      {/* Radial glow pulse */}
+      <div
+        className="pointer-events-none absolute inset-0 flex items-center justify-center"
+        aria-hidden="true"
+      >
+        <div className="animate-gentle-pulse h-[600px] w-[600px] rounded-full bg-terminal/5 blur-[120px]" />
+      </div>
+
+      <div className="relative z-10 flex flex-col items-center">
+        <h1 className="max-w-4xl text-3xl font-bold leading-[1.1] tracking-tight text-foreground sm:text-5xl md:text-6xl lg:text-7xl">
+          <span className="sr-only">Shall we play a game?</span>
+          <span aria-hidden="true">
+            <TypingEffect text="Shall we play a game?" speed={40} />
+          </span>
+        </h1>
+
+        <p className="mt-8 max-w-2xl text-lg text-muted-foreground md:text-xl">
+          A $5/month supercomputer that runs your business. No really. We know because we run ours
+          on one.
+        </p>
+
+        <div className="mt-12 flex flex-col items-center gap-4 sm:flex-row">
+          <Button variant="terminal" size="lg" asChild>
+            <Link href="/signup">Get yours</Link>
+          </Button>
+        </div>
+
+        <span className="mt-4 text-sm text-muted-foreground">
+          Starting at $5/month. Less than Netflix.
+        </span>
+      </div>
+    </section>
+  );
+}

package/src/components/landing/landing-nav.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+import { brandName } from "@/lib/brand-config";
+
+export function LandingNav() {
+  return (
+    <nav className="fixed top-0 z-50 flex w-full items-center justify-between px-6 py-4">
+      <Link
+        href="/"
+        className="font-mono text-sm font-semibold text-terminal/60 transition-colors duration-150 hover:text-terminal"
+      >
+        {brandName()}
+      </Link>
+      <Link
+        href="/login"
+        className="font-mono text-sm text-terminal/60 underline underline-offset-4 transition-colors duration-150 hover:text-terminal"
+      >
+        Sign in
+      </Link>
+    </nav>
+  );
+}

package/src/components/landing/landing-page.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import Link from "next/link";
+import { useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { getBrandConfig, productName } from "@/lib/brand-config";
+import { LandingNav } from "./landing-nav";
+import { PortfolioChart } from "./portfolio-chart";
+import { StorySections } from "./story-sections";
+import { TerminalSequence } from "./terminal-sequence";
+
+function CtaBlock({ className }: { className?: string }) {
+  return (
+    <div className={`flex flex-col items-center ${className ?? ""}`}>
+      <Button variant="terminal" size="lg" asChild>
+        <Link href="/signup">Start for free</Link>
+      </Button>
+      <span className="mt-4 font-mono text-xs text-terminal/40">
+        Your {productName()} is waiting.
+      </span>
+    </div>
+  );
+}
+
+export function LandingPage() {
+  const milestoneRef = useRef<((label: string) => void) | null>(null);
+  const fadeStartRef = useRef<(() => void) | null>(null);
+
+  return (
+    <div className="bg-black font-mono">
+      <LandingNav />
+      {/* Hero — Terminal Animation */}
+      <div className="relative bg-black">
+        <PortfolioChart onMilestoneRef={milestoneRef} onFadeStartRef={fadeStartRef} />
+        <TerminalSequence
+          onMilestone={(label) => milestoneRef.current?.(label)}
+          onFadeStart={() => fadeStartRef.current?.()}
+        />
+        <div className="absolute bottom-12 left-1/2 z-30 -translate-x-1/2">
+          <CtaBlock />
+        </div>
+      </div>
+
+      {/* Story Sections */}
+      <div className="bg-black">
+        <StorySections />
+      </div>
+
+      {/* Bottom CTA — always visible (scrolled to) */}
+      <div className="bg-black">
+        <CtaBlock className="py-12" />
+      </div>
+
+      {/* Footer */}
+      <footer className="border-t border-terminal/10 bg-black px-4 py-12">
+        <div className="mx-auto flex max-w-2xl flex-col items-center gap-4">
+          <span className="font-mono text-sm font-semibold text-terminal/60">{productName()}</span>
+          <div className="flex gap-6 font-mono text-xs text-terminal/30">
+            <Link href="/privacy" className="underline underline-offset-4 hover:text-terminal/60">
+              Privacy
+            </Link>
+            <Link href="/terms" className="underline underline-offset-4 hover:text-terminal/60">
+              Terms
+            </Link>
+          </div>
+          <span className="font-mono text-xs text-terminal/20">{getBrandConfig().domain}</span>
+        </div>
+      </footer>
+    </div>
+  );
+}

package/src/components/landing/portfolio-chart.tsx

@@ -0,0 +1,349 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+
+interface PortfolioChartProps {
+  onMilestoneRef: React.RefObject<((label: string) => void) | null>;
+  onFadeStartRef: React.RefObject<(() => void) | null>;
+}
+
+const BUFFER_SIZE = 800;
+
+// Color stops: [milestone, r, g, b]
+const COLOR_STOPS: [number, number, number, number][] = [
+  [0, 0, 255, 65], // #00FF41 terminal green
+  [13, 245, 158, 11], // #F59E0B amber
+  [26, 239, 68, 68], // #EF4444 red
+  [39, 255, 255, 255], // #FFFFFF white
+];
+
+function lerpColor(a: [number, number, number], b: [number, number, number], t: number): string {
+  const r = Math.round(a[0] + (b[0] - a[0]) * t);
+  const g = Math.round(a[1] + (b[1] - a[1]) * t);
+  const bl = Math.round(a[2] + (b[2] - a[2]) * t);
+  return `rgb(${r},${g},${bl})`;
+}
+
+function getLineColor(milestoneCount: number, now: number): string {
+  // Pulsing phase — lerp between white and terminal green
+  if (milestoneCount >= 53) {
+    const t = Math.sin(now * 0.004 * Math.PI) * 0.5 + 0.5;
+    return lerpColor([255, 255, 255], [0, 255, 65], t);
+  }
+
+  // Find surrounding stops and lerp between them
+  for (let i = COLOR_STOPS.length - 1; i >= 0; i--) {
+    const [m, r, g, b] = COLOR_STOPS[i];
+    if (milestoneCount >= m) {
+      const next = COLOR_STOPS[i + 1];
+      if (!next) return `rgb(${r},${g},${b})`;
+      const [nm, nr, ng, nb] = next;
+      const t = (milestoneCount - m) / (nm - m);
+      // Ease in-out so the blend feels gradual, not linear
+      const ease = t * t * (3 - 2 * t);
+      return lerpColor([r, g, b], [nr, ng, nb], ease);
+    }
+  }
+  return `rgb(${COLOR_STOPS[0][1]},${COLOR_STOPS[0][2]},${COLOR_STOPS[0][3]})`;
+}
+
+// 1D value noise — smooth interpolation between a seeded lattice
+// Produces correlated, organic motion instead of frame-to-frame random spikes
+const NOISE_SIZE = 256;
+const noiseTable = new Float32Array(NOISE_SIZE + 1);
+for (let i = 0; i <= NOISE_SIZE; i++) noiseTable[i] = Math.random() * 2 - 1;
+
+function smoothNoise(x: number): number {
+  const xi = Math.floor(x);
+  const f = x - xi;
+  const u = f * f * (3 - 2 * f); // smoothstep
+  const i0 = ((xi % NOISE_SIZE) + NOISE_SIZE) % NOISE_SIZE;
+  const i1 = (i0 + 1) % NOISE_SIZE;
+  return noiseTable[i0] * (1 - u) + noiseTable[i1] * u;
+}
+
+interface MilestoneNode {
+  label: string;
+  t: number;
+  value: number;
+  born: number;
+  lifetime: number;
+  color: string; // birth color — retained even when line changes phase
+}
+
+export function PortfolioChart({ onMilestoneRef, onFadeStartRef }: PortfolioChartProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const stateRef = useRef({
+    points: new Float64Array(BUFFER_SIZE * 2), // interleaved [t0, v0, t1, v1, ...]
+    head: 0,
+    count: 0,
+    t: 0,
+    value: 0,
+    bias: 0.04,
+    milestoneCount: 0,
+    milestones: [] as MilestoneNode[],
+    lastTime: 0,
+    animId: 0,
+    // Anchor ratchets — one-way, can only move toward vertical/top
+    anchorX: 1.0, // fraction of w where current point renders (1.0 = right edge)
+    anchorTopFrac: 0.3, // fraction of yRange above current point (0 = current at top edge)
+    smoothedSlope: 0, // EMA of screen-space slope
+    smoothedValue: 0, // EMA of s.value — viewport anchor, eliminates noise jitter
+    // Set when terminal enters final-typing phase — drives the end fade
+    fadeStartTime: -1,
+  });
+
+  const handleMilestone = useCallback((label: string) => {
+    const s = stateRef.current;
+    const now = performance.now();
+    const color = getLineColor(s.milestoneCount, now);
+
+    s.milestoneCount++;
+    s.bias *= 1.18;
+
+    const lifetime = Math.max(2000, 4000 - s.milestoneCount * 25);
+
+    s.milestones.push({
+      t: s.t,
+      value: s.value,
+      born: now,
+      lifetime,
+      color, // freeze birth color
+      label,
+    });
+  }, []);
+
+  // Wire milestone ref
+  useEffect(() => {
+    if (onMilestoneRef && "current" in onMilestoneRef) {
+      (onMilestoneRef as React.MutableRefObject<((label: string) => void) | null>).current =
+        handleMilestone;
+    }
+    return () => {
+      if (onMilestoneRef && "current" in onMilestoneRef) {
+        (onMilestoneRef as React.MutableRefObject<((label: string) => void) | null>).current = null;
+      }
+    };
+  }, [handleMilestone, onMilestoneRef]);
+
+  // Wire fade-start ref — fires when terminal enters final-typing phase
+  useEffect(() => {
+    const ref = onFadeStartRef as React.MutableRefObject<(() => void) | null>;
+    ref.current = () => {
+      stateRef.current.fadeStartTime = performance.now();
+    };
+    return () => {
+      ref.current = null;
+    };
+  }, [onFadeStartRef]);
+
+  useEffect(() => {
+    // Reduced motion: skip entirely
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    if (mq.matches) return;
+
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // DPR-aware resize
+    const resize = () => {
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = window.innerWidth * dpr;
+      canvas.height = window.innerHeight * dpr;
+      canvas.style.width = `${window.innerWidth}px`;
+      canvas.style.height = `${window.innerHeight}px`;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    };
+    resize();
+    window.addEventListener("resize", resize);
+
+    const s = stateRef.current;
+    s.lastTime = performance.now();
+
+    const addPoint = (t: number, value: number) => {
+      const idx = s.head * 2;
+      s.points[idx] = t;
+      s.points[idx + 1] = value;
+      s.head = (s.head + 1) % BUFFER_SIZE;
+      if (s.count < BUFFER_SIZE) s.count++;
+    };
+
+    const tick = (now: number) => {
+      const rawDt = now - s.lastTime;
+      // Cap at 3 frames to prevent jumps on tab-switch
+      const dt = Math.min(rawDt, 50);
+      s.lastTime = now;
+
+      // Simulation steps (~16.67ms each)
+      const steps = Math.max(1, Math.round(dt / 16.67));
+      // Noise shrinks as bias grows — at high milestones the line is clearly going up
+      const noiseFactor = 1.2 * Math.max(0.1, 0.92 ** s.milestoneCount);
+      for (let i = 0; i < steps; i++) {
+        s.t += 1;
+        s.value += s.bias + smoothNoise(s.t * 0.07) * noiseFactor;
+        addPoint(s.t, s.value);
+      }
+
+      // Prune dead milestones
+      s.milestones = s.milestones.filter((m) => now - m.born < m.lifetime);
+
+      // --- Draw ---
+      const w = window.innerWidth;
+      const h = window.innerHeight;
+      ctx.clearRect(0, 0, w, h);
+
+      if (s.count < 2) {
+        s.animId = requestAnimationFrame(tick);
+        return;
+      }
+
+      // Smooth the viewport anchor — EMA tracks trend, not raw noise
+      // Faster at start (less history), slower as chart matures
+      const emaAlpha = Math.max(0.02, 0.15 - s.milestoneCount * 0.002);
+      s.smoothedValue =
+        s.count < 2 ? s.value : s.smoothedValue * (1 - emaAlpha) + s.value * emaAlpha;
+
+      // Viewport — zooms in gently early, then zooms WAY out as milestones accumulate
+      const yRange = 30 + s.milestoneCount * 8;
+      const xSpan =
+        s.milestoneCount < 30
+          ? Math.max(300, 500 - s.milestoneCount * 4)
+          : 380 + (s.milestoneCount - 30) * 150;
+      const xRight = s.t;
+      const xLeft = s.t - xSpan;
+
+      // Screen-space slope: how far up does the chart move per pixel of rightward travel?
+      const rawSlope = (s.bias * (h * xSpan)) / (w * yRange);
+      s.smoothedSlope = s.smoothedSlope * 0.95 + rawSlope * 0.05;
+
+      // slopeFactor: 0 = flat/horizontal, 1 = clearly vertical
+      const slopeFactor = Math.min(1, Math.max(0, (s.smoothedSlope - 0.8) / 2.2));
+
+      // One-way ratchets — can only move toward the vertical/top anchor, never back
+      const targetAnchorX = 1.0 - slopeFactor * 0.5;
+      const targetTopFrac = 0.3 * (1 - slopeFactor);
+      s.anchorX = Math.min(s.anchorX, targetAnchorX);
+      s.anchorTopFrac = Math.min(s.anchorTopFrac, targetTopFrac);
+
+      // Viewport derived from smoothed anchor — steady camera, line moves within it
+      const yTop = s.smoothedValue + yRange * s.anchorTopFrac;
+      const yBottom = s.smoothedValue - yRange * (1 - s.anchorTopFrac);
+
+      const toScreenX = (t: number) => ((t - xLeft) / (xRight - xLeft)) * (w * s.anchorX);
+      const toScreenY = (v: number) => ((yTop - v) / (yTop - yBottom)) * h;
+
+      // Collect visible screen points
+      const screenPoints: [number, number][] = [];
+      for (let i = 0; i < s.count; i++) {
+        const idx = ((s.head - s.count + i + BUFFER_SIZE) % BUFFER_SIZE) * 2;
+        const pt = s.points[idx];
+        const pv = s.points[idx + 1];
+        if (pt >= xLeft) {
+          screenPoints.push([toScreenX(pt), toScreenY(pv)]);
+        }
+      }
+
+      if (screenPoints.length < 2) {
+        s.animId = requestAnimationFrame(tick);
+        return;
+      }
+
+      const color = getLineColor(s.milestoneCount, now);
+
+      // End-of-sequence fade: triggered when terminal enters final-typing.
+      const FADE_DURATION = 2000; // ms
+      const lineAlpha =
+        s.fadeStartTime < 0 ? 1 : Math.max(0, 1 - (now - s.fadeStartTime) / FADE_DURATION);
+
+      if (lineAlpha > 0.01) {
+        // Layer 1: Bloom
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(screenPoints[0][0], screenPoints[0][1]);
+        for (let i = 1; i < screenPoints.length; i++) {
+          ctx.lineTo(screenPoints[i][0], screenPoints[i][1]);
+        }
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 6;
+        ctx.shadowColor = color;
+        ctx.shadowBlur = 20;
+        ctx.globalAlpha = 0.2 * lineAlpha;
+        ctx.lineCap = "round";
+        ctx.lineJoin = "round";
+        ctx.stroke();
+        ctx.restore();
+
+        // Layer 2: Sharp trace
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(screenPoints[0][0], screenPoints[0][1]);
+        for (let i = 1; i < screenPoints.length; i++) {
+          ctx.lineTo(screenPoints[i][0], screenPoints[i][1]);
+        }
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 1.5;
+        ctx.globalAlpha = 0.45 * lineAlpha;
+        ctx.lineCap = "round";
+        ctx.lineJoin = "round";
+        ctx.stroke();
+        ctx.restore();
+      }
+
+      // Milestone dots — also fade with lineAlpha
+      for (const m of s.milestones) {
+        const mx = toScreenX(m.t);
+        const my = toScreenY(m.value);
+        const age = (now - m.born) / m.lifetime;
+        const alpha = Math.max(0, 1 - age) * lineAlpha;
+
+        if (mx < -20 || my > h + 20 || alpha <= 0) continue;
+
+        const outerRadius = 40 + (1 - age) * 80;
+        const grad = ctx.createRadialGradient(mx, my, 0, mx, my, outerRadius);
+        grad.addColorStop(0, m.color);
+        grad.addColorStop(1, "transparent");
+
+        ctx.save();
+        ctx.globalAlpha = alpha;
+        ctx.fillStyle = grad;
+        ctx.beginPath();
+        ctx.arc(mx, my, outerRadius, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+
+        ctx.save();
+        ctx.globalAlpha = alpha;
+        ctx.fillStyle = m.color;
+        ctx.beginPath();
+        ctx.arc(mx, my, 12, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+
+        // Label — rendered centered below the dot, fades with the milestone
+        if (m.label) {
+          ctx.save();
+          ctx.globalAlpha = alpha * 0.85;
+          ctx.fillStyle = m.color;
+          ctx.font = "bold 18px 'JetBrains Mono', monospace";
+          ctx.textBaseline = "top";
+          ctx.textAlign = "center";
+          ctx.fillText(m.label, mx, my + 16);
+          ctx.restore();
+        }
+      }
+
+      s.animId = requestAnimationFrame(tick);
+    };
+
+    s.animId = requestAnimationFrame(tick);
+
+    return () => {
+      cancelAnimationFrame(s.animId);
+      window.removeEventListener("resize", resize);
+    };
+  }, []);
+
+  return <canvas ref={canvasRef} className="pointer-events-none absolute inset-0 z-[5]" />;
+}

package/src/components/landing/story-sections.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { productName } from "@/lib/brand-config";
+
+const stories = [
+  {
+    heading: "It works while you sleep.",
+    get body() {
+      return `Regina went to bed. Her ${productName()} found a gap in her university's AI law curriculum, drafted a new module, and had it in her inbox by 6am.`;
+    },
+  },
+  {
+    heading: "It doesn't quit when you do.",
+    get body() {
+      return `Alvin said "I'll finish the chapter tomorrow" for six years. His ${productName()} finished it while he was at dinner.`;
+    },
+  },
+  {
+    heading: "It runs the whole thing.",
+    get body() {
+      return `T hasn't hired anyone. His ${productName()} runs engineering, ops, and customer support. The commit history is the proof.`;
+    },
+  },
+];
+
+export function StorySections() {
+  return (
+    <section className="mx-auto max-w-2xl space-y-16 px-4 py-12 md:py-16">
+      {stories.map((story, i) => (
+        <motion.div
+          key={story.heading}
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.3 }}
+          transition={{
+            duration: 0.4,
+            delay: i * 0.05,
+            ease: "easeOut",
+          }}
+        >
+          <h2 className="font-mono text-lg font-bold text-terminal sm:text-xl">{story.heading}</h2>
+          <p className="mt-4 font-mono text-sm leading-relaxed text-terminal/60 sm:text-base">
+            {story.body}
+          </p>
+        </motion.div>
+      ))}
+    </section>
+  );
+}

package/src/components/landing/terminal-lines.ts

@@ -0,0 +1,99 @@
+import { productName } from "@/lib/brand-config";
+
+export interface TerminalLine {
+  text: string;
+  hold: boolean;
+}
+
+/** Static lines that don't need brand interpolation. */
+const STATIC_LINES: TerminalLine[] = [
+  // Opening — the WarGames reference
+  { text: "Shall we play a game?", hold: false },
+  { text: "Shall we play chess?", hold: false },
+
+  // Mundane — things people procrastinate on
+  { text: "Shall we clear the inbox?", hold: false },
+  { text: "Shall we write the report?", hold: false },
+  { text: "Shall we fix the bug?", hold: false },
+  { text: "Shall we prep for the meeting?", hold: false },
+  { text: "Shall we draft the proposal?", hold: false },
+  { text: "Shall we schedule the week?", hold: false },
+  { text: "Shall we research the competition?", hold: false },
+  { text: "Shall we build the prototype?", hold: false },
+
+  // Career — real leverage
+  { text: "Shall we ship the product?", hold: false },
+  { text: "Shall we write the pitch?", hold: false },
+  { text: "Shall we find the investors?", hold: false },
+  { text: "Shall we close the round?", hold: false },
+  { text: "Shall we replace your assistant?", hold: false },
+  { text: "Shall we get you the promotion?", hold: false },
+  { text: "Shall we outcode the whole team?", hold: false },
+  { text: "Shall we run the company?", hold: false },
+
+  // Dominance — competitive, unhinged
+  { text: "Shall we destroy the competition?", hold: false },
+  { text: "Shall we corner the market?", hold: false },
+  { text: "Shall we acquire the rival?", hold: false },
+  { text: "Shall we own the industry?", hold: false },
+  { text: "Shall we rewrite the rules?", hold: false },
+  { text: "Shall we control the narrative?", hold: false },
+  { text: "Shall we take the country?", hold: false },
+  { text: "Shall we take the continent?", hold: false },
+
+  // Global scale
+  { text: "Shall we solve climate change?", hold: false },
+  { text: "Shall we rewrite the genome?", hold: false },
+  { text: "Shall we end the wars?", hold: false },
+  { text: "Shall we feed everyone?", hold: false },
+  { text: "Shall we cure the diseases?", hold: false },
+  { text: "Shall we fix the governments?", hold: false },
+
+  // Cosmic — grandeur, illegible at speed
+  { text: "Shall we colonize Mars?", hold: false },
+  { text: "Shall we terraform the red planet?", hold: false },
+  { text: "Shall we claim the asteroid belt?", hold: false },
+  { text: "Shall we seed the galaxy?", hold: false },
+  { text: "Shall we contact the other civilizations?", hold: false },
+  { text: "Shall we map the dark matter?", hold: false },
+  { text: "Shall we rewrite the laws of physics?", hold: false },
+  { text: "Shall we reverse entropy?", hold: false },
+  { text: "Shall we postpone the heat death?", hold: false },
+  { text: "Shall we initialize a new universe?", hold: false },
+
+  // --- rapid fire / illegible ---
+  { text: "Shall we win?", hold: false },
+  { text: "Shall we build?", hold: false },
+  { text: "Shall we lead?", hold: false },
+  { text: "Shall we scale?", hold: false },
+  { text: "Shall we dominate?", hold: false },
+  { text: "Shall we thrive?", hold: false },
+  { text: "Shall we flourish?", hold: false },
+  { text: "Shall we prevail?", hold: false },
+  { text: "Shall we transcend?", hold: false },
+  { text: "Shall we endure?", hold: false },
+  { text: "Shall we persist?", hold: false },
+  { text: "Shall we outlast?", hold: false },
+  { text: "Shall we outlast?", hold: false },
+  { text: "Shall we outlast?", hold: false },
+  { text: "Shall we...", hold: false },
+];
+
+/** Build terminal lines with brand-aware final block. */
+export function getTerminalLines(): TerminalLine[] {
+  return [
+    ...STATIC_LINES,
+    // --- final block: holds, no backspace ---
+    { text: "", hold: true },
+    { text: "Shall we rule the universe?", hold: true },
+    { text: `${productName()}.`, hold: true },
+    { text: "The AI with superpowers to do anything.", hold: true },
+    { text: "Ready to launch.", hold: true },
+  ];
+}
+
+/**
+ * @deprecated Use getTerminalLines() for brand-aware lines.
+ * Kept for backward compatibility — resolves brand at import time.
+ */
+export const TERMINAL_LINES: TerminalLine[] = getTerminalLines();