OpenKnots · BunsDev · Apr 14, 2026 · Apr 14, 2026
diff --git a/apps/marketing/app/globals.css b/apps/marketing/app/globals.css
@@ -163,17 +163,6 @@
   }
 }
 
-/* Fractal noise texture overlay */
-body::after {
-  content: "";
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  pointer-events: none;
-  opacity: 0.035;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
-}
-
 /* Heading scale */
 h1 {
   font-size: clamp(2.25rem, 5vw, 3.75rem);

diff --git a/apps/marketing/components/DynamicBackground.tsx b/apps/marketing/components/DynamicBackground.tsx
@@ -1,136 +1,57 @@
-"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",
-        }}
-      />
+      <div className="absolute inset-0 bg-background" />
 
-      {/* ── 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]"
+      {/* Structural top light */}
+      <div
+        className="absolute left-1/2 top-0 h-[34rem] w-[min(90rem,100vw)] -translate-x-1/2"
         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",
+          background:
+            "radial-gradient(ellipse at top, oklch(0.58 0.11 255 / 0.12) 0%, oklch(0.46 0.06 250 / 0.05) 38%, transparent 72%)",
         }}
       />
 
-      {/* Bottom-center — subtle warm accent */}
-      <motion.div
-        className="absolute bottom-[-5%] left-[30%] h-[500px] w-[500px] rounded-full blur-[140px]"
+      {/* Subtle section framing */}
+      <div
+        className="absolute inset-x-0 top-[7rem] h-px"
         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",
+          background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent)",
         }}
       />
 
-      {/* Mid-left — faint teal whisper */}
-      <motion.div
-        className="absolute left-[10%] top-[55%] h-[400px] w-[400px] rounded-full blur-[100px]"
+      {/* Crisp grid instead of atmospheric fog */}
+      <div
+        className="absolute inset-0 opacity-[0.045]"
         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",
+          backgroundImage:
+            "linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px)",
+          backgroundPosition: "center top",
+          backgroundSize: "72px 72px",
         }}
       />
 
-      {/* ── Aurora streaks ───────────────────────────────── */}
-      <motion.div
-        className="absolute left-[20%] top-[10%] h-[2px] w-[40vw] origin-left rotate-[15deg] opacity-[0.07]"
+      <div
+        className="absolute inset-0 opacity-[0.025]"
         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",
+          backgroundImage:
+            "linear-gradient(180deg, rgba(255,255,255,0.06) 0, transparent 22rem), linear-gradient(90deg, transparent 0, rgba(255,255,255,0.06) 50%, transparent 100%)",
         }}
       />
 
-      <motion.div
-        className="absolute right-[15%] top-[40%] h-[1.5px] w-[35vw] origin-right -rotate-[12deg] opacity-[0.05]"
+      <div
+        className="absolute inset-x-0 bottom-0 h-[22rem]"
         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",
+          background: "linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.82) 100%)",
         }}
       />
 
-      {/* ── Vignette — darkens edges toward pure black ──── */}
+      {/* Edge control */}
       <div
         className="absolute inset-0"
         style={{
           background:
-            "radial-gradient(ellipse 80% 70% at 50% 40%, transparent 30%, rgba(0,0,0,0.7) 100%)",
+            "radial-gradient(ellipse 85% 72% at 50% 30%, transparent 42%, rgba(0,0,0,0.76) 100%)",
         }}
       />
     </div>

diff --git a/apps/marketing/components/GetStarted.tsx b/apps/marketing/components/GetStarted.tsx
@@ -5,14 +5,6 @@ import { LINKS } from "./links";
 export function GetStarted() {
   return (
     <section id="get-started" className="relative px-6 py-20 sm:py-28">
-      {/* 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,10 @@ import { OKCodeMockup } from "./OKCodeMockup";
 export function Hero() {
   return (
     <section className="relative overflow-hidden px-6 pt-36 pb-0 sm:pt-44">
-      {/* Ambient glow — amplified for true black */}
       <div
-        className="pointer-events-none absolute left-1/2 top-0 -translate-x-1/2"
+        className="pointer-events-none absolute inset-x-0 top-20 h-px"
         style={{
-          width: "1100px",
-          height: "700px",
-          background:
-            "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%)",
+          background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent)",
         }}
       />
 
@@ -89,17 +85,6 @@ export function Hero() {
           >
             <OKCodeMockup />
           </div>
-
-          {/* Subtle reflection glow under frame */}
-          <div
-            className="pointer-events-none absolute -bottom-24 left-1/2 -translate-x-1/2"
-            style={{
-              width: "80%",
-              height: "140px",
-              background:
-                "radial-gradient(ellipse at center, oklch(0.50 0.20 270 / 0.08) 0%, transparent 70%)",
-            }}
-          />
         </motion.div>
       </div>
     </section>