OpenKnots · BunsDev · Apr 5, 2026 · Apr 5, 2026
diff --git a/apps/marketing/app/globals.css b/apps/marketing/app/globals.css
@@ -16,12 +16,12 @@
   color-scheme: dark;
   --radius: 1.25rem;
 
-  /* Dark-mode-only palette */
-  --background: color-mix(in srgb, #0a0a1a 95%, white);
+  /* Dark-mode-only palette — true black base */
+  --background: #000000;
   --foreground: #f5f5f5;
-  --card: color-mix(in srgb, #0a0a1a 95%, white);
+  --card: rgba(255, 255, 255, 0.02);
   --card-foreground: #f5f5f5;
-  --popover: color-mix(in srgb, #0a0a1a 95%, white);
+  --popover: #050505;
   --popover-foreground: #f5f5f5;
   --primary: oklch(0.588 0.217 264);
   --primary-foreground: #f5f5f5;
@@ -45,7 +45,7 @@
   --chart-5: oklch(0.645 0.246 16.439);
 
   /* Sidebar */
-  --sidebar: oklch(0.205 0 0);
+  --sidebar: #050505;
   --sidebar-foreground: #f5f5f5;
   --sidebar-primary: oklch(0.588 0.217 264);
   --sidebar-primary-foreground: #f5f5f5;
@@ -57,8 +57,8 @@
   /* Semantic tokens */
   --brand: oklch(0.585 0.233 277.117);
   --brand-foreground: #f5f5f5;
-  --surface: oklch(0.205 0 0);
-  --surface-elevated: oklch(0.269 0 0);
+  --surface: #050505;
+  --surface-elevated: #0a0a0a;
   --highlight: oklch(0.585 0.233 277.117);
   --highlight-foreground: #f5f5f5;
 

diff --git a/apps/marketing/app/page.tsx b/apps/marketing/app/page.tsx
@@ -4,16 +4,20 @@ import { FeatureGrid } from "@/components/FeatureGrid";
 import { HowItWorks } from "@/components/HowItWorks";
 import { GetStarted } from "@/components/GetStarted";
 import { Footer } from "@/components/footer";
+import { DynamicBackground } from "@/components/DynamicBackground";
 
 export default function Home() {
   return (
-    <main className="min-h-screen">
-      <Nav />
-      <Hero />
-      <FeatureGrid />
-      <HowItWorks />
-      <GetStarted />
-      <Footer />
+    <main className="relative min-h-screen">
+      <DynamicBackground />
+      <div className="relative z-10">
+        <Nav />
+        <Hero />
+        <FeatureGrid />
+        <HowItWorks />
+        <GetStarted />
+        <Footer />
+      </div>
     </main>
   );
 }
diff --git a/apps/marketing/components/DynamicBackground.tsx b/apps/marketing/components/DynamicBackground.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+/**
+ * Full-page animated background with floating gradient orbs,
+ * a subtle dot grid, and moving aurora streaks — all on deep black.
+ */
+export function DynamicBackground() {
+  return (
+    <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden">
+      {/* ── Dot grid ─────────────────────────────────────── */}
+      <div
+        className="absolute inset-0 opacity-[0.04]"
+        style={{
+          backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1px)",
+          backgroundSize: "32px 32px",
+        }}
+      />
+
+      {/* ── Gradient orbs ────────────────────────────────── */}
+      {/* Top-left — cool purple */}
+      <motion.div
+        className="absolute -left-[15%] -top-[10%] h-[700px] w-[700px] rounded-full blur-[120px]"
+        style={{
+          background: "radial-gradient(circle, oklch(0.45 0.18 280 / 0.18), transparent 70%)",
+        }}
+        animate={{
+          x: [0, 60, -30, 0],
+          y: [0, 40, -20, 0],
+          scale: [1, 1.08, 0.95, 1],
+        }}
+        transition={{
+          duration: 20,
+          repeat: Infinity,
+          ease: "easeInOut",
+        }}
+      />
+
+      {/* Center-right — deep blue */}
+      <motion.div
+        className="absolute right-[-10%] top-[25%] h-[600px] w-[600px] rounded-full blur-[120px]"
+        style={{
+          background: "radial-gradient(circle, oklch(0.40 0.16 260 / 0.14), transparent 70%)",
+        }}
+        animate={{
+          x: [0, -50, 30, 0],
+          y: [0, -30, 50, 0],
+          scale: [1, 0.92, 1.06, 1],
+        }}
+        transition={{
+          duration: 25,
+          repeat: Infinity,
+          ease: "easeInOut",
+        }}
+      />
+
+      {/* Bottom-center — subtle warm accent */}
+      <motion.div
+        className="absolute bottom-[-5%] left-[30%] h-[500px] w-[500px] rounded-full blur-[140px]"
+        style={{
+          background: "radial-gradient(circle, oklch(0.38 0.12 300 / 0.10), transparent 70%)",
+        }}
+        animate={{
+          x: [0, 40, -60, 0],
+          y: [0, -40, 20, 0],
+          scale: [1, 1.1, 0.94, 1],
+        }}
+        transition={{
+          duration: 30,
+          repeat: Infinity,
+          ease: "easeInOut",
+        }}
+      />
+
+      {/* Mid-left — faint teal whisper */}
+      <motion.div
+        className="absolute left-[10%] top-[55%] h-[400px] w-[400px] rounded-full blur-[100px]"
+        style={{
+          background: "radial-gradient(circle, oklch(0.42 0.10 200 / 0.08), transparent 70%)",
+        }}
+        animate={{
+          x: [0, -30, 50, 0],
+          y: [0, 60, -30, 0],
+        }}
+        transition={{
+          duration: 22,
+          repeat: Infinity,
+          ease: "easeInOut",
+        }}
+      />
+
+      {/* ── Aurora streaks ───────────────────────────────── */}
+      <motion.div
+        className="absolute left-[20%] top-[10%] h-[2px] w-[40vw] origin-left rotate-[15deg] opacity-[0.07]"
+        style={{
+          background:
+            "linear-gradient(90deg, transparent, oklch(0.55 0.20 270), oklch(0.50 0.15 240), transparent)",
+        }}
+        animate={{
+          opacity: [0.04, 0.09, 0.04],
+          scaleX: [0.8, 1.2, 0.8],
+        }}
+        transition={{
+          duration: 8,
+          repeat: Infinity,
+          ease: "easeInOut",
+        }}
+      />
+
+      <motion.div
+        className="absolute right-[15%] top-[40%] h-[1.5px] w-[35vw] origin-right -rotate-[12deg] opacity-[0.05]"
+        style={{
+          background:
+            "linear-gradient(90deg, transparent, oklch(0.50 0.18 290), oklch(0.45 0.12 260), transparent)",
+        }}
+        animate={{
+          opacity: [0.03, 0.07, 0.03],
+          scaleX: [1, 0.7, 1],
+        }}
+        transition={{
+          duration: 10,
+          repeat: Infinity,
+          ease: "easeInOut",
+        }}
+      />
+
+      {/* ── Vignette — darkens edges toward pure black ──── */}
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "radial-gradient(ellipse 80% 70% at 50% 40%, transparent 30%, rgba(0,0,0,0.7) 100%)",
+        }}
+      />
+    </div>
+  );
+}
diff --git a/apps/marketing/components/FeatureCard.tsx b/apps/marketing/components/FeatureCard.tsx
@@ -10,15 +10,15 @@ interface FeatureCardProps {
 export function FeatureCard({ icon, title, description, compact }: FeatureCardProps) {
   if (compact) {
     return (
-      <div className="rounded-xl border border-white/[0.04] bg-white/[0.015] p-5">
+      <div className="rounded-xl border border-white/[0.06] bg-white/[0.015] p-5">
         <h3 className="text-[15px] font-medium text-foreground">{title}</h3>
         <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">{description}</p>
       </div>
     );
   }
 
   return (
-    <div className="rounded-2xl border border-white/[0.04] bg-white/[0.015] p-6">
+    <div className="rounded-2xl border border-white/[0.06] bg-white/[0.015] p-6">
       {icon && <div className="mb-4 text-muted-foreground">{icon}</div>}
       <h3 className="text-[15px] font-medium text-foreground">{title}</h3>
       <p className="mt-2 text-[13px] leading-relaxed text-muted-foreground">{description}</p>

diff --git a/apps/marketing/components/FeatureGrid.tsx b/apps/marketing/components/FeatureGrid.tsx
@@ -117,7 +117,15 @@ const secondaryFeatures = [
 
 export function FeatureGrid() {
   return (
-    <section className="mx-auto max-w-6xl px-6 py-20 sm:py-28">
+    <section className="relative mx-auto max-w-6xl px-6 py-20 sm:py-28">
+      {/* Section top glow line */}
+      <div
+        className="pointer-events-none absolute left-1/2 top-0 -translate-x-1/2 h-px w-[60%]"
+        style={{
+          background:
+            "linear-gradient(90deg, transparent, oklch(0.50 0.18 270 / 0.25), transparent)",
+        }}
+      />
       <p className="mb-3 text-center text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground sm:text-[13px]">
         Features
       </p>

diff --git a/apps/marketing/components/GetStarted.tsx b/apps/marketing/components/GetStarted.tsx
@@ -5,7 +5,15 @@ import { LINKS } from "./links";
 export function GetStarted() {
   return (
     <section id="get-started" className="relative px-6 py-20 sm:py-28">
-      <div className="mx-auto max-w-xl text-center">
+      {/* Section glow */}
+      <div
+        className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[300px] w-[500px]"
+        style={{
+          background:
+            "radial-gradient(ellipse at center, oklch(0.45 0.16 270 / 0.06) 0%, transparent 70%)",
+        }}
+      />
+      <div className="relative mx-auto max-w-xl text-center">
         <h2 className="text-foreground">Start building.</h2>
         <p className="mt-3 text-base text-muted-foreground sm:text-lg">One command. Zero config.</p>
 

diff --git a/apps/marketing/components/Hero.tsx b/apps/marketing/components/Hero.tsx
@@ -9,14 +9,14 @@ import { OKCodeMockup } from "./OKCodeMockup";
 export function Hero() {
   return (
     <section className="relative overflow-hidden px-6 pt-36 pb-0 sm:pt-44">
-      {/* Ambient glow */}
+      {/* Ambient glow — amplified for true black */}
       <div
         className="pointer-events-none absolute left-1/2 top-0 -translate-x-1/2"
         style={{
-          width: "900px",
-          height: "600px",
+          width: "1100px",
+          height: "700px",
           background:
-            "radial-gradient(ellipse at center, oklch(0.588 0.217 264 / 0.06) 0%, transparent 70%)",
+            "radial-gradient(ellipse at center, oklch(0.50 0.22 270 / 0.12) 0%, oklch(0.40 0.15 250 / 0.05) 40%, transparent 70%)",
         }}
       />
 
@@ -95,9 +95,9 @@ export function Hero() {
             className="pointer-events-none absolute -bottom-24 left-1/2 -translate-x-1/2"
             style={{
               width: "80%",
-              height: "120px",
+              height: "140px",
               background:
-                "radial-gradient(ellipse at center, oklch(0.588 0.217 264 / 0.04) 0%, transparent 70%)",
+                "radial-gradient(ellipse at center, oklch(0.50 0.20 270 / 0.08) 0%, transparent 70%)",
             }}
           />
         </motion.div>

diff --git a/apps/marketing/components/HowItWorks.tsx b/apps/marketing/components/HowItWorks.tsx
@@ -18,7 +18,15 @@ const steps = [
 
 export function HowItWorks() {
   return (
-    <section className="mx-auto max-w-6xl px-6 py-20 sm:py-28">
+    <section className="relative mx-auto max-w-6xl px-6 py-20 sm:py-28">
+      {/* Section top glow line */}
+      <div
+        className="pointer-events-none absolute left-1/2 top-0 -translate-x-1/2 h-px w-[40%]"
+        style={{
+          background:
+            "linear-gradient(90deg, transparent, oklch(0.50 0.18 270 / 0.20), transparent)",
+        }}
+      />
       <p className="mb-3 text-center text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground sm:text-[13px]">
         Quick start
       </p>

diff --git a/apps/marketing/components/footer.tsx b/apps/marketing/components/footer.tsx
@@ -3,7 +3,7 @@ import { LINKS } from "./links";
 
 export function Footer() {
   return (
-    <footer className="border-t border-white/[0.04] px-6 py-8">
+    <footer className="border-t border-white/[0.06] px-6 py-8">
       <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 sm:flex-row">
         <span className="text-sm text-muted-foreground">
           <span className="text-foreground/60 font-bold">OK Code</span> &middot; Built by{" "}