Projects › BibleWeb › Atmosphere › Animated elements (fire, waves, particles)
Needs Design

Animated elements (fire, waves, particles)

Area: Atmosphere Milestone: v3

Context

Problem: Static atmospheric backgrounds look flat. BibleGame's scenes had subtle animations — campfire sparks rising, gentle wave motion, dust motes floating — that brought the scenes to life.

Solution: A lightweight Canvas-based particle system for subtle atmospheric animations. Campfire sparks for the Galilee scene, dust motes for the Jerusalem scene. Kept minimal (20-50 particles max) to avoid distraction and performance impact.

Not included: Complex physics simulations, interactive particles, or weather effects.

Functional

Expected animations:

  • Galilee scene: Campfire sparks rising upward, fading as they go. Gentle orange glow.
  • Jerusalem scene: Dust motes floating slowly, catching light. Subtle and ambient.
  • Both: very subtle, shouldn't draw attention away from the Bible text

Edge cases:

  • prefers-reduced-motion: disable all particle animations
  • Mobile: reduce particle count for performance
  • 20-50 particles max

UX & Design

Particle behavior:

  • Small (1-3px), semi-transparent
  • Slow movement with slight randomness
  • Fade in/out at edges
  • No interaction with user input

Reference: BibleGame ParticleSystem.cs — campfire spark implementation.

Technical

Implementation:

  • Canvas-based particle system using requestAnimationFrame
  • Each particle: position (x, y), velocity, opacity, lifetime
  • Simple update loop: move, age, respawn dead particles
  • 20-50 particles max for performance

Reference: BibleGame ParticleSystem.cs.

Files:

  • New component: apps/web/src/lib/components/atmosphere/ParticleSystem.svelte (create)

Status

Current: NEEDS_DESIGN Milestone: v3 Priority: Low — visual polish, depends on backgrounds

Dependencies:

  • Requires: atmospheric backgrounds (NEEDS_DESIGN)
← Back to Atmosphere features