From e95761cc61f4487b94c12114f4261b7a382c2413 Mon Sep 17 00:00:00 2001 From: Mark Henderson Date: Thu, 5 Mar 2026 21:08:14 -0800 Subject: [PATCH] Add Lines Gradient Shader + fix Aurora/Sparkles/Meteors to match real Aceternity visuals MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - New 'shader' background: bold diagonal purple→pink→orange→yellow gradient with subtle repeating line overlay (mirrors ui.aceternity.com lines-gradient-shader) - Aurora background: now renders on light bg (#f8f9ff) with soft lavender/blue blurs - Sparkles: forces black base with white star particles and glow box-shadow - Meteors: horizontal streaks with glow, animate diagonally like shooting stars - Beams: switched to SVG lines radiating from a central vanishing point - Auto-adapt text/nav colours for forced-dark (shader, sparkles) and forced-light (aurora) - LIBRARY_STYLE_OPTIONS: 8 Aceternity background options, default changed to gradient Made-with: Cursor --- .../project/[projectId]/design/page.tsx | 18 +-- components/design-scaffolds/marketing.tsx | 132 ++++++++++++------ 2 files changed, 101 insertions(+), 49 deletions(-) diff --git a/app/[workspace]/project/[projectId]/design/page.tsx b/app/[workspace]/project/[projectId]/design/page.tsx index 3153078..59757e5 100644 --- a/app/[workspace]/project/[projectId]/design/page.tsx +++ b/app/[workspace]/project/[projectId]/design/page.tsx @@ -280,14 +280,16 @@ const LIBRARY_STYLE_OPTIONS: Record = { defaultConfig: { mode: "light", background: "clean", nav: "blur", header: "animated-badge", components: ["features", "metrics"], font: "system" }, }, "aceternity": { - modes: [{ id: "dark", label: "Dark" }, { id: "light", label: "Light (limited)" }], + modes: [{ id: "dark", label: "Dark" }, { id: "light", label: "Light" }], backgrounds: [ - { id: "beams", label: "Beams", description: "Signature vertical beam lines" }, - { id: "meteors", label: "Meteors", description: "Shooting particle streaks" }, - { id: "sparkles", label: "Sparkles", description: "Scattered star particles" }, - { id: "wavy", label: "Wavy", description: "Smooth wave shapes" }, - { id: "dot-grid", label: "Dot grid", description: "Perspective dot matrix" }, - { id: "gradient", label: "Glow only", description: "Pure radial glow" }, + { id: "gradient", label: "Gradient anim", description: "Animated blob gradient (Background Gradient Animation)" }, + { id: "shader", label: "Line shader", description: "Bold diagonal gradient: purple→pink→orange→yellow" }, + { id: "beams", label: "Beams", description: "Radial SVG-style light beams on dark bg" }, + { id: "meteors", label: "Meteors", description: "Diagonal shooting-star streaks with glow tails" }, + { id: "sparkles", label: "Sparkles", description: "Black bg with twinkling star particles" }, + { id: "aurora", label: "Aurora", description: "Soft lavender/blue aurora on light bg" }, + { id: "wavy", label: "Wavy", description: "Smooth wave shapes" }, + { id: "dot-grid", label: "Dot grid", description: "Perspective dot matrix" }, ], navStyles: [ { id: "minimal", label: "Minimal", description: "Barely-there top bar" }, @@ -311,7 +313,7 @@ const LIBRARY_STYLE_OPTIONS: Record = { { id: "geist", label: "Geist" }, { id: "plus-jakarta", label: "Plus Jakarta" }, ], - defaultConfig: { mode: "dark", background: "beams", nav: "minimal", header: "gradient-text", components: ["features", "moving-cards"], font: "system" }, + defaultConfig: { mode: "dark", background: "gradient", nav: "minimal", header: "gradient-text", components: ["features", "moving-cards"], font: "system" }, }, "tailwind-only": { modes: [{ id: "light", label: "Light" }, { id: "dark", label: "Dark" }], diff --git a/components/design-scaffolds/marketing.tsx b/components/design-scaffolds/marketing.tsx index 407290c..121af61 100644 --- a/components/design-scaffolds/marketing.tsx +++ b/components/design-scaffolds/marketing.tsx @@ -32,8 +32,9 @@ const ACE_KEYFRAMES = ` 50% { transform: translate(-16%,20%) scale(1.1); } } @keyframes ace-meteor { - 0% { transform: translateX(0) translateY(0); opacity: 0.8; } - 100% { transform: translateX(-180px) translateY(180px); opacity: 0; } + 0% { transform: translateX(0) translateY(0) rotate(-35deg); opacity: 1; } + 70% { opacity: 0.6; } + 100% { transform: translateX(160px) translateY(160px) rotate(-35deg); opacity: 0; } } @keyframes ace-sparkle { 0%,100% { opacity:0; transform:scale(0.4); } @@ -70,14 +71,20 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme const comps = config?.components ?? ["features", "moving-cards"]; const ff = fontStack(config?.font); - const bg = isDark ? "#050010" : "#fafafa"; - const text = isDark ? "#fff" : "#0f172a"; - const muted = isDark ? "rgba(255,255,255,0.38)" : "#64748b"; - const card = isDark ? "rgba(255,255,255,0.035)" : "rgba(0,0,0,0.03)"; - const border= isDark ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.08)"; + // sparkles forces black; aurora forces light; shader always dark-text-over-vibrant + const forcedDark = bgStyle === "sparkles" || bgStyle === "shader"; + const forcedLight = bgStyle === "aurora"; + const effectiveDark = forcedDark ? true : forcedLight ? false : isDark; + + const bg = forcedDark ? "#000" : forcedLight ? "#f8f9ff" : isDark ? "#050010" : "#fafafa"; + const text = effectiveDark ? "#fff" : "#0f172a"; + const muted = effectiveDark ? "rgba(255,255,255,0.38)" : "#64748b"; + const card = effectiveDark ? "rgba(255,255,255,0.035)" : "rgba(0,0,0,0.03)"; + const border= effectiveDark ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.08)"; // ── Background layers ────────────────────────────────────────────────────── const BgLayer = () => { + // Animated gradient blobs — mirrors Aceternity's Background Gradient Animation if (bgStyle === "gradient") return (
@@ -88,51 +95,95 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
); - if (bgStyle === "beams") return ( -
-
- {Array.from({ length: 10 }).map((_, i) => ( -
- ))} + + // Lines Gradient Shader — bold diagonal rainbow band: purple→pink→orange→yellow + if (bgStyle === "shader") return ( +
+ {/* Diagonal gradient band */} +
+ {/* Subtle line overlay */} +
+ {/* Soft vignette */} +
); + + // Background Beams — SVG-style radial beams on dark bg + if (bgStyle === "beams") return ( +
+ + + + + + + + + {Array.from({ length: 12 }).map((_, i) => { + const x = 200 + (i - 6) * 34; + return ( + + ); + })} + +
+ ); + + // Meteors — diagonal shooting-star streaks with glow tails if (bgStyle === "meteors") return (
- {Array.from({ length: 8 }).map((_, i) => ( + {Array.from({ length: 12 }).map((_, i) => (
- ))} -
- ); - if (bgStyle === "sparkles") return ( -
- {Array.from({ length: 28 }).map((_, i) => ( -
))}
); + + // Sparkles — true black bg with small twinkling star particles + if (bgStyle === "sparkles") return ( +
+ {Array.from({ length: 40 }).map((_, i) => { + const size = i % 6 === 0 ? 3 : i % 3 === 0 ? 2 : 1.5; + return ( +
+ ); + })} +
+ ); + + // Aurora — soft lavender/blue glow on a LIGHT background (matches Aceternity's Aurora) + if (bgStyle === "aurora") return ( +
+
+
+
+
+ ); + if (bgStyle === "wavy") return (
@@ -151,7 +202,6 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme if (bgStyle === "dot-grid") return (
); - // gradient fallback return
; };