Projects › BibleWeb › Atmosphere › Atmospheric backgrounds
Needs Design

Atmospheric backgrounds

Area: Atmosphere Milestone: v3

Context

Problem: BibleGame had beautiful pixel-art backgrounds that created an immersive reading atmosphere — a campfire by the Sea of Galilee at night, the Jerusalem skyline at sunset. The web version currently has plain colored backgrounds.

Solution: Port the BibleGame atmospheric backgrounds to the web using Canvas API or CSS. Two scenes: Sea of Galilee (night, moon, water, campfire) and Jerusalem (sunset, city silhouette).

Not included: Dynamic weather, day/night cycles, or user-uploaded backgrounds.

Functional

Expected behavior:

  • Behind the Bible text, a subtle atmospheric scene sets the mood
  • Sea of Galilee: dark night sky, moon, gentle water, distant campfire glow
  • Jerusalem: warm sunset, city silhouette on the horizon
  • Scenes don't distract from reading — they're subtle background ambiance

UX & Design

Visual reference: BibleGame Atmosphere/ folder contains 10 pixel-art asset files defining both scenes.

Design consideration: Consider a CSS-only simplified version first before attempting full Canvas rendering. The effect should be subtle — a gentle gradient or blurred background, not a full illustration.

TODO: Decide between Canvas API rendering (faithful to BibleGame) vs CSS-only (simpler, lighter)

Technical

BibleGame reference: ~/Code/BibleGame/Atmosphere/ — 10 files defining Sea of Galilee and Jerusalem scenes.

Option A — Canvas API:

  • Render scenes as layered Canvas elements behind the reader
  • Port pixel-art assets to Canvas drawing commands
  • Heavier but more faithful to the original

Option B — CSS-only:

  • Gradient backgrounds + CSS shapes for silhouettes
  • Lighter, better performance, easier to maintain
  • Less visual fidelity

Files:

  • New component: apps/web/src/lib/components/atmosphere/SceneRenderer.svelte (create)
  • apps/web/src/routes/(app)/+layout.svelte (modify — add background layer)

Status

Current: NEEDS_DESIGN Milestone: v3 Priority: Medium — distinctive visual feature but not essential for functionality

Design questions:

  1. Canvas or CSS-only?
  2. How subtle should the effect be? (avoid distracting from reading)
  3. Should backgrounds be visible on all themes or only certain ones?

Dependencies:

  • Requires: nothing
  • Enables: passage-aware scene switching (NEEDS_DESIGN), animated elements (NEEDS_DESIGN)
← Back to Atmosphere features