mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Lines Gradient Shader + fix Aurora/Sparkles/Meteors to match real Aceternity visuals

Browse Source 
- 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
This commit is contained in:
Mark Henderson
2026-03-05 21:08:14 -08:00
parent e79c2fe5c5
commit e95761cc61
2 changed files with 101 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/[workspace]/project/[projectId]/design/page.tsx
View File

@@ -280,14 +280,16 @@ const LIBRARY_STYLE_OPTIONS: Record<string, LibraryStyleOptions> = {
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<string, LibraryStyleOptions> = {
{ 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" }],