Skip to main content
Make LoFi Engine truly yours with customizable background visuals. Choose from built-in artworks or upload your own images to create the perfect atmosphere.

​
Background Artworks

LoFi Engine includes 10 curated background images designed to complement your focus sessions:

Built-in Backgrounds

10 pre-selected artworks with LoFi aesthetics

Custom Uploads

Add unlimited personal images

Quick Navigation

Switch backgrounds with arrow keys

Persistent Storage

Custom images saved locally in browser

​
Changing Backgrounds

The fastest way to cycle through backgrounds:
  • Right Arrow (→): Next background
  • Left Arrow (←): Previous background
Keyboard navigation cycles through ALL backgrounds - both built-in and custom uploads.

​
Built-in Backgrounds

The app includes 10 carefully selected backgrounds:

​
Custom Backgrounds

Upload your own images to create a personalized experience:

​
Adding Custom Images

1

Open Settings

Press J to access the settings panel
2

Click Upload Button

Look for the + button in the Background section header
3

Select Images

Choose one or multiple image files from your computer
4

Automatic Processing

Images are processed and added to your background collection
5

Instant Activation

Newly uploaded images become active immediately

​
Supported Formats

Upload any standard image format:
  • JPEG/JPG - Best for photographs
  • PNG - Supports transparency
  • WebP - Modern, efficient format
  • GIF - Static images only (no animation)
Images are converted to data URLs and stored locally in your browser. No images are uploaded to any server.

​
Multiple Uploads

Upload multiple images at once:
  • Select multiple files in the file picker
  • All images process simultaneously
  • Each gets a unique ID for identification
  • All are added to your background collection

​
Managing Custom Backgrounds

​
Deleting Backgrounds

Remove custom backgrounds you no longer want:
1

Navigate to Custom Background

Use arrow keys or settings to view the custom image
2

Hover Preview

In the settings panel, hover over the preview image
3

Click Delete Button

A red trash icon appears - click it to delete
4

Auto-Switch

App automatically switches to the next available background
Deleting a background is permanent and cannot be undone. You’ll need to re-upload if you want it back.

​
Storage Details

  • Location: Browser localStorage (IndexedDB via localDB)
  • Format: JSON with base64 encoded images
  • Limit: Browser-dependent (typically 5-10MB)
  • Persistence: Survives app restarts
  • Privacy: All data stays local, never uploaded
Stored data structure:
{
  "id": "custom_1234567890_abc123",
  "name": "my-photo.jpg",
  "dataUrl": "data:image/jpeg;base64,...",
  "size": 245678,
  "type": "image/jpeg"
}

​
Background Cycling

Backgrounds cycle through both built-in and custom images:
  1. Start with built-in backgrounds (bg1 - bg10)
  2. Continue to custom uploaded images
  3. Loop back to beginning
The order is: bg1, bg2, …, bg10, custom1, custom2, …, then back to bg1.

​
Visual Feedback

​
Settings Preview

The settings panel shows:
  • Current background - Full preview image
  • Navigation arrows - Left and right buttons
  • Delete button - Only for custom backgrounds (appears on hover)
  • Upload indicator - Shows when processing images

​
Active State

Know which background is active:
  • Preview in settings matches main background
  • Background changes instantly when navigating
  • No lag or loading screens

​
Technical Implementation

​
Background Application

Backgrounds are applied via CSS: 
const bg = document.getElementById("bg");
bg.style.backgroundImage = `url('${imageUrl}')`;

​
Storage Strategy

Built-in Backgrounds

Stored as static files in assets/background/

Custom Backgrounds

Stored as data URLs in browser localStorage

​
Event System

Background changes trigger custom events: 
window.dispatchEvent(new CustomEvent("backgroundsUpdated"));
window.dispatchEvent(new CustomEvent("customBackgroundSelected", {
  detail: { id: "custom_123" }
}));

​
Best Practices

For best performance:
  • Use images appropriate for your screen resolution
  • 1920x1080 or 2560x1440 are good targets
  • Avoid extremely large files (>5MB)
Choose images that:
  • Don’t distract from work
  • Have appropriate contrast for UI elements
  • Match your mood or task
  • Are aesthetically pleasing but subtle
Manage your collection:
  • Delete backgrounds you rarely use
  • Keep collection under 20-30 images
  • Name files descriptively before uploading

​
Keyboard Shortcuts

Full background control via keyboard:
ShortcutAction
→Next background
←Previous background
JOpen settings (for upload/delete)
Arrow keys work from anywhere in the app, even when settings are closed.

​
Responsive Design

Backgrounds adapt to all screen sizes:
  • Desktop: Full background coverage
  • Mobile: Optimized cropping and scaling
  • Tablet: Balanced display
  • CSS: background-size: cover and background-position: center

Build docs developers (and LLMs) love

Get started for freeTalk to us