Skip to content

Commit b440c45

Browse files
BunsDevBunsDev
authored
Remove marketing fog and simplify background (#451)
- Replace layered atmospheric glows with cleaner grid and edge treatment - Remove unused section glow and reflection accents from hero/get-started
1 parent 3fb6de2 commit b440c45

4 files changed

Lines changed: 28 additions & 141 deletions

File tree

‎apps/marketing/app/globals.css‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -163,17 +163,6 @@
163163
}
164164
}
165165

166-
/* Fractal noise texture overlay */
167-
body::after {
168-
content: "";
169-
position: fixed;
170-
inset: 0;
171-
z-index: 9999;
172-
pointer-events: none;
173-
opacity: 0.035;
174-
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");
175-
}
176-
177166
/* Heading scale */
178167
h1 {
179168
font-size: clamp(2.25rem, 5vw, 3.75rem);

‎apps/marketing/components/DynamicBackground.tsx‎

Lines changed: 26 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,57 @@
1-
"use client";
2-
3-
import { motion } from "framer-motion";
4-
5-
/**
6-
* Full-page animated background with floating gradient orbs,
7-
* a subtle dot grid, and moving aurora streaks — all on deep black.
8-
*/
91
export function DynamicBackground() {
102
return (
113
<div className="pointer-events-none fixed inset-0 z-0 overflow-hidden">
12-
{/* ── Dot grid ─────────────────────────────────────── */}
13-
<div
14-
className="absolute inset-0 opacity-[0.04]"
15-
style={{
16-
backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1px)",
17-
backgroundSize: "32px 32px",
18-
}}
19-
/>
4+
<div className="absolute inset-0 bg-background" />
205

21-
{/* ── Gradient orbs ────────────────────────────────── */}
22-
{/* Top-left — cool purple */}
23-
<motion.div
24-
className="absolute -left-[15%] -top-[10%] h-[700px] w-[700px] rounded-full blur-[120px]"
25-
style={{
26-
background: "radial-gradient(circle, oklch(0.45 0.18 280 / 0.18), transparent 70%)",
27-
}}
28-
animate={{
29-
x: [0, 60, -30, 0],
30-
y: [0, 40, -20, 0],
31-
scale: [1, 1.08, 0.95, 1],
32-
}}
33-
transition={{
34-
duration: 20,
35-
repeat: Infinity,
36-
ease: "easeInOut",
37-
}}
38-
/>
39-
40-
{/* Center-right — deep blue */}
41-
<motion.div
42-
className="absolute right-[-10%] top-[25%] h-[600px] w-[600px] rounded-full blur-[120px]"
6+
{/* Structural top light */}
7+
<div
8+
className="absolute left-1/2 top-0 h-[34rem] w-[min(90rem,100vw)] -translate-x-1/2"
439
style={{
44-
background: "radial-gradient(circle, oklch(0.40 0.16 260 / 0.14), transparent 70%)",
45-
}}
46-
animate={{
47-
x: [0, -50, 30, 0],
48-
y: [0, -30, 50, 0],
49-
scale: [1, 0.92, 1.06, 1],
50-
}}
51-
transition={{
52-
duration: 25,
53-
repeat: Infinity,
54-
ease: "easeInOut",
10+
background:
11+
"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%)",
5512
}}
5613
/>
5714

58-
{/* Bottom-center — subtle warm accent */}
59-
<motion.div
60-
className="absolute bottom-[-5%] left-[30%] h-[500px] w-[500px] rounded-full blur-[140px]"
15+
{/* Subtle section framing */}
16+
<div
17+
className="absolute inset-x-0 top-[7rem] h-px"
6118
style={{
62-
background: "radial-gradient(circle, oklch(0.38 0.12 300 / 0.10), transparent 70%)",
63-
}}
64-
animate={{
65-
x: [0, 40, -60, 0],
66-
y: [0, -40, 20, 0],
67-
scale: [1, 1.1, 0.94, 1],
68-
}}
69-
transition={{
70-
duration: 30,
71-
repeat: Infinity,
72-
ease: "easeInOut",
19+
background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent)",
7320
}}
7421
/>
7522

76-
{/* Mid-left — faint teal whisper */}
77-
<motion.div
78-
className="absolute left-[10%] top-[55%] h-[400px] w-[400px] rounded-full blur-[100px]"
23+
{/* Crisp grid instead of atmospheric fog */}
24+
<div
25+
className="absolute inset-0 opacity-[0.045]"
7926
style={{
80-
background: "radial-gradient(circle, oklch(0.42 0.10 200 / 0.08), transparent 70%)",
81-
}}
82-
animate={{
83-
x: [0, -30, 50, 0],
84-
y: [0, 60, -30, 0],
85-
}}
86-
transition={{
87-
duration: 22,
88-
repeat: Infinity,
89-
ease: "easeInOut",
27+
backgroundImage:
28+
"linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px)",
29+
backgroundPosition: "center top",
30+
backgroundSize: "72px 72px",
9031
}}
9132
/>
9233

93-
{/* ── Aurora streaks ───────────────────────────────── */}
94-
<motion.div
95-
className="absolute left-[20%] top-[10%] h-[2px] w-[40vw] origin-left rotate-[15deg] opacity-[0.07]"
34+
<div
35+
className="absolute inset-0 opacity-[0.025]"
9636
style={{
97-
background:
98-
"linear-gradient(90deg, transparent, oklch(0.55 0.20 270), oklch(0.50 0.15 240), transparent)",
99-
}}
100-
animate={{
101-
opacity: [0.04, 0.09, 0.04],
102-
scaleX: [0.8, 1.2, 0.8],
103-
}}
104-
transition={{
105-
duration: 8,
106-
repeat: Infinity,
107-
ease: "easeInOut",
37+
backgroundImage:
38+
"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%)",
10839
}}
10940
/>
11041

111-
<motion.div
112-
className="absolute right-[15%] top-[40%] h-[1.5px] w-[35vw] origin-right -rotate-[12deg] opacity-[0.05]"
42+
<div
43+
className="absolute inset-x-0 bottom-0 h-[22rem]"
11344
style={{
114-
background:
115-
"linear-gradient(90deg, transparent, oklch(0.50 0.18 290), oklch(0.45 0.12 260), transparent)",
116-
}}
117-
animate={{
118-
opacity: [0.03, 0.07, 0.03],
119-
scaleX: [1, 0.7, 1],
120-
}}
121-
transition={{
122-
duration: 10,
123-
repeat: Infinity,
124-
ease: "easeInOut",
45+
background: "linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.82) 100%)",
12546
}}
12647
/>
12748

128-
{/* ── Vignette — darkens edges toward pure black ──── */}
49+
{/* Edge control */}
12950
<div
13051
className="absolute inset-0"
13152
style={{
13253
background:
133-
"radial-gradient(ellipse 80% 70% at 50% 40%, transparent 30%, rgba(0,0,0,0.7) 100%)",
54+
"radial-gradient(ellipse 85% 72% at 50% 30%, transparent 42%, rgba(0,0,0,0.76) 100%)",
13455
}}
13556
/>
13657
</div>

‎apps/marketing/components/GetStarted.tsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,6 @@ import { LINKS } from "./links";
55
export function GetStarted() {
66
return (
77
<section id="get-started" className="relative px-6 py-20 sm:py-28">
8-
{/* Section glow */}
9-
<div
10-
className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[300px] w-[500px]"
11-
style={{
12-
background:
13-
"radial-gradient(ellipse at center, oklch(0.45 0.16 270 / 0.06) 0%, transparent 70%)",
14-
}}
15-
/>
168
<div className="relative mx-auto max-w-xl text-center">
179
<h2 className="text-foreground">Start building.</h2>
1810
<p className="mt-3 text-base text-muted-foreground sm:text-lg">One command. Zero config.</p>

‎apps/marketing/components/Hero.tsx‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,10 @@ import { OKCodeMockup } from "./OKCodeMockup";
99
export function Hero() {
1010
return (
1111
<section className="relative overflow-hidden px-6 pt-36 pb-0 sm:pt-44">
12-
{/* Ambient glow — amplified for true black */}
1312
<div
14-
className="pointer-events-none absolute left-1/2 top-0 -translate-x-1/2"
13+
className="pointer-events-none absolute inset-x-0 top-20 h-px"
1514
style={{
16-
width: "1100px",
17-
height: "700px",
18-
background:
19-
"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%)",
15+
background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent)",
2016
}}
2117
/>
2218

@@ -89,17 +85,6 @@ export function Hero() {
8985
>
9086
<OKCodeMockup />
9187
</div>
92-
93-
{/* Subtle reflection glow under frame */}
94-
<div
95-
className="pointer-events-none absolute -bottom-24 left-1/2 -translate-x-1/2"
96-
style={{
97-
width: "80%",
98-
height: "140px",
99-
background:
100-
"radial-gradient(ellipse at center, oklch(0.50 0.20 270 / 0.08) 0%, transparent 70%)",
101-
}}
102-
/>
10388
</motion.div>
10489
</div>
10590
</section>

0 commit comments

Comments
 (0)