AmbientBG — Ambient Background Generator

AmbientBG (Ambient Background Generator) is a zero-dependency, pure HTML/CSS/JavaScript web application for generating subtle, performance-tiered ambient backgrounds and gradients with deterministic seed control.

LIVE https://silvercottage.gitlab.io/ambient-bg

---

What it does:

• Seeded Determinism: Reproduce any ambient background configuration using simple seed strings or numbers.
• Ultra Dark Palettes (Low L): Handcrafted low-light HSL presets (Void, Abyssal, Obsidian, Deep Emerald, Blood Moon, Night Gold) with minimal Lightness (L: 2-8%).
• Custom Particle Color Picker (P-Color): Live color picker control to explicitly tint animated particles (Dust, Leaf, Lines, Flow).
• Advanced & 3D Grid Patterns: Includes 3D Isometric Grid, 3D Perspective Mesh, 3D Wireframe Cubes, Hexagonal, Concentric, Crosshatch, Diagonal, Dots, and Lines.
• Dynamic Color Wheel: Built-in color picker with HSL (Hue, Saturation, Lightness) ring and precise slider controls.
• Curated Palette Library: Over 45 curated color presets across groups (Ultra Dark, OLED Dark, Warm, Cool, Nature, Dusk, Dark LED, Soft Pastel, Graphite).
• Themes & Blending Engine:
  • OLED True Dark: Pitch-black background optimized for OLED/AMOLED screens.
  • Glassmorphic: Soft, translucent ambient lighting glow behind subtle grid overlays.
  • Metallic: Directional specular lighting effects.
  • Soft Pastel & Standard Light/Dark: High contrast or muted tone balance.
• Interactive Full-Screen Live Preview:
  • Full-screen website mock interface showing headers, sidebar, hero content cards, and footers.
  • Toggle individual UI sections on/off to test background contrast.
  • Next/Previous seed navigation (← / → arrow keys) and direct preset saving (♥).
  • Live parameter adjustment (Amplitude, Custom Hue, Theme Mode, Particle Type, Particle Color) inside the full preview.
• Performance Optimized:
  • Auto-detected performance tiers (Auto/High/Med/Low/Static).
  • Off-screen element rendering bypass using content-visibility: auto.
  • Static thumbnail renders to maintain high FPS performance across large galleries.

---

Getting Started

Simply open public/index.html in any standard web browser or serve it using any HTTP static server.

Download

Download the packaged application from the latest GitLab release. The SHA-256 digest is recorded in the corresponding release notes.

Verify the archive on Linux:

sha256sum ambient-bg.zip

Verify the archive with PowerShell:

(Get-FileHash -Algorithm SHA256 -LiteralPath ./ambient-bg.zip).Hash.ToLowerInvariant()

Running with Node/npx (Optional):

npx serve public

---

Usage Controls

1. Seed / Batch: Enter any seed string to generate a reproducible background signature or hit Batch for a random set.
2. Theme: Switch between OLED True Dark, Glassmorphic, Metallic, Pastel, Light, or Standard Dark.
3. Color Wheel: Click the rainbow circle icon in the gallery header to pick custom HSL values.
4. Full Preview: Click Full Preview on any item or hit ▶ on a saved preset to open the live application showcase. Use ← / → keys to step through backgrounds.

---

License

• License: MIT License
• Repository: GitLab Repository